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.

Install

npm install --save-dev webfonts-generator

Usage

const webfontsGenerator = require('webfonts-generator');

webfontsGenerator({
  files: [
    'src/dropdown.svg',
    'src/close.svg',
  ],
  dest: 'dest/',
}, function(error) {
  if (error) {
    console.log('Fail!', error);
  } else {
    console.log('Done!');
  }
})

webfontsGenerator(options, done)

options

Type: object
Object with options. See the list of options.

done

Type: function(error, result)

List of options

files

required
Type: array.<string>|array.<readStream>
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 the src 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.

<br>
It generates classes with names based on values from `options.templateOptions`.

• webfontsGenerator.templates.scss – Default SCSS template path.

<br>
It generates mixin `webfont-icon` to add icon styles.
<br>
It is safe to use multiple generated files with mixins together.
<br>
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 from `htmlDest` to `dest`)

• 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', 'eot']
Font file types to generate. Possible values: svg, ttf, woff, woff2, eot.

order

Type: array<string>
Default: ['eot', '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.
• eot - ttf2eot.

webfontsGenerator({
  // options
  formatOptions: {
  	// options to pass specifically to the ttf generator
  	ttf: {
  		ts: 1451512800000
  	}
  }
}, function(error, result) {})

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.

webfontsGenerator({
  // options
  writeFiles: false
}, function(error, result) {
  // result.eot, result.ttf, etc - generated fonts
  // result.generateCss(urls) - function to generate css
})

License

Public domain, see the LICENCE file.