iconfont-maker
Generator of webfonts from SVG icons.
Features:
* Supported font formats: WOFF2, WOFF, EOT, TTF and SVG.
* Supported browsers: IE8+.
* Generates CSS files and HTML preview, allows to use custom templates.
Install
``
npm install --save-dev iconfont-maker
`
Usage
`
js
const iconfontMaker = require('iconfont-maker');
iconfontMaker({
files: [
'src/dropdown.svg',
'src/*.svg',
],
dest: 'dest/',
}, function(error) {
if (error) {
console.log('Fail!', error);
} else {
console.log('Done!');
}
})
`
iconfontMaker(options, done)
$3
Type: object
Object with options. See the list of options.
$3
Type: function(error, result)
List of options
$3
required
Type: array.
/string/glob
List of SVG files.
$3
required
Type: string
Directory for generated font files.
$3
Type: string
Default: 'iconfont'
Name of font and base name of font files.
$3
Type: boolean
Default: true
Whether to generate CSS file.
$3
Type: string
Default: path.join(options.dest, options.fontName + '.css')
Path for generated CSS file.
$3
Type: string
Default: path of default CSS template
Path of custom CSS template.
Generator uses handlebars templates.
Template receives options from options.templateOptions along with the following options:
* fontName
* src string – Value of the src property for @font-face.
* codepoints object – Codepoints of icons in hex format.
Paths of default templates are stored in the iconfontMaker.templates object.
* iconfontMaker.templates.css – Default CSS template path.
It generates classes with names based on values from options.templateOptions.
* iconfontMaker.templates.scss – Default SCSS template path.
It generates mixin webfont-icon to add icon styles.
It is safe to use multiple generated files with mixins together.
Example of use:
`
@import 'iconfont';
.icon { @include webfont-icon('icon'); }
`
$3
Type: string
Default: options.destCss
Fonts path used in CSS file.
$3
Type: boolean
Default: false
Whether to generate HTML preview.
$3
Type: string
Default: path.join(options.dest, options.fontName + '.html')
Path for generated HTML file.
$3
Type: string
Default: templates/html.hbs
HTML template path.
Generator uses handlebars templates.
Template receives options from options.templateOptions along with the following options:
* fontName
* styles string – Styles generated with default CSS template.
(cssFontsPath is chaged to relative path from htmlDest to dest)
* names array. – Names of icons.
$3
Type: object
Additional options for CSS & HTML templates, that extends default options.
Default options are:
`js
{
classPrefix: 'icon-',
baseSelector: '.icon'
}
`
$3
Type: array
Default: ['woff2', 'woff', 'eot']
Font file types to generate.
Possible values: svg, ttf, woff, woff2, eot.
$3
Type: array
Default: ['eot', 'woff2', 'woff', 'ttf', 'svg']
Order of src values in font-face in CSS file.
$3
Type: function(string) -> string
Default: basename of file
Function that takes path of file and return name of icon.
$3
Type: number
Default: 0xF101
Starting codepoint. Defaults to beginning of unicode private area.
$3
Type: object
Specific codepoints for certain icons.
Icons without codepoints will have codepoints incremented from startCodepoint skipping duplicates.
$3
Options that are passed directly to
svgicons2svgfont.
$3
Type: object
Specific per format arbitrary options to pass to the generator
format and matching generator:
- svg - svgicons2svgfont.
- ttf - svg2ttf.
- woff2 - ttf2woff2.
- woff - ttf2woff.
- eot - ttf2eot.
`js
iconfontMaker({
// options
formatOptions: {
// options to pass specifically to the ttf generator
ttf: {
ts: 1451512800000
}
}
}, function(error, result) {})
`
$3
Type: boolean
Default: true
It is possible to not create files and get generated fonts in object
to write them to files later.
Also results object will have function generateCss([urls])
where urls is an object with future fonts urls.
`js
iconfontMaker({
// options
writeFiles: false
}, function(error, result) {
// result.eot, result.ttf, etc - generated fonts
// result.generateCss(urls) - function to generate css
})
``
$3
Options for svgo
Related
- iconfont-maker-cli: CLI tool based on this maker
- iconfont-maker-desktop: Desktop version tool
Thanks
- webfonts-generator. Thanks @sunflowerdeath
License
MIT