Generate (S)CSS file for icon font created with Gulp
Recent versions of gulp-iconfont emit a glyphs
(or codepoints
< 4.0.0) event (see docs) which should likely be used instead of the workflow described below. However, it will continue to work as expected.
The future of this plugin will be discussed in backflip#9.
First, install gulp-iconfont
and gulp-iconfont-css
as development dependencies:
npm install --save-dev gulp-iconfont gulp-iconfont-css
Then, add it to your gulpfile.js
. Important: gulp-iconfont-css
has to be inserted before piping the files through gulp-iconfont
.
var iconfont = require('gulp-iconfont');
var iconfontCss = require('gulp-iconfont-css');
var fontName = 'Icons';
gulp.task('iconfont', function(){
gulp.src(['app/assets/icons/*.svg'])
.pipe(iconfontCss({
fontName: fontName,
path: 'app/assets/css/templates/_icons.scss',
targetPath: '../../css/_icons.scss',
fontPath: '../../fonts/icons/'
}))
.pipe(iconfont({
fontName: fontName
}))
.pipe(gulp.dest('app/assets/fonts/icons/'));
});
gulp-iconfont-css
works well with gulp-iconfont
but you can use it in a more modular fashion by directly using gulp-svgicons2svgfont
, gulp-svg2tff
, gulp-ttf2eot
, gulp-ttf2woff
and/or gulp-ttf2woff2
.
Type: String
The name of the generated font family (required). Important: Has to be identical to iconfont's fontName
option.
Type: String
The template path (optional, defaults to css
template provided with plugin).If set to 'scss'
or 'less'
, the corresponding default template will be used. See templates
Type: String
The path where the (S)CSS file should be saved, relative to the path used in gulp.dest()
(optional, defaults to _icons.css
). Depennding on the path, it might be necessary to set the base
option, see backflip#16.
Type: String
Directory of font files relative to generated (S)CSS file (optional, defaults to ./
).
Type: String
Name of the generated CSS class/placeholder. Used for mixins and functions, too. See https://github.com/backflip/gulp-iconfont-css/tree/master/templates. Default is icon
.
Type: String
The template engine to use (optional, defaults to lodash
).
See https://github.com/visionmedia/consolidate.js/ for available engines. The engine has to be installed before using.