gulp-iconfont

Create icon fonts from several SVG icons

npm install gulp-iconfont
35 downloads in the last day
147 downloads in the last week
549 downloads in the last month

gulp-iconfont

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

NPM version Build status Dependency Status devDependency Status Coverage Status Code Climate

You can test this library with the frontend generator before using her.

Stats

NPM NPM

Usage

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(codepoints, options) {
        // 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.

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/'))

API

iconfont(options)

options.fontName

Type: String Default value: 'iconfont'

A string value that is used to name your font-family (required).

options.fixedWidth

Type: Boolean Default value: false

Creates a monospace font of the width of the largest input icon.

options.fontHeight

Type: Number

The ouputted font height (defaults to the height of the highest input icon).

options.descent

Type: Number Default value: 0

The font descent. It is usefull to fix the font baseline yourself.

The ascent formula is : ascent = fontHeight - descent.

options.appendCodepoints

Type: Boolean Default value: false

Allow to append codepoints to icon files in order to always keep the same codepoints.

Preparing SVG's

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.

Inkscape

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.

Illustrator

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

npm loves you