node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



A gulp-driven react/sass icon font generator.


$ npm install --save gulp-font-icons


Svg files

Provide at least 2 svg files named according to this pattern:




Gulp task

In your gulpfile, import the iconfont module and the necessary functions. The sass/js functions can be omitted.

import {config, generateIconJs, generateIconSass, generateFontCss} from 'gulp-font-icons';
import iconfont from 'gulp-iconfont';

Modify the config object if needed. You may not receive any errors or warnings if you point the script to non-existing paths, so make sure you set these right.

Object.assign(config, {
  'iconSrc' : './path/in/your/project/*.svg'

Register the task. Again, no need to use the sass/js functions if you don't need the respective implementation.

gulp.task('font-icons', function() {
  return gulp.src(config.iconSrc)
  .on('glyphs', function(glyphs, options) {
    generateIconSass(glyphs, options);
    generateIconJs(glyphs, options);

Run it.

$ gulp font-icons

It will use the svg files you provided to generate the fonts, css and sass/js files in the locations specified by the config object.

Displaying the icons

Import the generated css which contains the font-face declarations. You can now use the React component in your project (after you import it from the path it was generated in) like this:

<Icon kind="svgname" />

And the sass mixin like this:

@extend %icon_svgname