Generate font with icons with Gulp

folder-structure.md

In this example folders shoulb be in this way

  gulpfile.js
  font-template.scss
  icons/
      ico-user.svg
      ico-save.svg
      ...
  fonts/
      myfont.eot
      myfont.woff
      myfont.ttf
      myfont.svg
  scss/
      icons-compiled.scss

font-template.scss

@font-face {
  font-family: "<%= fontName %>";
  src: url('<%= fontPath %><%= fontName %>.eot');
  src: url('<%= fontPath %><%= fontName %>.eot?#iefix') format("embedded-opentype"),
    url('<%= fontPath %><%= fontName %>.woff') format('woff'),
    url('<%= fontPath %><%= fontName %>.ttf') format('truetype'),
    url('<%= fontPath %><%= fontName %>.svg#<%= fontName %>') format('svg');
  font-weight: normal;
  font-style: normal;
}

.<%= className %>:before {
  display: inline-block;
  font-family: "<%= fontName %>";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.<%= className %>-lg {
  font-size: 1.3333333333333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}
.<%= className %>-2x { font-size: 2em; }
.<%= className %>-3x { font-size: 3em; }
.<%= className %>-4x { font-size: 4em; }
.<%= className %>-5x { font-size: 5em; }
.<%= className %>-fw {
  width: 1.2857142857142858em;
  text-align: center;
}

<% _.each(glyphs, function(glyph) { %>.<%= className %>-<%= glyph.name %>:before { content: "\<%= glyph.unicode[0].charCodeAt(0).toString(16).toUpperCase() %>" }
<% }); %>

gulpfile.js

var gulp = require('gulp');
var consolidate = require('gulp-consolidate');
var iconfont = require('gulp-iconfont');
var rename = require("gulp-rename");

var async = require('async');

var runTimestamp = Math.round(Date.now()/1000);


gulp.task('iconfont', function(done){
  var iconStream = gulp.src(['icons/*.svg'])
    .pipe(iconfont({
      fontName: 'myfont', // required
      // prependUnicode: true, // recommended option
      normalize:true, // recommended option
      fontHeight: 1001, // recommended option
      timestamp: runTimestamp, // recommended to get consistent builds when watching files
      formats: ['ttf', 'eot', 'woff','svg']
     }));

  async.parallel([
    function handleGlyphs (cb) {
      iconStream.on('glyphs', function(glyphs, options) {
        gulp.src('font-template.scss')
          .pipe(consolidate('lodash', {
            glyphs: glyphs,
            fontName: 'myfont', // name that font will get, used as file name and font face name
            fontPath: '../fonts/', // string used in font-template.scss to generate the right path
            className: 'ico' // prefix for font used in font-template.scss
          }))
          .pipe(rename('icons-compiled.scss')) // rename file in a convinient way
          .pipe(gulp.dest('scss/')) // move file in a specific folder
          .on('finish', cb);
      });
    },
    function handleFonts (cb) {
      iconStream
        .pipe(gulp.dest('fonts/')) // folder where store the font files (ttf, eot, woff, svg)
        .on('finish', cb);
    }
  ], done);
});