Web图标工程化方案，前端开发汇总

复制代码

工程化方式

依赖网站生成字体文件，在替换或加图标后需要重新覆盖项目中的图标css代码，不够自动化。可以使用工具脚本在本地项目中将SVG文件生成iconfont，更方便地管理项目图标。需要在项目中安装以下依赖库。

• gulp （自动化构建工具）

• gulp-iconfont （使用gulp将svg图标集合创建为 svg/ttf/eot/woff/woff2字体）

• gulp-iconfont-css （结合gulp-iconfont生成配套的css样式）

gulpfile

var gulp = require(‘gulp’);

var iconfont = require(‘gulp-iconfont’);

var iconfontCss = require(‘gulp-iconfont-css’);

/** 生成图标字体文件*/

gulp.task(‘Iconfont’, function() {

return gulp

.src([‘…/src/icons/svg/*.svg’])

.pipe(

iconfontCss({

fontName: ‘spicons’, //字体名

path: ‘…/src/icons/templates/iconFont.less’, //模板文件路径

targetPath: ‘…/spicons-icons.less’,//样式文件目标地址相对于dest目录

cssClass: ‘sp-icon’ //样式类名

})

)

.pipe(

iconfont({

fontName: ‘spicons’, // required

formats: [‘ttf’, ‘eot’, ‘woff’, ‘svg’]

})

)

.pipe(gulp.dest(‘…/src/styles/iconfont/fonts’));

});

gulp.task(‘default’,gulp.series(‘Iconfont’));

复制代码

gulp-iconfont-css支持使用自定义的css模板，来组织生成的字体配套样式，以灵活的方式创建符合项目规范的样式命名，引用路径。

• less模板

@spicons-font-path: “./fonts”;

@font-face {

font-family: “&