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

2019年8月20日 419次阅读 来源: okfine

之前天生iconfont字体图标，是用的https://icomoon.io/app/ 或者是阿里的https://www.iconfont.cn/ ，将UI给的svg图导入来天生。然则一向有个题目，如果须要再次到场几个图标时，又须要从新搞一遍，很贫苦。

而运用svg-sprite-loader的体式格局，也不是很轻易，而且在body下插进去一个超大的svg标签，影响机能不说，看着这么乱的代码真是挺难熬痛苦。。而且有些UI库比运用字体图标会比较方便。别的字体文件特别是woff也比svg要小许多。

因而近来抽时间参考开源代码搞了个webpack插件，自动用svg天生iconfont字体图标，支撑热更新。

字体及css的天生流程：
《webpack自动用svg天生iconfont字体图标，支撑热重载》

热重载（hot-reload）流程：

《webpack自动用svg天生iconfont字体图标，支撑热重载》

运用这个插件后，开辟时在src/iconfont/svgs目录下，修正或增加、删除svg文件时，就能够自动天生字体图标（支撑ttf,woff2,woff,eot,svg）及配套从css款式、html预览了；同时热更新马上能够看到结果。

《webpack自动用svg天生iconfont字体图标，支撑热重载》

只需一个配置文件，并以此到场到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们！

源码在这：https://github.com/hzsrc/webp…

感兴趣的小伙伴能够尝尝~

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

    原文作者：okfine
    原文地址: https://segmentfault.com/a/1190000017480480
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