@furkot/webfonts-generator
v2.0.2
Published
Generator of webfonts from svg icons
Downloads
1,013
Readme
This is a clone of sunflowerdeath/webfonts-generator project.
webfonts-generator
Generator of webfonts from SVG icons.
Features:
- Supported font formats: WOFF2, WOFF, TTF and SVG.
- Generates CSS files and HTML preview, allows to use custom templates.
Install
npm install --save-dev webfonts-generator
# or
yarn add --dev webfonts-generator
Usage
const webfontsGenerator = require('webfonts-generator');
await webfontsGenerator({
files: [
'src/dropdown.svg',
'src/close.svg',
],
dest: 'dest/',
})
webfontsGenerator(options)
options
Type: object
Object with options. See the list of options.
List of options
files
required
Type: array.<string>
List of SVG files.
dest
required
Type: string
Directory for generated font files.
fontName
Type: string
Default: 'iconfont'
Name of font and base name of font files.
css
Type: boolean
Default: true
Whether to generate CSS file.
cssDest
Type: string
Default: path.join(options.dest, options.fontName + '.css')
Path for generated CSS file.
cssTemplate
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 thesrc
property for@font-face
. - codepoints
object
– Codepoints of icons in hex format.
Paths of default templates are stored in the webfontsGenerator.templates
object.
webfontsGenerator.templates.css
– Default CSS template path. It generates classes with names based on values fromoptions.templateOptions
.webfontsGenerator.templates.scss
– Default SCSS template path. It generates mixinwebfont-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'); }
cssFontsPath
Type: string
Default: options.destCss
Fonts path used in CSS file.
html
Type: boolean
Default: false
Whether to generate HTML preview.
htmlDest
Type: string
Default: path.join(options.dest, options.fontName + '.html')
Path for generated HTML file.
htmlTemplate
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 fromhtmlDest
todest
) - names
array.<string>
– Names of icons.
templateOptions
Type: object
Additional options for CSS & HTML templates, that extends default options.
Default options are:
{
classPrefix: 'icon-',
baseSelector: '.icon'
}
types
Type: array<string>
Default: ['woff2', 'woff's]
Font file types to generate.
Possible values: svg, ttf, woff, woff2
.
order
Type: array<string>
Default: ['woff2', 'woff', 'ttf', 'svg']
Order of src
values in font-face
in CSS file.
rename
Type: function(string) -> string
Default: basename of file
Function that takes path of file and return name of icon.
startCodepoint
Type: number
Default: 0xF101
Starting codepoint. Defaults to beginning of unicode private area.
codepoints
Type: object
Specific codepoints for certain icons.
Icons without codepoints will have codepoints incremented from startCodepoint
skipping duplicates.
fontName, normalize, fontHeight, round, descent
Options that are passed directly to svgicons2svgfont.
formatOptions
Type: object
Specific per format arbitrary options to pass to the generator
format and matching generator:
svg
- svgicons2svgfont.ttf
- svg2ttf.woff2
- ttf2woff2.woff
- ttf2woff.
const result = await webfontsGenerator({
// options
formatOptions: {
// options to pass specifically to the ttf generator
ttf: {
ts: 1451512800000
}
}
})
writeFiles
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.
const result = await webfontsGenerator({
// options
writeFiles: false
});
// result.woff, result.ttf, etc - generated fonts
// result.generateCss(urls) - function to generate css
License
Public domain, see the LICENCE
file.