Generator of fonts from SVG icons.

Features:

• Supported font formats: WOFF2, WOFF, EOT, TTF and SVG.
• Support configuration Files - use a JavaScript, JSON or YAML file to specify configuration information for an entire directory and all of its subdirectories.
• Supported browsers: IE8+.
• Allows to use custom templates (example css, scss and etc).
• No extra dependencies as gulp, grunt or other big tools.
• Tested on all platforms (linux, windows and osx).
• CLI.
• Webpack plugin.

npm install --save-dev webfont

const webfont = require("webfont").default;

webfont({
  files: "src/svg-icons/**/*.svg",
  fontName: "my-font-name"
})
  .then(result => {
    console.log(result);

    return result;
  })
  .catch(error => {
    throw error;
  });

Or

import webfont from "webfont";

webfont({
  files: "src/svg-icons/**/*.svg",
  fontName: "my-font-name"
})
  .then(result => {
    console.log(result);

    return result;
  })
  .catch(error => {
    throw error;
  });

A file glob, or array of file globs. Ultimately passed to fast-glob to figure out what files you want to get.

node_modules and bower_components are always ignored.

A webfont configuration object.

Type: String Default: webfont

The font family name you want.

### formats

Type: Array Default value: ['svg', 'ttf', 'eot', 'woff', 'woff2'] Possible values: svg, ttf, eot, woff, woff2.

Font file types to generate.

Type: string Default: null

Possible values: css, scss (feel free to contribute). If you want to use custom template use this option. Example: template: path.resolve(__dirname, './my-template.css').

Type: string Default: null

Default font class name.

Type: string Default: ./

Path to generated fonts in the CSS file.

Type: string

Default value getting from fontName options, but you can specify any value.

Type: function Default: null

If you need transform glyph metadata (e.g. titles of CSS classes) before transferred in style template for your icons, you can use this option with glyphs metadata object.

Example:

import webfont from "webfont";

webfont({
  files: "src/svg-icons/**/*.svg",
  glyphTransformFn: obj => {
    obj.name += "_transform";

    return obj;
  }
})
  .then(result => {
    console.log(result);

    return result;
  })
  .catch(error => {
    throw error;
  });

Type: bool Default: true

Default the icons are sorted by name, do not sort by setting this to false

Options that are passed directly to svgicons2svgfont. Option fontName for svgicons2svgfont taken from above fontName argument.

The interface for command-line usage is fairly simplistic at this stage, as seen in the following usage section.

webfont --help prints the CLI documentation.

The CLI can exit the process with the following exit codes:

• 0: All ok.
• 1: Something unknown went wrong.
• Other: related to using packages.

• Webpack plugin - webpack plugin.
• svgicons2svgfont - Simple tool to merge multiple icons to an SVG font.
• svg2ttf - Converts SVG fonts to TTF format.
• ttf2eot - Converts TTF fonts to EOT format.
• ttf2woff - Converts TTF fonts to WOFF format.
• wawoff2 - Converts TTF fonts to WOFF2 and versa vice.

• The ability to generate from any type to any type.
• More tests, include CLI test.
• Improved docs.
• Reduce package size (maybe implement ttf2woff2 with native js library).
• Improve performance (maybe use cache for this).

Feel free to push your code if you agree with publishing under the MIT license.