参考如下网站
https://github.com/hjzheng/CUF_meeting_knowledge_share/tree/master/2015-7-24/gulp-test-iconfont
gulpfile.js
var gulp = require('gulp'); var iconfont = require('gulp-iconfont'); var iconfontCss = require('gulp-iconfont-css'); var template = require('gulp-template'); var fs = require('fs'); var icons = fs.readdirSync('src/style/svg'); icons = icons.map(function(icon) { return icon.replace(/.w+$/, ''); }); var cssName = 'iconfont'; //生成的css名称 gulp.task('icon', function() { let dirname = 'src/style'; return gulp .src([`${dirname}/svg/*.svg`]) .pipe( iconfontCss({ fontName: 'iconfont', // iconfont.css的font-family值 path: `${dirname}/template/iconfont.template.less`, //css模版文件 targetPath: `../${cssName}.css`, //css生成文件 fontPath: 'fonts/' //iconfont.template.less文件中的fontPath }) ) .pipe( iconfont({ fontName: 'iconfont', formats: ['svg', 'ttf', 'eot', 'woff', 'woff2'], normalize: true }) ) .pipe(gulp.dest(`${dirname}/fonts`)); //svg的字体文件存放位置 }); gulp.task('example', function() { let dirname = 'src/style'; gulp.src(`${dirname}/example/index.html`) //样式例子文件 .pipe(template({ icons: icons, cssName: cssName })) .pipe(gulp.dest(`${dirname}`)); //样式例子文件存放位置 }); gulp.task('default', ['icon', 'example']);
iconfont-template.less
@font-face { font-family: "<%= fontName %>"; src: url('<%= fontPath %><%= fontName %>.eot'); src: url('<%= fontPath %><%= fontName %>.eot?#iefix') format('eot'), url('<%= fontPath %><%= fontName %>.woff') format('woff'), url('<%= fontPath %><%= fontName %>.ttf') format('truetype'), url('<%= fontPath %><%= fontName %>.svg#<%= fontName %>') format('svg'); font-weight: normal; font-style: normal; } .icon:before { font-family: "<%= fontName %>"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; /* speak: none; only necessary if not using the private unicode range (firstGlyph option) */ text-decoration: none; text-transform: none; } <% _.each(glyphs, function(glyph) { %> .icon-<%= glyph.fileName %>:before { /* content: "<%= JSON.stringify(glyph) %>";*/ content: "<%= glyph.codePoint %>"; } <% }); %>
example/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>icon font test</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="<%= cssName%>.css"> <style> .icon_lists li{ float:left; width: 120px; height:170px; text-align: center; list-style: none; } .icon_lists .icon{ font-size: 42px; margin: 10px 0; color:#333; -webkit-transition: font-size 0.25s ease-out 0s; -moz-transition: font-size 0.25s ease-out 0s; transition: font-size 0.25s ease-out 0s; } .icon_lists .icon:hover{ font-size: 120px; } .name { font-size: 16px; } .clear:after { content: '20'; display: block; height: 0; clear: both; } </style> </head> <body> <h2>Icon Font</h2> <ul class="icon_lists clear"> <% _.each(icons, function(icon) { %> <li class="icon icon-<%= icon %>"> <div class="name"><%= icon%></div> </li> <% }); %> </ul> <div> <h2>Use Icon Font</h2> <pre> <span class="icon icon-add"></span> </pre> </div> </body> </html>
执行语句
gulp icon
gulp example
与
gulp.task('example', function() {....
中的task值相同
gulpfile.js文件中增加
gulp.task('default', ['icon', 'example']);
就可以直接gulp生成font，css ，html
=====缺点
生成的font字体 1.只能是黑白色调， 2.svg图片中如果有线条重合，就会被重叠消除为白色【这个问题在icomoon网站中也存在】=====总结
https://icomoon.io/app/ 这个网站生成font字体，还是不错的
【第一种缺点是没有颜色】
第二种生成iconfont方式【可以有颜色】
gulpfile.js
var gulp = require('gulp'); var rename = require('gulp-rename'); var iconfont = require('gulp-iconfont'); var consolidate = require('gulp-consolidate'); var template = require('gulp-template'); var fs = require('fs'); var icons = fs.readdirSync('src/style/svg'); icons = icons.map(function(icon) { return icon.replace(/.w+$/, ''); }); gulp.task('icon', function() { let dirname = 'src/style'; return gulp .src([`${dirname}/svg/*.svg`]) .pipe( iconfont({ fontName: 'iconfont1', formats: ['svg', 'ttf', 'eot', 'woff', 'woff2'], normalize: true, options: { fixedWidth: false, normalize: false, // fontHeight: 512, // descent: -32 }, // prependUnicode: true // 会修改掉svg的名字 }) ) .on('glyphs', function(glyphs, options) { gulp.src(`${dirname}/iconfont.template.1.less`) .pipe( consolidate('lodash', { glyphs: glyphs.map(function(glyph) { glyph.unicode = glyph.unicode[0] .charCodeAt(0) .toString(16) .toUpperCase(); // unicode是16进制的 return glyph; }), fontName: options.fontName, // glyphs: glyphs, fontPath: 'fonts/' }) ) .pipe(rename(`${options.fontName}.css`)) .pipe(gulp.dest(dirname)); }) .pipe(gulp.dest(`${dirname}/fonts`)); }); gulp.task('example', function() { let dirname = 'src/style'; gulp.src(`${dirname}/example/index.1.html`) .pipe(template({ icons: icons })) .pipe(gulp.dest(`${dirname}`)); }); gulp.task('default', ['icon', 'example']);
iconfont-template.less
中循环语句修改
<% _.each(glyphs, function(glyph) { %> .icon-<%= glyph.name %>:before { /* content: "<%= JSON.stringify(glyph) %>";*/ content: "<%= glyph.unicode %>"; <%= glyph.color?'color:'+glyph.color :null %> } <% }); %>