{"id":14972201,"url":"https://github.com/twbs/fantasticon","last_synced_at":"2025-10-01T20:32:03.689Z","repository":{"id":143163088,"uuid":"614953262","full_name":"twbs/fantasticon","owner":"twbs","description":"Icon font generation tool","archived":false,"fork":true,"pushed_at":"2024-05-01T18:25:52.000Z","size":3412,"stargazers_count":31,"open_issues_count":0,"forks_count":9,"subscribers_count":3,"default_branch":"dev","last_synced_at":"2024-10-29T23:59:59.256Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"tancredi/fantasticon","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/twbs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":"twbs","open_collective":"bootstrap"}},"created_at":"2023-03-16T16:42:37.000Z","updated_at":"2024-10-17T20:18:34.000Z","dependencies_parsed_at":"2023-09-24T09:17:09.493Z","dependency_job_id":null,"html_url":"https://github.com/twbs/fantasticon","commit_stats":{"total_commits":318,"total_committers":12,"mean_commits":26.5,"dds":0.5031446540880503,"last_synced_commit":"14ea7de79982238cff37deaf038affcb3e636262"},"previous_names":[],"tags_count":49,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twbs%2Ffantasticon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twbs%2Ffantasticon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twbs%2Ffantasticon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twbs%2Ffantasticon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/twbs","download_url":"https://codeload.github.com/twbs/fantasticon/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230726729,"owners_count":18271355,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-24T13:46:32.313Z","updated_at":"2025-10-01T20:31:58.370Z","avatar_url":"https://github.com/twbs.png","language":"TypeScript","funding_links":["https://github.com/sponsors/twbs","https://opencollective.com/bootstrap"],"categories":[],"sub_categories":[],"readme":"![Logo](https://github.com/twbs/fantasticon/blob/dev/.github/logo.png)\n\n\u003ch2 align=\"center\"\u003eFantasticon\u003c/h2\u003e\n\n![Screenshot](https://github.com/twbs/fantasticon/blob/dev/.github/screenshot.png)\n\n\u003cblockquote align=\"center\"\u003e\n  Easy-to-use, pre-configured CLI tool to generate web-font icon kits from SVG files\n\u003c/blockquote\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@twbs/fantasticon\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@twbs/fantasticon?logo=npm\u0026logoColor=fff\" alt=\"npm version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/twbs/fantasticon/actions/workflows/ci.yml?query=branch%3Adev\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/actions/workflow/status/twbs/fantasticon/ci.yml?branch=dev\u0026label=CI\u0026logo=github\" alt=\"CI status\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n### Intro\n\nIcon-font generation, easy to use and highly configurable.\n\nIt also generates TypeScript types, JSON maps of the generated code-points, allowing for a great deal of different usages, e.g. integrating with React type-safe icon components or integration on mobile apps by just combining TTF and JSON generation.\n\n### Install\n\n```bash\nnpm install -g @twbs/fantasticon\n```\n\n## Use\n\n### Quick usage\n\n```bash\nfantasticon my-icons -o icon-dist\n```\n\n### Command-line\n\n**Note:** Not all options can be specified through the command line - for `formatOptions`, `pathOptions`, `getIconId` and `templates` use a [configuration file](#configuration-file) or the JavaScript [API](#api).\n\n```text\nUsage: fantasticon [options] [input-dir]\n\nOptions:\n  -V, --version                output the version number\n  -c, --config \u003cvalue\u003e         custom config path (default: .fantasticonrc | fantasticonrc | .fantasticonrc.json | fantasticonrc.json | .fantasticonrc.js | fantasticonrc.js)\n  -o, --output \u003cvalue\u003e         specify output directory\n  -n, --name \u003cvalue\u003e           base name of the font set used both as default asset name (default: icons)\n  -t, --font-types \u003cvalue...\u003e  specify font formats to generate (default: eot, woff2, woff, available: eot, woff2, woff, ttf, svg)\n  -g --asset-types \u003cvalue...\u003e  specify other asset types to generate (default: css, html, json, ts, available: css, less, scss, sass, html, json, ts)\n  -h, --font-height \u003cvalue\u003e    the output font height (icons will be scaled so the highest has this height) (default: 300)\n  --descent \u003cvalue\u003e            the font descent\n  --normalize [bool]           normalize icons by scaling them to the height of the highest icon\n  -r, --round [bool]           setup the SVG path rounding [10e12]\n  --selector \u003cvalue\u003e           use a CSS selector instead of 'tag + prefix' (default: null)\n  -p, --prefix \u003cvalue\u003e         CSS class prefix (default: icon)\n  --tag \u003cvalue\u003e                CSS base tag for icons (default: i)\n  -u, --fonts-url \u003cvalue\u003e      public URL to the fonts directory (used in the generated CSS)\n  --debug                      display errors stack trace (default: false)\n  --silent                     run with no logs (default: false)\n  --help                       display help for command\n```\n\n### Configuration file\n\nSome options (specifically, `formatOptions`, `pathOptions` and `getIconId`) cannot be passed to the CLI directly.\n\nTo have more control and better readability, you can create a simple configuration file.\n\nBy default, `fantasticon` will look for one of following files in the working directory:\n\n```text\n.fantasticonrc | fantasticonrc | .fantasticonrc.json | fantasticonrc.json | .fantasticonrc.js | fantasticonrc.js\n```\n\nYou can specify a custom `--config` option with your configuration file path.\n\nHere's an example `.fantasticonrc.js`:\n\n```js\nmodule.exports = {\n  inputDir: './icons', // (required)\n  outputDir: './dist', // (required)\n  fontTypes: ['ttf', 'woff', 'woff2'],\n  assetTypes: ['ts', 'css', 'json', 'html'],\n  fontsUrl: '/static/fonts',\n  formatOptions: {\n    // Pass options directly to `svgicons2svgfont`\n    woff: {\n      // Woff Extended Metadata Block - see https://www.w3.org/TR/WOFF/#Metadata\n      metadata: '...'\n    },\n    json: {\n      // render the JSON human readable with two spaces indentation (default is none, so minified)\n      indent: 2\n    },\n    ts: {\n      // select what kind of types you want to generate (default `['enum', 'constant', 'literalId', 'literalKey']`)\n      types: ['constant', 'literalId'],\n      // render the types with `'` instead of `\"` (default is `\"`)\n      singleQuotes: true,\n      // customise names used for the generated types and constants\n      enumName: 'MyIconType',\n      constantName: 'MY_CODEPOINTS'\n      // literalIdName: 'IconId',\n      // literalKeyName: 'IconKey'\n    }\n  },\n  // Use a custom Handlebars template\n  templates: {\n    css: './my-custom-tp.css.hbs'\n  },\n  pathOptions: {\n    ts: './src/types/icon-types.ts',\n    json: './misc/icon-codepoints.json'\n  },\n  codepoints: {\n    'chevron-left': 57344, // decimal representation of 0xe000\n    'chevron-right': 57345,\n    'thumbs-up': 57358,\n    'thumbs-down': 57359\n  },\n  // Customize generated icon IDs (unavailable with `.json` config file)\n  getIconId: ({\n    basename, // `string` - Example: 'foo';\n    relativeDirPath, // `string` - Example: 'sub/dir/foo.svg'\n    absoluteFilePath, // `string` - Example: '/var/icons/sub/dir/foo.svg'\n    relativeFilePath, // `string` - Example: 'foo.svg'\n    index // `number` - Example: `0`\n  }) =\u003e [index, basename].join('_') // '0_foo'\n};\n```\n\n### API\n\n#### Simple usage\n\n```js\nimport { generateFonts } from '@twbs/fantasticon';\n\ngenerateFonts().then(results =\u003e console.log('Done', results));\n```\n\n#### Options\n\n```js\nimport { generateFonts } from '@twbs/fantasticon';\n\ngenerateFonts({\n  name: 'icons',\n  fontTypes: [FontAssetType.EOT, FontAssetType.WOFF2, FontAssetType.WOFF],\n  assetTypes: [\n    OtherAssetType.CSS,\n    OtherAssetType.HTML,\n    OtherAssetType.JSON,\n    OtherAssetType.TS\n  ],\n  formatOptions: { json: { indent: 2 } },\n  templates: {},\n  pathOptions: {},\n  codepoints: {},\n  fontHeight: 300,\n  round: undefined, // --\n  descent: undefined, // Will use `svgicons2svgfont` defaults\n  normalize: undefined, // --\n  selector: null,\n  tag: 'i',\n  prefix: 'icon',\n  fontsUrl: null\n}).then(results =\u003e console.log(results));\n```\n\n#### Organising icons\n\nIcon names and className will be generated from a slug of the relative path + basename of each `.svg` file found in the input directory.\n\nThis allows arranging your icons in namespaces, which can be useful if a project uses a large number of icons.\n\nConsidering the following `./icons` input directory:\n\n```text\nicons\n├── logo.svg\n├── social\n│   ├── facebook.svg\n│   └── twitter.svg\n└── symbol\n    └── chevron\n        ├── left.svg\n        └── right.svg\n```\n\nRunning `fantasticon ./icons -o dist` will generate a font-set with the following Icon IDs / CSS selectors:\nAnd the generated icon IDs would be:\n\n| Icon ID                | CSS selector                 |\n| ---------------------- | ---------------------------- |\n| `social-facebook`      | `.icon.icon-social-facebook` |\n| `social-twitter`       | `.icon.icon-social-twitter`  |\n| `symbol-chevron-left`  | `.icon.icon-chevron-left`    |\n| `symbol-chevron-right` | `.icon.icon-chevron-right`   |\n\nYou can provide a `getIconId` function via the configuration file to customize how the icon IDs / CSS selectors are derived from the filepath. The function will receive relative paths to the icon and the input directory as arguments, and must return a unique string to be used as the ID.\n\n### Support\n\nThe library is currently actively maintained for for Node 16.x.x support or above\n\n### Contribute\n\nPRs are always welcome. If you need help questions, want to bounce ideas or just say hi, [join the Discord channel](https://discord.gg/BXAY3Kc3mp).\n\n### License\n\nCopyright (c) 2020 Tancredi Trugenberger. - Released under the [MIT license](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwbs%2Ffantasticon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwbs%2Ffantasticon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwbs%2Ffantasticon/lists"}