@toolman/icon-builder

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

option	type	default	description
src	string		Required
out	string / false	false
fontName	string	'iconfont'
classPrefix	string	'icon-'
hash	boolean	true	Use hash
types	array	['svg', 'ttf', 'eot', 'woff', 'woff2']	Font types
startCodepoint	number	0xf101
codepoints	object	{}	Unicode start
normalize	boolean	true
centerHorizontally	boolean	true
css	object		CSS config
html	object		HTML config

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