Easy-to-use, pre-configured cli tool to generate web-font icon kits from .svg files
Icon-font generation, easy to use and highly configurable.
It 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.
npm install -g fantasticon
fantasticon my-icons/*.svg -o icon-dist
Usage: fantasticon [options] [inputDir]
Options:
-V, --version output the version number
-c, --config <value> custom config path (default: .fantasticonrc | fantasticonrc | .fantasticonrc.json | fantasticonrc.json | .fantasticonrc.js | fantasticonrc.js)
-o, --output <value> specify output directory
-n, --name <value> base name of the font set used both as default asset name and classname prefix (default: icons)
-t, --font-types <value...> specify font formats to generate (default: eot, woff2, woff, available: eot, woff2, woff, ttf, svg)
-g --asset-types <value...> specify other asset types to generate (default: css, html, json, ts, available: css, html, json, ts)
-h, --font-height <value> the output font height (icons will be scaled so the highest has this height) (default: 300)
--descent <value> the font descent
--normalize [bool] normalize icons by scaling them to the height of the highest icon
-r, --round [bool] setup the SVG path rounding [10e12]
--selector <value> use a CSS selector instead of 'tag + prefix' (default: null)
--tag <value> CSS base tag for icons (default: i)
-u, --fonts-url <value> public url to the fonts directory (used in the generated CSS)
--debug display errors stack trace (default: false)
--silent run with no logs (default: false)
--help display help for commandSome options (specifically, formatOptions and pathOptions) cannot be passed to the cli directly.
To have more control and better readability, you can create a simple configuration file.
By default, fantasticon will look for one of following files in the working directory:
.fantasticonrc | fantasticonrc | .fantasticonrc.json | fantasticonrc.json | .fantasticonrc.js | fantasticonrc.js
You can specify a custom --config option with your configuration file path.
Here's an example .fantasticonrc.js:
module.exports = {
inputDir: './icons',
outputDir: './dist',
fontTypes: ['ttf', 'woff', 'woff2'],
assetTypes: ['ts', 'css', 'json', 'html'],
fontsUrl: '/static/fonts',
fontTypes: ['ttf'],
formatOptions: {
// Pass options directly to `svgicons2svgfont`
svg: { metadata: { foo: 'bar' }, ascent: 0.5 },
json: { indent: 2 }
},
pathOptions: {
ts: './src/types/icon-types.ts',
json: './misc/icon-codepoints.json'
}
};import { generateFonts } from 'fantasticon';
generateFonts().then(results => console.log('Done', results));import { generateFonts } from 'fantasticon';
// Default options
generateFonts({
name: 'icons',
fontTypes: [FontAssetType.EOT, FontAssetType.WOFF2, FontAssetType.WOFF],
assetTypes: [
OtherAssetType.CSS,
OtherAssetType.HTML,
OtherAssetType.JSON,
OtherAssetType.TS
],
formatOptions: {},
pathOptions: {},
codepoints: {},
fontHeight: 300,
round: undefined, // --
descent: undefined, // Will use `svgicons2svgfont` defaults
normalize: undefined, // --
selector: null,
tag: 'i',
prefix: 'icon',
fontsUrl: null
}).then(results => console.log(results));Copyright (c) 2020 Tancredi Trugenberger. - Released under the MIT license
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent