iconfont example

.coffee

# generate iconfont from svgs
gulp.task 'common:iconfont', ->
    gulp.src config.paths.src.common.svg.icons.all
        .pipe g.iconfont
            fontName: "icons"
            appendCodepoints: true
            normalize: true
        .on 'codepoints', (codepoints) =>
            codepoints.forEach (glyph, idx, arr) ->
                arr[idx].codepoint = glyph.codepoint.toString(16)
            gulp.src config.paths.src.common.framework.icons.template.path
                .pipe g.consolidate 'lodash',
                    glyphs: codepoints
                    fontName: 'iconfont'
                    fontPath: config.paths.built.common.fonts.icons.path
                .pipe gulp.dest config.paths.src.common.framework.icons.path
        .pipe gulp.dest config.paths.built.common.fonts.icons.path

.js

gulp.task('common:iconfont', function() {
  return gulp.src(config.paths.src.common.svg.icons.all).pipe(g.iconfont({
    fontName: "icons",
    appendCodepoints: true,
    normalize: true
  })).on('codepoints', (function(_this) {
    return function(codepoints) {
      codepoints.forEach(function(glyph, idx, arr) {
        return arr[idx].codepoint = glyph.codepoint.toString(16);
      });
      return gulp.src(config.paths.src.common.framework.icons.template.path).pipe(g.consolidate('lodash', {
        glyphs: codepoints,
        fontName: 'iconfont',
        fontPath: config.paths.built.common.fonts.icons.path
      })).pipe(gulp.dest(config.paths.src.common.framework.icons.path));
    };
  })(this)).pipe(gulp.dest(config.paths.built.common.fonts.icons.path));
});

template.styl

<% _.each(glyphs, function(glyph) { 
        %>$i-<%= glyph.name %>= "\<%= glyph.codepoint %>"
<% }); %>

icon($icon)
    font-family "<%= fontName %>"
    -webkit-font-smoothing antialiased
    -moz-osx-font-smoothing grayscale
    font-style normal
    font-variant normal
    font-weight normal
    speak none
    text-decoration none
    text-transform none
    content $icon