Generator of webfonts from svg icons
npm install @vusion/webfonts-generator
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.
``
npm install --save-dev @vusion/webfonts-generator
`js`
const webfontsGenerator = require('@vusion/webfonts-generator');
const file = fs.createReadStream('src/close.svg');
file.metadata = {
name: 'close',
}
webfontsGenerator({
files: [
'src/dropdown.svg',
file,
],
dest: 'dest/',
}, function(error) {
if (error) {
console.log('Fail!', error);
} else {
console.log('Done!');
}
})
Type: object
Object with options. See the list of options.
Type: function(error, result)
required
Type: array.
List of SVG files.
required
Type: string
Directory for generated font files.
Type: string
Default:
Name of font and base name of font files.
Type: boolean
Default:
Whether to generate CSS file.
Type: string
Default:
Path for generated CSS file.
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.object
* codepoints – Codepoints of icons in hex format.
Paths of default templates are stored in the webfontsGenerator.templates object.
* webfontsGenerator.templates.css – Default CSS template path.options.templateOptions
It generates classes with names based on values from .
* webfontsGenerator.templates.scss – Default SCSS template path.webfont-icon
It generates mixin 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'); }
Type: function
Default:
Add parameters or helper to your template.
Type: string
Default:
Fonts path used in CSS file.
Type: boolean
Default:
Whether to generate HTML preview.
Type: string
Default:
Path for generated HTML file.
Type: string
Default:
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)array.
* names – Names of icons.
Type: function
Default:
Add parameters or helper to your template.
Type: object
Additional options for CSS & HTML templates, that extends default options.
Default options are:
`js`
{
classPrefix: 'icon-',
baseSelector: '.icon'
}
Type: array
Default:
Font file types to generate.
Possible values: svg, ttf, woff, woff2, eot.
Type: array
Default:
Order of src values in font-face in CSS file.
Type: function(string) -> string
Default: basename of file
Function that takes path of file and return name of icon.
Type: number
Default:
Starting codepoint. Defaults to beginning of unicode private area.
Type: object
Specific codepoints for certain icons.
Icons without codepoints will have codepoints incremented from startCodepoint skipping duplicates.
Type: boolean
Default:
Enable or disable ligature function.
Options that are passed directly to
svgicons2svgfont.
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`
webfontsGenerator({
// options
formatOptions: {
// options to pass specifically to the ttf generator
ttf: {
ts: 1451512800000
}
}
}, function(error, result) {})
Type: boolean
Default:
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 is an object with future fonts urls.
`js`
webfontsGenerator({
// options
writeFiles: false
}, function(error, result) {
// result.eot, result.ttf, etc - generated fonts
// result.generateCss(urls) - function to generate css
})
Public domain, see the LICENCE` file.