README

node-iconfont

A free icon webfont generator

Give svg icons and get - webfonts + css

Features:

Wide support for browsers
All webfont formats available WOFF2, WOFF, EOT, TTF, Webfont Svg
CLI (Command Line Interface)

Install

npm install -g node-iconfont

Or you can install with -D flag. Remember to add scripts in your package.json

Usage

Currently this project is purely CLI project .

To initiate

iconfont init

This will create a iconfont.config.js at the root of your project. You are recommended to change some important settings at first to run the next command. Then you have to import some SVG files located at that path declared in iconfont.config.js > PATH_iconFolder (described later). You can either import SVGs manullay or you can simply import some pre packed icons by a command.

To import some pre packed SVGs

iconfont import

Now you can build your final webfonts and css. But before building, you might want to configure some common settings. At least you want to change PATH_webfonts & PATH_css (both are described later). After everything set up in the config file, now you can run the next command.

To build your files

iconfont bulid

Config

Config file (iconfont.config.js) is created at the Root Folder of your project. All the default settings are given here.

module.exports = {

    font_name: 'webfont',
    webfont_formats: ['woff2', 'woff', 'eot', 'ttf', 'svg'],

    PATH_iconFolder: './iconfont-Icons/',
    PATH_webfonts: './iconfont-Build/',
    PATH_css: './iconfont-Build/iconfont.css',
    PATH_cheatSheet: './iconfont-Build/cheatSheet.html',

    css_webfonts_relative_path: './',

    css_minify: true,
    css_selector: {
        mode: 'class',
        modeSettings: {
            class: {
                classname: 'icon',
                prefix: 'icon-'
            },
            attr: {
                attrname: 'icon'
            }
        }
    },
    css_style_support: {
        spin: true,
        rotate: true,
        flip: true,
        ul_li: true,
        icon_size: true,
        fixed_width: true,
        border: true,
        pull: true,
        stack: true,
    },

    selected_icons: [],
}

Options

`font_name`

Type: {string}

Default: webfont

This is the font name of your webfonts.

`webfont_formats`

Type: {array}

Default: ['woff2', 'woff', 'eot', 'ttf', 'svg']

Possible values: woff2, woff, eot, ttf, svg

Note that: The values are in lowercase

Formats of webfonts you want to build. You are recommended to keep them unchanged for better browser support.

`PATH_iconFolder` (important)

Type: {path:folder}

Default: ./iconfont-Icons/

Path of a folder containing SVGs (from where the font glyphs will be made).

`PATH_webfonts` (important)

Type: {path:folder}

Default: /iconfont-Build/

Path of a the folder where webfonts will be saved after build.

`PATH_css` (important)

Type: {path:file} or {false}

Default: ./iconfont-Build/iconfont.css

File path of the css file. (which will be linked to your webpage).

Note: Make it false if you don't want css file to be built.

`PATH_cheatSheet`

Type: {path:file} or {false}

Default: ./iconfont-Build/cheatSheet.html

It's a HTML file showing icons and their names, abilities to copy them.

Note: Make it false if you don't want CheatSheet to be built.

`css_webfonts_relative_path` (important)

Type: {path to webfonts folder}

Default: ./ For better understand you may look at the below examples. This is the build css code. Where you can see url() which is pointed to the webfont files.

If css_webfonts_relative_path = './myfolder/' it will be converted to url("./myfolder/webfont.eot")
If css_webfonts_relative_path = 'https://cdn.example.com/path/' it will converted to url("https://cdn.example.com/path/webfont.eot")

Below example is for css_webfonts_relative_path = './myfolder/'

@font-face {
    font-family: 'webfont';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("./myfolder/webfont.eot");
    src: url("./myfolder/webfont.eot?#iefix") format("embedded-opentype"), 
         url("./myfolder/webfont.woff2") format("woff2"), 
         url("./myfolder/webfont.woff") format("woff"), 
         url("./myfolder/webfont.ttf") format("truetype"), 
         url("./myfolder/webfont.svg") format("svg");
}

