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

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)

options

Type: object

Object with options. See the list of options.

done

Type: function(error, result)

List of options

files

required

Type: array.<string>/string/glob

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

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, fixedWidth, centerHorizontally, 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.

iconfontMaker({
  // 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.

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

svgo

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