@itsib/icon-font NPM

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.