gulp-icomoon-builder

This module is used for automate Icomoon integration with your SCSS project.

Instalation

npm install gulp-icomoon-builder

Usage

You can use this module in two ways:

• Add icons to SCSS file as variables or variable maps
• Build SVG sprites and insert icon like this <svg><use xlink:href="#icon-my-awesome-icon"></use></svg>

SCSS way:

You can create gulp task and add it to watcher. Task example:

const icomoonBuilder = require('gulp-icomoon-builder');

gulp.task('build-fonts', () => {
  gulp.src('./path_to_font/icomoon/selection.json')
    .pipe(icomoonBuilder({
      templateType: 'map',
      extraIcons: {
        'custom-icon-1': '\f2b9',
        'custom-icon-2': '\f2ba',
      },
    }))
    .on('error', function (error) {
      console.log(error);
      // or if you use "gulp-notify"
      notify().write(error);
    })

    .pipe(gulp.dest('scss'))
    .on('error', function (error) {
      console.log(error)
      notify().write(error);
    });
});

SVG Sprite way:

Note: Parameter extraIcons not working for svg sprites

const icomoonBuilder = require('gulp-icomoon-builder');

gulp.task('build-svg-sprite', () => {
  gulp.src('./path_to_font/icomoon/selection.json')
    .pipe(icomoonBuilder({
      templateType: 'svg',
      filename: 'icons.svg',
    }))
    .on('error', function (error) {
      console.log(error);
      // or if you use "gulp-notify"
      notify().write(error);
    })

    .pipe(gulp.dest('icons'))
    .on('error', function (error) {
      console.log(error)
      notify().write(error);
    });
});

Options

Option | Type | Default | Description --- | --- | --- | --- templateType | string | map | Type of the template. Can be map, var or svg externalTemplare | string | none | Path to custom Mustache template. See /templates folder filename | string | _icons.scss | Name of your file. extraIcons | object | {} | Additional icons that aren't included in your Icomoon project