gulp-iconfont

Create icon fonts from several SVG icons

gulp-iconfont

Create a SVG/TTF/EOT/WOFF font from several SVG icons with Gulp.

You can test this library with the frontend generator.

First, install gulp-iconfont as a development dependency:

npm install --save-dev gulp-iconfont

Then, add it to your gulpfile.js:

var iconfont = require('gulp-iconfont');
 
gulp.task('Iconfont', function(){
  gulp.src(['assets/icons/*.svg'])
    .pipe(iconfont({
      fontName: 'myfont', // required 
      appendCodepoints: true // recommended option 
    }))
      .on('codepoints', function(codepointsoptions) {
        // CSS templating, e.g. 
        console.log(codepoints, options);
      })
    .pipe(gulp.dest('www/fonts/'));
});

gulp-iconfont bundles several plugins to bring a simpler API (gulp-svgicons2svgfont, gulp-svg2tff, gulp-ttf2eot, gulp-ttf2woff) for more flexibility, feel free to use them separately.

To use this font in your CSS, you could add a mixin like in this real world example. You can also generate your CSS automatically with gulp-iconfont-scss.

It's also easy to make a CSS template by yourself. Like this example, gulp-consolidate is useful to handling such a template.

var gulp = require('gulp');
var iconfont = require('gulp-iconfont');
var consolidate = require('gulp-consolidate');
 
gulp.task('Iconfont', function(){
  gulp.src(['assets/icons/*.svg'])
    .pipe(iconfont({ fontName: 'myfont' }))
    .on('codepoints', function(codepointsoptions) {
      gulp.src('templates/myfont.css')
        .pipe(consolidate('lodash', {
          glyphs: codepoints,
          fontName: 'myfont',
          fontPath: '../fonts/',
          className: 's'
        }))
        .pipe(gulp.dest('www/css/'));
    })
    .pipe(gulp.dest('www/fonts/'));
});

You may also want to hint your TTF fonts, you can use gulp-spawn, gulp-filter and ttfautohint for that matter. First install ttfautohint (use at least the 0.93 version), then, in your gulpfile:

var ttfFilter = filter('*.ttf');
 
  gulp.src(['assets/icons/*.svg'])
  .pipe(iconfont(/* ... */))
  .pipe(ttfFilter)
  .pipe(spawn({
    cmd: '/bin/sh',
    args: [
      '-c',
      'cat | ttfautohint /dev/stdin /dev/stdout | cat'
    ]
  }))
  .pipe(ttfFilter.restore())
  .pipe(gulp.dest('www/fonts/'))

Add issues to the right repos:

  • the plugin doesn't work at all, submit your issue in this repo.
  • every fonts doens't display as expected: submit the issue to the svgicons2svgfont repository.
  • only some fonts are damaged? Please look at the font format the targeted browser actually use and then, submit you issue to one of those projects: svg2ttf, ttf2eot, ttf2woff.

The svgicons2svgfont are available:

  • options.fontName
  • options.fixedWidth
  • options.centerHorizontally
  • options.normalize
  • options.fontHeight
  • options.descent
  • options.log

So are the gulp-svgicons2svgfont:

  • options.appendCodepoints

Beware that your SVG icons must have a high enough height. 500 is a minimum. If you do not want to resize them, you can try to combine the fontHeight and the normalize option to get them in a correct size.

Degroup every shapes (Ctrl+Shift+G), convert to pathes (Ctrl+Maj+C) and merge them (Ctrl++). Then save you SVG, prefer 'simple SVG' file type.

Save your file as SVG with the following settings:

  • SVG Profiles: SVG 1.1
  • Fonts Type: SVG
  • Fonts Subsetting: None
  • Options Image Location: Embed
  • Advanced Options
    • CSS Properties: Presentation Attributes
    • Decimal Places: 1
    • Encoding: UTF-8
    • Output fewer elements: check

Leave the rest unchecked.

More in-depth information: http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html

Sketch is a relatively new drawing tool on Mac. With help of Sketch Tools and gulp-sketch, you can directly create fonts from your Sketch file. No need to export intermediate SVGs.

Here is a sample repo "Symbols for Sketch".

  1. Download the zipped repo and extract it.
  2. Go to the directory. $ cd path/to/dir
  3. Install some tools. $ npm install
  4. Create fonts and CSS $ gulp symbols

Feel free to push your code if you agree with publishing under the MIT license.