svg图片生成iconfont

基本目录

 gulp
    -gulpfile.js
    -package.json
 src
    font
      -template.scss
    svg
      -bank-ABC.svg

依赖的包

点击直接查看api

gulp-iconfont
gulp-iconfont-css

模板css

点击可预览和下载的对应格式的css模板

template.css

var    iconfont = require('gulp-iconfont'),
          iconfontCss = require('gulp-iconfont-css');
gulp.task('h5-svg-build', function () {
    let svg ='../src/svg/*.svg';
    let fontName = 'iconfont';
    gulp.src(svg)
            .pipe(iconfontCss({
                   fontName: fontName,
                   path: '../src/font/template.scss', //模板信息的路径
                   targetPath: 'font.scss', //生成的css样式的路径
                   fontPath: '../src/font/' //生成的iconfont的路径
            }))
            .pipe(iconfont({
                   fontName: fontName, // required
                    prependUnicode: true, // recommended option
                    formats: ['ttf', 'eot', 'woff', 'svg'], // default, 'woff2' and 'svg' are available
                    timestamp: new Date().getTime()
           }))
            .pipe(gulp.dest('../src/font'));
});

最终生成的目录

 gulp
    -gulpfile.js
    -package.json
 src
    font
      -font.scss
      -iconfont.eot
      -iconfont.svg
      -iconfont.ttf
      -iconfont.woff
      -template.scss
    svg
      -bank-ABC.svg