gulp-svgicons2svgfont

Create a SVG font from several SVG icons

gulp-svgicons2svgfont

Create an SVG font from several SVG icons with Gulp.

You can test this library with the frontend generator.

Usage

First, install gulp-svgicons2svgfont as a development dependency:

npm install --save-dev gulp-svgicons2svgfont

Then, add it to your gulpfile.js:

var svgicons2svgfont = require('gulp-svgicons2svgfont');
 
gulp.task('Iconfont', function(){
  gulp.src(['assets/icons/*.svg'])
    .pipe(svgicons2svgfont({
      fontName: 'myfont'
     }))
    .on('codepoints', function(codepoints) {
      console.log(codepoints);
      // Here generate CSS/SCSS  for your codepoints ... 
    })
    .pipe(gulp.dest('www/font/'));
});

Every icon must be prefixed with it's codepoint. The appendCodepoints option allows to do it automatically. Then, in your own CSS, you just have to use the corresponding codepoint to display your icon. See this sample less mixin for a real world usage.

The plugin stream emits a codepoints event letting you do whatever you want with them.

Please report icons to font issues to the svgicons2svgfont repository on wich this plugin depends.