This is a clone of sunflowerdeath/webfonts-generator project.

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.

npm install --save-dev webfonts-generator
# or
yarn add --dev webfonts-generator

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

await webfontsGenerator({
  files: [
    'src/dropdown.svg',
    'src/close.svg',
  ],
  dest: 'dest/',
})

Type: object

Object with options. See the list of options.

required

Type: array.<string>

List of SVG files.

required

Type: string

Directory for generated font files.

Type: string
Default: 'iconfont'

Name of font and base name of font files.

Type: boolean
Default: true

Whether to generate CSS file.

Type: string
Default: path.join(options.dest, options.fontName + '.css')

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

Type: string
Default: options.destCss

Fonts path used in CSS file.

Type: boolean
Default: false

Whether to generate HTML preview.

Type: string
Default: path.join(options.dest, options.fontName + '.html')

Path for generated HTML file.

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.

Type: object

Additional options for CSS & HTML templates, that extends default options.

Default options are:

{
	classPrefix: 'icon-',
	baseSelector: '.icon'
}

Type: array<string>
Default: ['woff2', 'woff's]

Font file types to generate. Possible values: svg, ttf, woff, woff2.

Type: array<string>
Default: ['woff2', 'woff', 'ttf', 'svg']

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: 0xF101

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.

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.

const result = await webfontsGenerator({
  // options
  formatOptions: {
  	// options to pass specifically to the ttf generator
  	ttf: {
  		ts: 1451512800000
  	}
  }
})

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

Public domain, see the LICENCE file.