icon-builder
An icon builder forked from webfonts-generator.
-
🎉 Supports:svg
,ttf
,woff
,woff2
,eot
-
💥 Converts SVG icons to React components -
🥊 Developed with TypeScript -
✅ Passes all tests -
👀 Generates a friendly preview in HTML
Install
$ yarn add icon-builder
Usage
import { toFonts } from 'icon-builder';
(async () => {
const result = await toFonts({
fontName: 'helloworld',
src: 'icons/*.svg',
out: 'icons-output',
});
})();
Options
option | type | default | description |
---|---|---|---|
src | string |
Required | |
out |
string / false
|
false |
|
fontName | string |
'iconfont' |
|
classPrefix | string |
'icon-' |
|
hash | boolean |
true |
Use hash |
types | array |
['svg', 'ttf', 'eot', 'woff', 'woff2'] |
Font types |
startCodepoint | number |
0xf101 |
|
codepoints | object |
{} |
Unicode start |
normalize | boolean |
true |
|
centerHorizontally | boolean |
true |
|
css | object |
CSS config | |
html | object |
HTML config |
css / html config
{
out: true, // string | boolean
template: 'path/to/the/template.hbs',
options: {},
}
out
-
string
: The output path of CSS/HTML file. -
true
: The output path is the same as the fonts path (seeout
in Options). -
false
: No emit CSS/HTML file.
By default, css.out
is true
, html.out
is false
.
template
Templates must be coded in Handlebars (.hbs
) format. See templates
folder as a reference.
This is optional.
options
This is any extra data passed to the Handlebars template set in template
.
This is optional.
React components
import { toReact } from 'icon-builder';
(async () => {
await toReact({
src: 'icons/*.svg',
out: 'icons-output',
});
})();
Note
Before building the icon font, it is recommended to convert the SVG icons from stroke to fill.
For example: Sketch > Layer > Convert to outlines