Plugins Required

• Gulp
• Gulp-Sass

  We'll need this to compile our generated SCSS file into CSS we can use to display the icons.

• Gulp-Imagemin

  This is for compressing before creating the actual font. That way we can get rid of all the extra fluff from exported SVGs. Plus, you can't always count on an asset being optimized before its sent to you.

• Gulp-Iconfont

  The main plugin that will generate the font.

• Gulp-Iconfontcss

  This is an add-on to `gulp-iconfont`. It allows you to create a template that will generate a custom `SCSS` file. In case you need that extra control.

  You might not need this if you're just going to use the generated partial, like we are in this case. But we'll be doing more advanced stuff in the future.

If you just want to generate a font this basic task will get you up & running:

Pay close attention to the paths, some are relative to the project directory and others like `targetPath` are relative to the generated font directory.

My setup is like this:

  myThemeDirectory
      css (will be generated)
      fonts (will be generated)
      images
          svg (icons to be generated into font)
      js
      scss
          base
          components
          global
          layout
          styles.scss

  var fontName = 'demo-icons';
 
  gulp.task('iconfont', function() {
    gulp.src(['./images/svg/*.svg'])
      .pipe(iconfontCSS({
        fontName: fontName,
        targetPath: '../scss/global/_icons.scss',
        fontPath: '../fonts/'
      }))
      .pipe(iconfont({
        fontName: fontName,
        // Remove woff2 if you get an ext error on compile
        formats: ['svg', 'ttf', 'eot', 'woff', 'woff2'],
        normalize: true,
        fontHeight: 1001
      }))
      .pipe(gulp.dest('./fonts/'))
  });
 
  gulp.task('icons', ['iconfont', 'scss']);

The plugin itself has several options. I like to normalize and set a height to try to get the most consistent icon rendering. I've noticed issues with some imported SVGs that show up so small you can barely see them. That's where `fontHeight` and `normalize` come in.

You'll need to create a task to compile the SCSS as well. Otherwise you'll refresh until your mouse breaks and you won't see the updated font. The task is a simple one:

  gulp.task('scss', function(){
    gulp.src('scss/**/*.scss')
      .pipe(sass())
      .pipe(autoprefixer()) // Requires the gulp-autoprefixer plugin
      .pipe(gulp.dest('css/'))
      .pipe(notify({ message: 'SCSS task complete' })) // Requires gulp-notify
  });

Then you just need to create the task to create the font and regenerate the styles.

  gulp.task('icons', ['iconfont', 'scss']);

And you can call it using `gulp icons`. That's it.

Related Links

Seriously Don't Use Icon Fonts
Seriously, Use Icon Fonts

These are two very good articles explaining why you should and shouldn't use icon fonts. They both make very good points and I wouldn't consider either one wrong. It's all down to what your project needs.