Simple utilities for icon-font generation, automation and presentation. Includes preview web server.

---

Features

• Formatting of svg icons. The contour will be adjusted to the size of 512px and placed in the center.
• Tune icon size and position if necessary.
• Optimization. Extra points that do not affect the contour curves will be removed.
• Configuration support as in package.json, and in a separate file. It can also be transmitted via the command line interface.
• The input file format is svg.
• The output file format is TTF, EOT, SVG, WOFF, WOFF2
• A web server to demonstrate the result. The server will watch the changes in the input files and instantly display the result.

---

Usage

Install:

npm install --save-dev @itsib/icon-font

Or global installation:

npm install -g @itsib/icon-font

Show help:

icon-font --help

Run demo server:

icon-font demo --input icons/dir

Generate fonts files:

icon-font generate --input icons/dir --output fonts/dir

Configuration

You need to create an icon-font.json file with json format in the root of your project. Or add field icon-font in package.json file.

{
  "input": "svg-icons",
  "output": "dist/fonts",
  "name": "IconFont",
  "prefix": "icon",
  "types": [ "woff2", "woff", "ttf", "eot"],
  "port": 9000,
  "fontUrl": "./",
  "fontUrlHash": false,
  "iconsTune": {}
}

Options description

Configuration parameters passed through the CLI have a higher priority than the configuration file.

Option	Type	Required	Description
input	string	✔	The directory containing the SVG icon files that will be included in the font being created
output	string	✔	The directory where the generated files will be placed, if it does not exist, it will be created.
name	string		The name of the new font, by default IconFont
prefix	string		Class name prefix. Default icon
types	string[]		Output font types, to be generated. Default: [ "woff2", "woff", "ttf", "eot"]
port	number		Demo server port. Default 9000 (http://localhost:9000).
fontUrl	string		The URL where the font files will be available. Used in the css file @font-fase. Default /
fontUrlHash	string | false | "random"		Adds the GET parameter 'hash=${HASH}' at the end of the URL to reset the browser cache. Set to 'random' for random number. Or use yur own value. False is disabled.
iconsTune	{[name: string]: IconTune}		Adjust the positioning and size for each icon. See below. Default {}

Icons Tune

The icon is sized and aligned automatically. But you can also configure each individual icon. To do this, use the iconsTune field, which contains an object whose keys are the names of icon files without an extension. For example:

{
  "iconsTune": {
    "helicopter": {
      "x": 0.2,
      "y": -0.5,
      "size": 1.5
    }
  }
}

This means that the icon with the file name helicopter.svg will be shifted to the right by 20%, down by 50%, and enlarged by one and a half times.

Do not forget that for screens, the Y-axis begins (point 0) at the top, but in the OpenType and TrueType specifications, Y has a beginning at the bottom.

Option	Type	Description
x	number	The x-axis displacement of the icon. In basis point (percent / 100)
y	number	The y-axis displacement of the icon. In basis point (percent / 100)
size	number | 'cover' | 'contain'	Tune the icon size. If a number is passed, the size will be multiplied by it. For example, the icon is 300x500, size = 1.2, then the result will be 360x600. If cover is passed, the icon will fill the entire 512x512 square. If contain is passed, the icon will be inscribed in a 512x512 square. This is default behavior.

References

• ots-sanitize - is a program which validates and/or transcodes a font file using the OTS library. Installation:

  sudo apt install opentype-sanitizer

  Usage:

  ots-sanitize dist/fonts/icon-font.ttf

• ttfdump - dumps the contents of a TrueType font file in ASCII form. A TrueType font file is consist of various tables. Installation:

  sudo apt install texlive-binaries

  Usage

  ttfdump -t head dist/fonts/icon-font.ttf
  ttfdump -t OS/2 dist/fonts/icon-font.ttf

• TrueFont spec - documentation for the TrueFont tables.