Create a SVG/TTF/EOT/WOFF font from several SVG icons with Gulp.
You can test this library with the frontend generator before using her.
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 may also want to generate CSS automatically with
gulp-iconfont-scss
.
You may also want to hint your fonts, you can use Gulp spawn and ttfautohint for that matter.
Type: String
Default value: 'iconfont'
A string value that is used to name your font-family (required).
Type: Boolean
Default value: false
Creates a monospace font of the width of the largest input icon.
Type: Number
The ouputted font height (defaults to the height of the highest input icon).
Type: Number
Default value: 0
The font descent. It is usefull to fix the font baseline yourself.
The ascent formula is : ascent = fontHeight - descent.
Type: Boolean
Default value: false
Allow to append codepoints to icon files in order to always keep the same codepoints.
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