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

```js 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.

<br>

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

• iconfontMaker.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: ```js {

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.

```js 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. ```js 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