webpack自動用svg生成iconfont字體圖標，支持熱重載

以前生成iconfont字體圖標，是用的https://icomoon.io/app/ 或者是阿里的https://www.iconfont.cn/ ，將UI給的svg圖導入來生成。可是一直有個問題，假如須要再次加入幾個圖標時，又須要從新搞一遍，很麻煩。

而使用svg-sprite-loader的方式，也不是很方便，並且在body下插入一個超大的svg標籤，影響性能不說，看着這麼亂的代碼真是挺難受。。並且有些UI庫比使用字體圖標會比較便利。另外字體文件特別是woff也比svg要小不少。

因而最近抽時間參考開源代碼搞了個webpack插件，自動用svg生成iconfont字體圖標，支持熱更新。

插件源碼：webpack-iconfont-plugin-nodejs

執行如下命令，可直接查看插件效果：

git clone https://github.com/hzsrc/webpack-iconfont-plugin-nodejs.git
cd webpack-iconfont-plugin-nodejs
npm install
npm run dev

原理及用法

字體及css的生成流程：

熱重載（hot-reload）流程：

使用這個插件後，開發時在src/iconfont/svgs目錄下，修改或添加、刪除svg文件時，就能夠自動生成字體圖標（支持ttf,woff2,woff,eot,svg）及配套從css樣式、html預覽了；同時熱更新當即能夠看到效果。

只需一個配置文件，並以此加入到webpack的plugins便可：

const WebpackIconfontPluginNodejs = require('webpack-iconfont-plugin-nodejs');
const path = require('path');
var dir = 'src/iconfont'
module.exports = new WebpackIconfontPluginNodejs({
  fontName: 'my-icon',
  cssPrefix: 'fii',
  svgs: path.join(dir, 'svgs/*.svg'),
  template: path.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'],
})

Byebye了我滴icomoon們！

感興趣的小夥伴能夠試試~