`css_minify`

Type: {boolean}

Default: true

If you want final css file to be minified, keep it true.

`css_selector` > `mode`

Type: {string} (specific)

Default: class

Possible Values: class, attr or attribute

It's the way, how you prefer to use html for embading the icons. For better understand we will see below examples

If mode = 'class' your will have to use this template to embed

<span class="icon icon-heart"></span>

If mode = 'attr' your will have to select your font like this

<span icon="heart"></span>

`css_selector` > `modeSettings`

If css_selector > mode is class then only css_selector > modeSettings > class rules will be applied. In the same way if css_selector > mode is attr then only css_selector > modeSettings > attr rules will be applied. We will continue with examles

If mode = 'class' and settings as follows then html will be as follows

class: {
    classname: 'icon',
    prefix: 'ic-'
}

<span class="icon ic-heart"></span>
             ^^^^ ^^^

If mode = 'attr' and settings as follows then html will be as follows

attr: {
    attrname: 'icon'
}

<span icon="heart"></span>
      ^^^^

`css_style_support`

It's an object having some keys listed here spin, rotate, flip, ul_li, icon_size, fixed_width, border, pull, stack

Each of them are described below-

`css_style_support` > `spin`

Type: {boolean}

Default: true

For spin effect on your icon. Possible values are [blank], fast, slow

Normal Speed: 2 seconds per cycle
Fast Speed: 1 second per cycle
Slow Speed: 4 seconds per cycle

<!-- selector mode : class -->
<span class="icon icon-home icon-spin"></span>
<span class="icon icon-home icon-spin-fast"></span>
<span class="icon icon-home icon-spin-slow"></span>

<!-- selector mode : attr -->
<span icon="home" icon-spin></span>
<span icon="home" icon-spin="fast"></span>
<span icon="home" icon-spin="slow"></span>

`css_style_support` > `rotate`

Type: {boolean}

Default: true

Fixed rotation of the icon. possible values are 45, 90, 135, 180, 225, 270, 315

<!-- selector mode : class -->
<span class="icon icon-home icon-rotate-180"></span>

<!-- selector mode : attr -->
<span icon="home" icon-rotate="180"></span>

`css_style_support` > `flip`

Type: {boolean}

Default: true

To flip the icons. Possible values are x or horizontral, y or vertical, both

<!-- selector mode : class -->
<span class="icon icon-home icon-flip-vertical"></span>

<!-- selector mode : attr -->
<span icon="home" icon-flip="vertical"></span>

`css_style_support` > `ul_li`

Type: {boolean}

Default: true

Abilities to use icons as list item.

<!-- selector mode : class -->
<ul class="icon-ul">
    <li>
        <span class="icon-li"><i class="icon icon-heart"></i></span>
        An example text
    </li>
    <li>
        <span class="icon-li"><i class="icon icon-share"></i></span>
        An example text
    </li>
</ul>

<!-- selector mode : attr -->
<ul icon-ul>
    <li>
        <span icon-li><i icon="heart"></i></span>
        An example text
    </li>
    <li>
        <span icon-li><i icon="share"></i></span>
        An example text
    </li>
</ul>

`css_style_support` > `icon_size`

Type: {boolean}

Default: true

To change icon size. Possible values are lg, xs, sm & 2x to 10x

<!-- selector mode : class -->
<p>I <span class="icon icon-heart icon-lg"></span> my daddy</p>
<p>I <span class="icon icon-heart icon-3x"></span> my mom</p>

<!-- selector mode : attr -->
<p>I <span icon="heart" icon-lg></span> my daddy</p>
<p>I <span icon="heart" icon-3x></span> my mom</p>

`css_style_support` > `fixed_width`

Type: {boolean} Default: true

Use this if you want icons with fixed width

<!-- selector mode : class -->
<div>
    <div><span class="icon icon-heart icon-fw"></span>Example Text</div>
    <div><span class="icon icon-share icon-fw"></span>Example Text</div>
    <div><span class="icon icon-pen icon-fw"  ></span>Example Text</div>
