@toolman/icon-builder v3.0.0

icon-builder

An icon builder forked from webfonts-generator.

• 🎉 Supports: svg, ttf, woff, woff2, eot
• 💥 Converts SVG icons to React components
• 🥊 Developed with TypeScript
• ✅ Passes all tests
• 👀 Generates a friendly preview in HTML

Install

$ yarn add icon-builder

Usage

import { toFonts } from 'icon-builder';

(async () => {
  const result = await toFonts({
    fontName: 'helloworld',
    src: 'icons/*.svg',
    out: 'icons-output',
  });
})();

Options

css / html config

{
  out: true, // string | boolean
  template: 'path/to/the/template.hbs',
  options: {},
}

out

• string: The output path of CSS/HTML file.
• true: The output path is the same as the fonts path (see out in Options).
• false: No emit CSS/HTML file.

By default, css.out is true, html.out is false.

template

Templates must be coded in Handlebars (.hbs) format. See templates folder as a reference.

This is optional.

options

This is any extra data passed to the Handlebars template set in template.

This is optional.

React components

import { toReact } from 'icon-builder';

(async () => {
  await toReact({
    src: 'icons/*.svg',
    out: 'icons-output',
  });
})();

Note

Before building the icon font, it is recommended to convert the SVG icons from stroke to fill.

For example: Sketch > Layer > Convert to outlines