Skip to content

orcunsaltik/iconism

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Build StatusDependency StatusdevDependencies StatusMaintainabilityNPM Versioncontributions welcomenode-current

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).