webpack自动用svg生成iconfont字体图标,支持热重载

49次阅读

共计 504 个字符,预计需要花费 2 分钟才能阅读完成。

之前生成 iconfont 字体图标,是用的 https://icomoon.io/app/ 或者是阿里的 https://www.iconfont.cn/,将 UI 给的 svg 图导入来生成。但是一直有个问题,假如需要再次加入几个图标时,又需要重新搞一遍,很麻烦。
而使用 svg-sprite-loader 的方式,也不是很方便,而且在 body 下插入一个超大的 svg 标签,影响性能不说,看着这么乱的代码真是挺难受。。而且有些 UI 库比使用字体图标会比较便利。另外字体文件特别是 woff 也比 svg 要小很多。
于是最近抽时间参考开源代码搞了个 webpack 插件,自动用 svg 生成 iconfont 字体图标,支持热更新。
使用这个插件后,开发时在 src/iconfont/svgs 目录下,修改或添加、删除 svg 文件时,就可以自动生成字体图标(支持 ttf,woff2,woff,eot,svg)及配套从 css 样式、html 预览了;同时热更新立即可以看到效果。
Byebye 了我滴 icomoon 们!
源码在这:https://github.com/hzsrc/webp…
感兴趣的小伙伴可以试试~
下载源码安装后直接跑 npm run dev 就可看效果了

正文完
 0