</div>

<!-- selector mode : attr -->
<div>
    <div><span icon="heart" icon-fw></span>Example Text</div>
    <div><span icon="share" icon-fw></span>Example Text</div>
    <div><span icon="pen"   icon-fw></span>Example Text</div>
</div>

`css_style_support` > `border`

Type: {boolean}

Default: true

Ability to set a border to the icon

<!-- selector mode : class -->
<span class="icon icon-heart icon-border"></span>

<!-- selector mode : attr -->
<span icon="heart" icon-border></span>

`css_style_support` > `pull`

Type: {boolean}

Default: true

Pulling an icon to left or right. Possible values are left, right

<!-- selector mode : class -->
<div>
    <span class="icon icon-heart icon-pull-right"></span>
    Lorem ipsum dolor sit amet, consectetur adipiscing
    Phasellus vitae egestas tellus. Etiam tempor
    eleifend, a varius leo finibus. In hac habitasse
</div>

<!-- selector mode : attr -->
<div>
    <span icon="heart" icon-pull="right"></span>
    Lorem ipsum dolor sit amet, consectetur adipiscing
    Phasellus vitae egestas tellus. Etiam tempor
    eleifend, a varius leo finibus. In hac habitasse
</div>

`css_style_support` > `stack`

Type: {boolean}

Default: true

Ability to overlap two icons at the same position for a mix icon. Please follow the example for better understand

<!-- selector mode : class -->
<span class="icon icon-stack">
    <i class="icon icon-circle icon-stack-2x"></i>
    <i class="icon icon-heart icon-stack-1x icon-inverse"></i>
</span>

<!-- selector mode : attr -->
<span icon-stack>
    <i icon="circle" icon-stack="2x"></i>
    <i icon="heart" icon-stack="1x" icon-inverse></i>
</span>

Thanks to every authors of the Dependencies we are using, And special thanks to Font Awesome for the concepts.

node-iconfontdeprecated

Usage no npm install needed!

README

node-iconfont

Install

Usage

Config

Options

`font_name`

`webfont_formats`

`PATH_iconFolder` (important)

`PATH_webfonts` (important)

`PATH_css` (important)

`PATH_cheatSheet`

`css_webfonts_relative_path` (important)

`css_minify`

`css_selector` > `mode`

`css_selector` > `modeSettings`

`css_style_support`

`css_style_support` > `spin`

`css_style_support` > `rotate`

`css_style_support` > `flip`

`css_style_support` > `ul_li`

`css_style_support` > `icon_size`

`css_style_support` > `fixed_width`

`css_style_support` > `border`

`css_style_support` > `pull`

`css_style_support` > `stack`

Usage no npm install needed!

README

node-iconfont

Install

Usage

Config

Options

font_name

webfont_formats

PATH_iconFolder (important)

PATH_webfonts (important)

PATH_css (important)

PATH_cheatSheet

css_webfonts_relative_path (important)

css_minify

css_selector > mode

css_selector > modeSettings

css_style_support

css_style_support > spin

css_style_support > rotate

css_style_support > flip

css_style_support > ul_li

css_style_support > icon_size

css_style_support > fixed_width

css_style_support > border

css_style_support > pull

css_style_support > stack

`font_name`

`webfont_formats`

`PATH_iconFolder` (important)

`PATH_webfonts` (important)

`PATH_css` (important)

`PATH_cheatSheet`

`css_webfonts_relative_path` (important)

`css_minify`

`css_selector` > `mode`

`css_selector` > `modeSettings`

`css_style_support`

`css_style_support` > `spin`

`css_style_support` > `rotate`

`css_style_support` > `flip`

`css_style_support` > `ul_li`

`css_style_support` > `icon_size`

`css_style_support` > `fixed_width`

`css_style_support` > `border`

`css_style_support` > `pull`

`css_style_support` > `stack`