Create icon fonts from several SVG icons
Create a SVG/TTF/EOT/WOFF font from several SVG icons with Gulp.
You can test this library with the frontend generator.
gulp-iconfont as a development dependency:
npm install --save-dev gulp-iconfont
Then, add it to your
var iconfont = require'gulp-iconfont';gulptask'Iconfont'gulpsrc'assets/icons/*.svg'pipeiconfontfontName: 'myfont' // requiredappendUnicode: true // recommended optionon'glyphs'// CSS templating, e.g.console.logglyphs options;pipegulpdest'www/fonts/';;
gulp-iconfont bundles several plugins to bring a simpler API
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
It's also easy to make a CSS template by yourself. Like
gulp-consolidate is useful to handling
such a template. The template is outdated, change every occurrence of
glyph.unicode.charCodeAt(0).toString(16).toUpperCase(), otherwise it will not work.
var gulp = require'gulp';var iconfont = require'gulp-iconfont';var consolidate = require'gulp-consolidate';gulptask'Iconfont'gulpsrc'assets/icons/*.svg'pipeiconfont fontName: 'myfont'on'glyphs'gulpsrc'templates/myfont.css'pipeconsolidate'lodash'glyphs: glyphsfontName: 'myfont'fontPath: '../fonts/'className: 's'pipegulpdest'www/css/';pipegulpdest'www/fonts/';;
Add issues to the right repos:
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).
Note that i had to clone the project and you'll have to use this fork until it gets merged or it allows
Since SVG fonts are deprecated in some browsers, they are disabled per default. You may want to continue generating them.
The svgicons2svgfont are available:
So are the gulp-svgicons2svgfont:
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
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 your SVG, prefer 'simple SVG' file type.
Save your file as SVG with the following settings:
Leave the rest unchecked.
More in-depth information: http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html
Here is a sample repo "Symbols for Sketch".
$ cd path/to/dir
$ npm install
$ gulp symbols
Feel free to push your code if you agree with publishing under the MIT license.