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

antz 发布于2019-08-23 14:14 / 789人阅读

摘要：之前生成字体图标，是用的或者是阿里的，将给的图导入来生成。而且有些库比使用字体图标会比较便利。于是最近抽时间参考开源代码搞了个插件，自动用生成字体图标，支持热更新。

之前生成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们！

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

云服务器 GPU云服务器 webpack热更新字体svg 字体图标图标字体

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100312.html

iconfont实践小结

摘要：所以实现小图标时雪碧图跟图标字体会在一个网站共存，自定义图标字体为什么比较耗时，且太复杂图标无法实现请往下看开发流程就了解了。参考资料细谈浅谈图标字体向下兼容优雅降级技术绘制小图标技巧雪碧图图标字体矢量小图标设计本文对应源码源码地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前写了一篇关于雪碧图的博文，...

bitkylin 2019-08-29 13:00 评论0 收藏0
webpack4初学习

webpack基于node，因此想要学习webpack首先要安装node。webpack4要安装node8.2以上版本。 1、安装webpack 为什么选择本地安装，主要是由于以后介绍热更新这一部分不会报错，如果全局安装热更新就会报错，以本部分为基础依次介绍，保证各部分不会出错。 mkdir webpack-test cd webpack-test npm init //初始化npm，都选择默认，...

Object 2019-08-23 14:51 评论0 收藏0
从基础到实战手摸手带你掌握新版Webpack4.0详解一起读文档

摘要：构建构建就是把源代码转换成发布到线上的可执行代码，包括如下内容。自动刷新监听本地源代码的变化，自动重新构建刷新浏览器。自动发布更新完代码后，自动构建出线上发布代码并传输给发布系统。将文件放入到项目中，在中新建一个放字体图标的文件夹。项目地址 github.com/wudiufo/Web… 知识点概览： Loader，HMR ,Create React App, Caching, Plug...

王军 2019-05-23 17:31 评论0 收藏0
Icon 进化史

摘要：但它仍有缺陷字体需要加载资源有时候可能会出现锯齿只能被渲染成单色或者的渐变色所以我们要继续进化。直立人之使用，这里所谓的进化并不是本身的进化，因为并不晚于。随着外界因素的进化，的淘汰，的开始，的机会变到来了。南方古猿之 png sprite showImg(https://segmentfault.com/img/remote/1460000008199114?w=822&h=288...

superw 2019-08-20 13:57 评论0 收藏0
React Native图片资源使用的优美方案

摘要：图片资源作为与用户交互的界面元素，在客户端产品中起到了非常重要的角色作用。在应用开发中，移动端与的图片使用策略也有所不同。端较大的内存容量，快速的渲染能力使各类型图片资源都能得到较好的使用。图片资源（ jpeg、png、svg、webp ... ）作为与用户交互的界面元素，在客户端产品中起到了非常重要的角色作用。在应用开发中，移动端与PC的图片使用策略也有所不同。PC端较大的内存容量，快速的...

fireflow 2019-05-23 14:32 评论0 收藏0