Build IcoMoon project in Node.
We use IcoMoon with customized SCSS stylesheets in our project, it's annoying to copy new icon declarations from IcoMoon-generated stylesheet to our SCSS stylesheet every time I need to add new icons. So I created this package to make the process a little easier.
Simply install using npm:
npm install icomoon-build
First, create a project on IcoMoon, and save the project file locally (Menu -> Manage Projects -> Download).
Then run the script like this:
node_modules/.bin/icomoon-build -p path/to/your/project.json --scss path/to/output.scss --fonts path/to/fonts/
# Or if icomoon-build is installed globally:
icomoon-build -p path/to/your/project.json --scss path/to/output.scss --fonts path/to/fonts/
As of version 0.1.0, LESS stylesheet can also be generated. Simply change --scss
to --less
to specify LESS output.
SCSS/LESS output is supposed to be imported to another SCSS/LESS file, it only contains individual icon definitions. Here is an example of generated SCSS file:
// Script-generated file, do not modify by hand
$icon-export-content: "\e600";
@mixin icon-classes {
.icon-export:before { content: $icon-export-content; }
}
You can use the file like this:
@font-face {
font-family: "icons";
src: url("../fonts/icons.eot");
src: url("../fonts/icons.eot?#iefix") format("embedded-opentype"),
url("../fonts/icons.woff") format("woff"),
url("../fonts/icons.ttf") format("truetype"),
url("../fonts/icons.svg#icons") format("svg");
font-weight: normal;
font-style: normal;
}
.icon:before {
display: inline-block;
position: relative;
font-family: "icons";
font-style: normal;
font-weight: normal;
speak: none;
text-decoration: inherit;
line-height: 99%;
text-align: center;
vertical-align: baseline;
// better font rendering
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@import "path/to/generated.scss";
@include icon-classes;
QUOTA_EXCEEDED_ERR