1. 程式人生 > >webpack自動用svg生成iconfont字型圖示,支援熱更新

webpack自動用svg生成iconfont字型圖示,支援熱更新

之前生成iconfont字型圖示,是用的https://icomoon.io/app/或者是阿里的https://www.iconfont.cn/,將UI給的svg圖匯入來生成。但是一直有個問題,假如需要再次加入幾個圖示時,又需要重新搞一遍,很麻煩。

而使用svg-sprite-loader的方式,也不是很方便,而且在body下插入一個超大的svg標籤,總覺得挺難受。。而且有些UI庫比使用字型圖示會比較便利。

 

於是最近抽時間搞了個webpack外掛,自動用svg生成iconfont字型圖示,支援熱更新。

使用這個外掛後,開發時在src/iconfont/svgs目錄下,修改或新增、刪除svg檔案時,就可以自動生成字型圖示(支援ttf,woff2,woff,eot,svg)及配套從css樣式、html預覽了;同時熱更新立即可以看到效果。

Byebye了我滴icomoon們!

 

原始碼在這:https://github.com/hzsrc/webpack-iconfont-plugin-nodejs

感興趣的小夥伴可以試試~

下載原始碼安裝後直接跑npm run dev就可看效果了