Create a dynamic icon font and associated stylesheet.

gulp-iconfont Configuration

/**
 * Custom icon font generation
 *
 * require gulp
 * require gulp-consolidate
 * require gulp-iconfont
 * require gulp-newer
 * require gulp-rename
 * require browser-sync (optional)
 *
 * var fontName: The name of the generated font. Used for filenames and in the lodash template to output CSS.
 * var assetPathSrc: The relative (to the gulpfile) path to the source directory for assets used to build font files.
 * var assetPathBuild: The relative (to the gulpfile) path to the build directory for generated files.
 */
var browserSync = require('browser-sync').create();
var consolidate = require('gulp-consolidate');
var gulp        = require('gulp');
var iconfont    = require('gulp-iconfont');
var newer       = require('gulp-newer');
var rename      = require('gulp-rename');

gulp.task('theme-iconfont', function () {
    var fontName = 'theme-icons';
    var assetPathSrc = 'assets/fonts/' + fontName + '/src/';
    var assetPathBuild = 'assets/fonts/' + fontName + '/build/';

    return gulp.src(assetPathSrc + '**/*.svg')
    .pipe(newer(assetPathBuild + 'theme-icons.css')) // This is not ideal.
    .pipe(iconfont({
        fontName: fontName,
        appendUnicode: true,
        formats: ['ttf', 'eot', 'woff', 'woff2'],
        normalize: true, // Prevent rendering problem
        fontHeight: 1001 // Prevent rendering problem
    }))
    .on('glyphs', function (glyphs, options) {
        var options = {
            glyphs: glyphs.map(function(glyph) {
            	// Map glyphs so they don't get renamed when adding or removing SVGs from src/.
                return { name: glyph.name, codepoint: glyph.unicode[0].charCodeAt(0) }
            }),
            fontName: fontName,
            fontPath: '',
            className: 'theme-icon'
        };
        gulp.src(assetPathSrc + fontName + '-template.css')
        	// Build a stylesheet based on a lodash template.
            .pipe(consolidate('lodash', options)) // Using lodash, create a stylesheet which contains a class for each glyph
            .pipe(rename({ basename:fontName })) // Rename output stylesheet to match `fontName`
            .pipe(gulp.dest(assetPathBuild)) // Output built stylesheet
        })
    .pipe(gulp.dest(assetPathBuild))
    .pipe(browserSync.stream())
});