2.1.0 • Published 5 years ago

icon-builder v2.1.0

Weekly downloads
34
License
MIT
Repository
github
Last release
5 years ago

icon-builder

CircleCI David npm

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

optiontypedefaultdescription
srcstringRequired
outstring / falsefalse
fontNamestring'iconfont'
classPrefixstring'icon-'
hashbooleantrueUse hash
typesarray['svg', 'ttf', 'eot', 'woff', 'woff2']Font types
startCodepointnumber0xf101
codepointsobject{}Unicode start
normalizebooleantrue
centerHorizontallybooleantrue
cssobjectCSS config
htmlobjectHTML 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