• Stars
    star
    925
  • Rank 49,378 (Top 1.0 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 4 years ago
  • Updated 5 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Icon font generation tool

Logo

Fantasticon

Screenshot

Easy-to-use, pre-configured CLI tool to generate web-font icon kits from SVG files

Test status Release status

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 -o icon-dist

Command-line

Note: Not all options can be specified through the command line - for formatOptions, pathOptions, getIconId and templates use a configuration file or the JavaScript API.

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
  -n, --name <value>           base name of the font set used both as default asset name (default: icons)
  -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, scss, sass, 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
  --normalize [bool]           normalize icons by scaling them to the height of the highest icon
  -r, --round [bool]           setup the SVG path rounding [10e12]
  --selector <value>           use a CSS selector instead of 'tag + prefix' (default: null)
  -p, --prefix <value>         CSS class prefix (default: icon)
  --tag <value>                CSS base tag for icons (default: i)
  -u, --fonts-url <value>      public URL to the fonts directory (used in the generated CSS)
  --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, pathOptions and getIconId) 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', // (required)
  outputDir: './dist', // (required)
  fontTypes: ['ttf', 'woff', 'woff2'],
  assetTypes: ['ts', 'css', 'json', 'html'],
  fontsUrl: '/static/fonts',
  formatOptions: {
    // Pass options directly to `svgicons2svgfont`
    woff: {
      // Woff Extended Metadata Block - see https://www.w3.org/TR/WOFF/#Metadata
      metadata: '...'
    },
    json: {
      // render the JSON human readable with two spaces indentation (default is none, so minified)
      indent: 2
    },
    ts: {
      // select what kind of types you want to generate (default `['enum', 'constant', 'literalId', 'literalKey']`)
      types: ['constant', 'literalId'],
      // render the types with `'` instead of `"` (default is `"`)
      singleQuotes: true,
      // customise names used for the generated types and constants
      enumName: 'MyIconType',
      constantName: 'MY_CODEPOINTS'
      // literalIdName: 'IconId',
      // literalKeyName: 'IconKey'
    }
  },
  // Use a custom Handlebars template
  templates: {
    css: './my-custom-tp.css.hbs'
  },
  pathOptions: {
    ts: './src/types/icon-types.ts',
    json: './misc/icon-codepoints.json'
  },
  codepoints: {
    'chevron-left': 57344, // decimal representation of 0xe000
    'chevron-right': 57345,
    'thumbs-up': 57358,
    'thumbs-down': 57359
  },
  // Customize generated icon IDs (unavailable with `.json` config file)
  getIconId: ({
    basename, // `string` - Example: 'foo';
    relativeDirPath, // `string` - Example: 'sub/dir/foo.svg'
    absoluteFilePath, // `string` - Example: '/var/icons/sub/dir/foo.svg'
    relativeFilePath, // `string` - Example: 'foo.svg'
    index // `number` - Example: `0`
  }) => [index, basename].join('_') // '0_foo'
};

API

Simple usage

import { generateFonts } from 'fantasticon';

generateFonts().then(results => console.log('Done', results));

Options

import { generateFonts } from 'fantasticon';

generateFonts({
  name: 'icons',
  fontTypes: [FontAssetType.EOT, FontAssetType.WOFF2, FontAssetType.WOFF],
  assetTypes: [
    OtherAssetType.CSS,
    OtherAssetType.HTML,
    OtherAssetType.JSON,
    OtherAssetType.TS
  ],
  formatOptions: { json: { indent: 2 } },
  templates: {},
  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));

Organising icons

Icon names and className will be generated from a slug of the relative path + basename of each .svg file found in the input directory.

This allows arranging your icons in namespaces, which can be useful if a project uses a large number of icons.

Considering the following ./icons input directory:

icons
├── logo.svg
├── social
│   ├── facebook.svg
│   └── twitter.svg
└── symbol
    └── chevron
        ├── left.svg
        └── right.svg

Running fantasticon ./icons -o dist will generate a font-set with the following Icon IDs / CSS selectors: And the generated icon IDs would be:

Icon ID CSS selector
social-facebook .icon.icon-social-facebook
social-twitter .icon.icon-social-twitter
symbol-chevron-left .icon.icon-chevron-left
symbol-chevron-right .icon.icon-chevron-right

You can provide a getIconId function via the configuration file to customize how the icon IDs / CSS selectors are derived from the filepath. The function will receive relative paths to the icon and the input directory as arguments, and must return a unique string to be used as the ID.

Contribute

PRs are always welcome. If you need help questions, want to bounce ideas or just say hi, join the Discord channel.

License

Copyright (c) 2020 Tancredi Trugenberger. - Released under the MIT license

More Repositories

1

python-console-snake

Lightweight snake game running in the console
Python
315
star
2

nextatic

Static multi-language boilerplate with editable pages and navigation from the CMS using Netlify CMS + Next.js + SCSS + Typescript.
TypeScript
47
star
3

flickblaster-game

Objective-C
11
star
4

nodeconf-london-2016

NodeConf London 2016 Website
HTML
9
star
5

node-retina-downsizer

Small utility that automates the downsizing of retina assets
JavaScript
7
star
6

griddy

Grid system plugin for stylus
CSS
4
star
7

3d-scattered-plane-demo

A WebGL visualisation based on Three.js, purely for fun
JavaScript
3
star
8

LESS-typography-essentials

A small LESS file that sets up typography primitives.
3
star
9

lasercat-workshop-ui

Node-webkit based UI for lasercat-workshop
CSS
3
star
10

footballbot-workshop-ui

Node-Webkit UI for footballbot workshop
CSS
2
star
11

curriculum-vitae

YAML generated in PDF / HTML formats
CSS
2
star
12

grobot

A simple yet somewhat clever node.js Twitter bot based on [Twit](https://github.com/ttezel/twit) to automate or semi-automate your tweets through a simple client interface
JavaScript
2
star
13

hoganshare

A node utility module to share Hogan pre-compiled templates across server-side and client-side.
CoffeeScript
2
star
14

draw

App to learn programming using a basic CoffeeScript drawing API
CoffeeScript
2
star
15

dependants-parser

Parse dependants given a module, a root and an import syntax
JavaScript
2
star
16

nodebot-workshop-ui

Node-webkit based UI for nodebot-workshop
CSS
2
star
17

lxjs-2013-game.js-talk

LXJS 2013 talk slides
JavaScript
2
star
18

game-loop

JavaScript
1
star
19

less-mixins

My starting point for any LESS project
1
star
20

hr-hackathon-chilist-app

Barebone matching prototype for tech talent
CSS
1
star
21

3d-animated-primitives-fx-demo

Another little WebGL play
JavaScript
1
star
22

enot

Note storing app using Vue.js + Firebase + Stylus
CSS
1
star
23

medium

A little node.js module written in coffeescript that parses meta-data through http requests and Cheerio DOM manipulation
CoffeeScript
1
star