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(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.
If some font glyphs aren't converted properly you should append the normalize:true
option and a fontHeight
greater than 1000 (fontHeight: 1001
)
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.
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(codepoints, options) {
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".
- Download the zipped repo and extract it.
- Go to the directory.
$ cd path/to/dir
- Install some tools.
$ npm install
- Create fonts and CSS
$ gulp symbols
Feel free to push your code if you agree with publishing under the MIT license.