svg 生成 css 阿里,svg图片生成iconfont

基本目录

gulp

-gulpfile.js

-package.json

src

font

-template.scss

svg

-bank-ABC.svg

依赖的包

点击直接查看api

模板css

点击可预览和下载的对应格式的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