webfont-generator-cli v1.0.9
webfont-generator-cli
Convenient CLI to generate webfonts and css helper classes from SVGs.
Uses fontello API.
Preview
Installation
Install with NPM
npm i webfont-generator-cli --save-dev
Remove
npm remove webfont-generator-cli
Usage
Generate the webfont and css files
- FROM: SVGs located in the
iconsfolder | Path can be changed with--iconsoption - TO:
webfont| Path can be changed with--outoption
npx webfont-generator
Help
Get a list of the available options
npx webfont-generator-cli --help
Icons
Set the path to the SVGs folder (DEFAULT icons)
npx webfont-generator-cli --icons path_to_your_svgs
Out
Set the path of the output directory containing the font and CSS files (DEFAULT webfont)
npx webfont-generator-cli --out path_to_the_output_folder
Use the webfont
There are two different ways to use it
Import the webfont directly in your CSS
The font can be found to the following format on the output directory (DEFAULT webfont) inside the font subdirectory.
- .eot
- .svg
- .ttf
- .woff
- .woff2
Import premade CSS file including a helper class for every icon
Premade CSS file can be found on the output directory (DEFAULT webfont) inside the css subdirectory.
webfont.css includes the required helpers class for all of your icons.
After importing the stylesheet, you can use the icon-{svg-file-name} class pattern to automatically render your icon inside a ::before pseudo-element
Styling
You can use the [class^="icon-"]:before, [class*=" icon-"]:before CSS selector to override any predefined styles as needed.
Example
npm i webfont-generator-cli --save-dev
my-icons
- close.svg
- profile.svg
index.htmlEvery SVG must have a viewBox attribute.
npx webfont-generator --icons my-icons --out my-webfont
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./my-webfont/css/webfont.css">
</head>
<body>
<i class="icon-profile"></i>
<i class="icon-close"></i>
</body>
</html>