IconFontCreatePlugin
安装
npm install iconfont-create-plugin
基本调用方式
同一般的webpack plugin引入iconfont-create-plugin,在webpack config中实例化。
const IconFontCreatePlugin = ; moduleexports = plugins: name:"icon" output:'/output/font'
IconFontCreatePlugin会将'/output/font'中的svg文件读取生成"eot", "woff", "ttf", "svg"四个字体文件,一个css文件,一个 预览的html文件
IconFontCreatePlugin支持参数
entry
svg图标路径,传该值会从传入路径下读取svg生成字体文件
entry:"/src/.icons"
或者是多个文件路径数组
entry:"/src/.icons""/src/icons"
name
字体图标库的名称,该参数影响生成图标class名的前缀
output
生成的图标文件的输出地址,可指定为对象将html,css及font字体文件输出到三个不同的文件目录下,考虑发布css,font和预览html在不同目录下
font:"/output/font" css:"/output/css/font" html:"/output/font"
publishPath
指定css中字体图标的引用路径,可以用于配置cdn路径或者是静态资源路径
name:"icon" output:'/output/font' publishPath:"/publish/font/"
生成css
suffix
考虑使用如sass这种的样式预处理,可以指定生成的文件的后缀名,如指定css为.sass后缀最终会生成icon.sass的字体样式文件
name:"icon" output:'/output/font' suffix: css:".sass" publishPath:"/publish/font/"
styleTemplate与htmlTemplate
指定IconFontCreatePlugin生成的style文件模板及预览html文件的模板,满足预览模板更改的需求。模板使用ejs模板生成 提供了以下变量注入
name://字体库名, publishPath://发布路径, fontContent:""//生成字体css, fontName: a:'\f1023s' //生成字体列表
按需加载图标
结合vusion-iconmaker这个loader可以实现字体图标的按需加载 如下配置loader
rules: test: /\.svg$/ loader: 'vusion-iconmaker' include: path
业务代码中
const test = 123; // const icons = require('icons-loader'); const $app = document; $appinnerHTML = `
在业务代码中请求svg文件,loader将返回class名并通过Plugin将svg icon放到字体图标中