@vusion/webfonts-generator

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 @vusion/webfonts-generator

Usage

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!');
  }
})

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.
  It generates classes with names based on values from options.templateOptions.

• webfontsGenerator.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'); }
  

cssContext

Type: function
Default: options.function(ctx, options, handlebars) {}

Add parameters or helper to your template.

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.

htmlContext

Type: function
Default: options.function(ctx, options, handlebars) {}

Add parameters or helper to your template.

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.

ligature

Type: boolean
Default: true

Enable or disable ligature function.

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.