gulp-iconfont

gulp-iconfont

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

You can test this library with the frontend generator.

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(){
  return gulp.src(['assets/icons/*.svg'])
    .pipe(iconfont({
      fontName: 'myfont', // required
      appendUnicode: true // recommended option
    }))
      .on('glyphs', function(glyphs, options) {
        // CSS templating, e.g.
        console.log(glyphs, 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.

If some font glyphs aren't converted properly you should append the normalize:true option and a fontHeight greater than 1000 (fontHeight: 1001).

Known issues

• WOFF2 font seems to cause issues on some setup (see https://github.com/nfroidure/gulp-iconfont/issues/64).

Make your CSS

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-css.

It's also easy to make a CSS template by yourself. Like this example, gulp-consolidate is useful to handling such a template. The template is outdated, change every occurrence of glyph.codepoint.toString(16).toUpperCase() to glyph.unicode[0].charCodeAt(0).toString(16).toUpperCase(), otherwise it will not work.

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

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

Issues

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 your issue to one of those projects: svg2ttf, ttf2eot, ttf2woff.

API

iconfont(options)

#### options.autohint Type: Boolean Default value: false

If ttfautohint is installed on your system, you may want to auto hint your fonts. Beware that this is an experimental and untested feature (beware to use at least the 0.93 version).

#### options.spawnWoff2 Type: Boolean Default value: false

You can use the woff2 binaries if you have the woff2_compress tool installed in your system and in your env path instead of the slower Node converter.

Note that i had to clone the project and you'll have to use this fork until it gets merged or it allows

#### options.svg Type: Boolean Default value: false

Since SVG fonts are deprecated in some browsers, they are disabled per default. You may want to continue generating them.

options.*

The svgicons2svgfont are available:

• options.fontName (required)
• options.fontWeight
• options.fontStyle
• options.fixedWidth
• options.centerHorizontally
• options.normalize
• options.fontHeight
• options.round
• options.descent
• options.metadata
• options.log

So are the gulp-svgicons2svgfont:

• options.startUnicode
• options.appendUnicode

And the gulp-svg2ttf:

• options.timestamp

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 your 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

Sketch

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

Contributing

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

Stats