JSPM – fantasticon@1.0.11

Package Exports

fantasticon

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (fantasticon) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Fantasticon

Screenshot

Easy-to-use, pre-configured cli tool to generate web-font icon kits from .svg files

Intro

Icon-font generation, easy to use and highly configurable.

It also generates TypeScript types, JSON maps of the generated code-points, allowing for a great deal of different usages, e.g. integrating with React type-safe icon components or integration on mobile apps by just combining TTF and JSON generation.

Install

npm install -g fantasticon

Use

Quick usage

fantasticon my-icons/*.svg -o icon-dist

Command-line

Usage: fantasticon [options] [input-dir]

Options:
  -V, --version                output the version number
  -c, --config <value>         custom config path (default: .fantasticonrc | fantasticonrc | .fantasticonrc.json | fantasticonrc.json | .fantasticonrc.js | fantasticonrc.js)
  -o, --output <value>         specify output directory
  -t, --font-types <value...>  specify font formats to generate (default: eot, woff2, woff, available: eot, woff2, woff, ttf, svg)
  -g --asset-types <value...>  specify other asset types to generate (default: css, html, json, ts, available: css, html, json, ts)
  -h, --font-height <value>    the output font height (icons will be scaled so the highest has this height) (default: 300)
  --descent <value>            the font descent
  -n, --normalize              normalize icons by scaling them to the height of the highest icon
  -r, --round                  setup the SVG path rounding [10e12]
  --selector <value>           use a CSS selector instead of 'tag + prefix' (default: null)
  -t, --tag <value>            CSS base tag for icons (default: "i")
  -u, --fonts-url <value>      public url to the fonts directory (used in the generated CSS) (default: "icon")
  --debug                      display errors stack trace (default: false)
  --silent                     run with no logs (default: false)
  --help                       display help for command

Configuration file

Some options (specifically, formatOptions and pathOptions) cannot be passed to the cli directly.

To have more control and better readability, you can create a simple configuration file.

By default, fantasticon will look for one of following files in the working directory:

.fantasticonrc | fantasticonrc | .fantasticonrc.json | fantasticonrc.json | .fantasticonrc.js | fantasticonrc.js

You can specify a custom --config option with your configuration file path.

Here's an example .fantasticonrc.js:

module.exports = {
  inputDir: './icons',
  outputDir: './dist',
  fontTypes: ['ttf', 'woff', 'woff2'],
  assetTypes: ['ts', 'css', 'json', 'html'],
  fontsUrl: '/static/fonts',
  fontTypes: ['ttf'],
  formatOptions: {
    // Pass options directly to `svgicons2svgfont`
    svg: { metadata: { foo: 'bar' }, ascent: 0.5 },
    json: { indent: 2 }
  },
  pathOptions: {
    ts: './src/types/icon-types.ts',
    json: './misc/icon-codepoints.json'
  }
};

API

Simple usage

import { generateFonts } from 'fantasticon';

generateFonts().then('Done');

Options

import { generateFonts } from 'fantasticon';

// Default options
generateFonts({
  name: 'icons',
  fontTypes: [FontAssetType.EOT, FontAssetType.WOFF2, FontAssetType.WOFF],
  assetTypes: [
    OtherAssetType.CSS,
    OtherAssetType.HTML,
    OtherAssetType.JSON,
    OtherAssetType.TS
  ],
  formatOptions: {},
  pathOptions: {},
  codepoints: {},
  fontHeight: 300,
  round: undefined, // --
  descent: undefined, // Will use `svgicons2svgfont` defaults
  normalize: undefined, // --
  selector: null,
  tag: 'i',
  prefix: 'icon',
  fontsUrl: null
}).then(results => console.log(results));

fantasticon