zoukankan      html  css  js  c++  java
  • 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字体图标,支持热更新。

    使用这个插件后,开发时在src/iconfont/svgs目录下,修改或添加、删除svg文件时,就可以自动生成字体图标(支持ttf,woff2,woff,eot,svg)及配套从css样式、html预览了;同时热更新立即可以看到效果。

    Byebye了我滴icomoon们!

    源码在这:https://github.com/hzsrc/webpack-iconfont-plugin-nodejs

    感兴趣的小伙伴可以试试~

    下载源码安装后直接跑npm run dev就可看效果了

  • 相关阅读:
    C#操作Redis Set 无序集合
    C#操作Redis Hash数据表
    C#操作Redis List 列表
    C#操作Redis String字符串
    Redis 小结
    建造者模式
    外观模式
    模板方法模式
    原型模式
    select ie6 的bug 层级
  • 原文地址:https://www.cnblogs.com/hz-blog/p/webpack_svg_to_iconfont_nodejs_hot_reload.html
Copyright © 2011-2022 走看看