生成iconfont字体图标，使用https://icomoon.io/app/或阿里的https://www.iconfont.cn/前，导入svg由UI给出的图像来生成它。但是一直有个问题。如果需要再添加几个图标，就得重新做，很麻烦。svg-sprite-loader的使用方式不是很方便，在body下面插入一个超大的svg标签也不会影响性能，但是看到这么乱的代码真的很难受。.而且一些UI库比使用字体图标更方便。另外，字体文件，尤其是woff，比svg小很多。所以最近抽空参考开源代码搭建了一个webpack插件，自动使用svg生成iconfont字体图标，支持热更新。插件源码：webpack-iconfont-plugin-nodejs执行如下命令直接查看插件效果：gitclonehttps://github.com/hzsrc/webpack-iconfont-plugin-nodejs.gitcdwebpack-iconfont-plugin-nodejsnpminstallnpmrundev原理及使用font和css生成过程：hot-reload过程：使用本插件后，开发时修改或增??删src/iconfont/svgs目录下的svg文件时可自动生成字体图标（支持ttf、woff2、woff、eot、svg）和匹配从css样式和html预览；同时，热更新后可以立即看到效果。只需一个配置文件，并将其添加到webpack的插件中：constWebpackIconfontPluginNodejs=require('webpack-iconfont-plugin-nodejs');constpath=require('路径');vardir='src/iconfont'module.exports=newWebpackIconfontPluginNodejs({fontName:'my-icon',cssPrefix:'fii',svgs:path.join(dir,'svgs/*.svg'),template:路径.join(dir,'css.njk'),fontsOutput:path.join(dir,'fonts/'),cssOutput:path.join(dir,'fonts/font.css'),htmlOutput:path.join(dir,'fonts/_font-preview.html'),jsOutput:path.join(dir,'fonts/fonts.js'),formats:['ttf','woff','svg'],})再见我的icomoons！有兴趣的朋友可以试试~
