node-iconfont v1.0.2
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 tourl("./myfolder/webfont.eot")
- If
css_webfonts_relative_path = 'https://cdn.example.com/path/'
it will converted tourl("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.