Iconism

A modern font and customizable asset generator in various formats by searching, optimizing and finally merging svg icon files from multiple directories or a configuration file that contains required properties.

Available Font Types: svg, ttf, woff, woff2, eot.

Available Assets: html, css, scss, sass, json, svg sprite

Install

npm install -g iconism

Usage

In Scripts

const iconism = require('iconism');

iconism({
        name: 'myicons',
       input: 'src/icons/svg',
      output: 'src/icons/dist',
       types: ['eot', 'ttf', 'woff', 'woff2', 'svg'],
      assets: ['html', 'css'],
      height: 512,
     descent: 64,
    optimize: true,
});

// in an async function
const styler = async () => {
    await iconism({
        ...
    });
}

Command-line Interface

iconism --help

Usage: index [options]<input path...>

Convert svg icons to svg, ttf, woff, woff2 and eot font formats and generate web assets.

Options:
  -v, --version             output the current version
  -o, --output <value>      output directory
  -c, --config <value>      configuration file
  -f, --fontfamily <value>  font family  (default: iconfont)
  -i, --id <value>          font id      (default: fontfamily)
  -s, --style <value>       font style   (default: normal)
  -W, --weight <value>      font weight  (default: normal)
  -a, --ascent <int>        font ascent  (default: height - descent)
  -d, --descent <int>       font descent (default: 0)
  -h, --height <int>        font height  (default: maximum glyph height)
  -w, --width <int>         font width   (default: auto)
  -m, --metadata <value>    font metadata tag
  -r, --round <int>         svg path rounding (default: 1)
  -b, --begin <value>       start unicode codepoint (default:0xE000)
  -t, --types <value...>    font types (default: eot, woff2, woff)
  -A, --assets <value...>   assets (default: css, html)
  -H, --hash                css hash           (default: true)
  -T, --tag <value>         css tag            (default: null)
  -u, --url <value>         font directory url (default: true)
  -p, --prefix <value>      css prefix class   (default: i)
  -S, --selector <value>    css selector       (default: null)
  -O, --optimize            optimize svgs: svgo
  -D, --debug               output all information
  -e, --help                display help for command

API

iconism(options)

option name	type	default	description
input	string|array	* required	svg files directories, files or config
output	string	required	output directory
config	string	null	configuration file path
name	string	iconism	font family
id	string	option.name	font id
style	string	normal	font style
weight	integer|string	400	font weight
height	integer	highest glyphs height	font height
width	integer	auto	font width
ascent	integer	height - descent	font ascent
descent	integer	0	font descent
metadata	string	null	font metadata / copyright
round	integer	1	svg path rounding (0-99)
begin	integer	0xE000	first glyph unicode
types	array	['woff','ttf','svg']	font types to be generated
assets	array	['html','css']	web assets to be generated
hash	bool	false	css & font hash for cache
tag	string	null	css tag
url	string	null	font directory path in css file
prefix	string	i	css class prefix
selector	string	null	css selector
optimize	bool	true	optimize svg files
svgo	object	null	svgo options
debug	function|bool	() => {}	output all logging info

All options are available except custom templates for web assets, font and asset filenames. Configuration file "-c" option will help you provide such a file path to meet your needs.

Input Option Examples

Directory

input: '../icons',...

Directories and files

input: ['../icons', '../svg/icons', 'angle-down.svg', 'add.svg'],...

Path to svg icons configuration file

input: '../icons/glyphs.json',...

Configuration

input: [
        {
            "name": "angle-down",
            "unicode": "\uE100",
            "path": "../icons/angle-down.svg"
        },
        {
            "name": "angle-down-circle",
            "unicode": "\uE101",
            "path": "../icons/angle-down-circle.svg"
        }
	...
 ]

Configuration with all properties

input: [
        {
               "name": "plus",
            "unicode": "\uE100",
            	  "d": "M7,9H4V7H7V4H9V7h3V9H9v3H7Z",
              "width": 512,
             "height": 512,
             viewPort: "0 0 512 512"
        },
	...
]

All options separate configuration file example

module.exports = {
    templates: {
        sprite: "src/my-templates/sprite.ejs"
    },
    font: {
        names: {
            svg: "%name%-svg",
            eot: "ie%name%",
        },
        exports: ["woff2", "woff", "ttf"]
    },
    asset: {
        names: {
            sprite: "%name%-sprite"
        },
        exports: ["sass", "scss", "sprite"]
    },
    svgo: {
        plugins: [
            {name: 'mergePaths', params: {force: false}},
            {name: 'convertShapeToPath', params: {convertArcs: false}},
        ]
    }
};

Contributing

All contributions are welcome.

Troubleshooting

When you encounter a problem, please open an issue. I would be glad to help you to find a solution if possible.

Author

Orçun Saltık. Github: @orcunsaltik

License

See the LICENSE file for license rights and limitations (MIT).