webpack根据svg生成iconfont图标

一.使用webpack在项目中根据svg生成iconfont

1.安装webpack-iconfont-plugin-nodejs

 npm install webpack-iconfont-plugin-nodejs

    webpack-iconfont-plugin-nodejs官方说明(详细配置可查看官网):https://github.com/hzsrc/webpack-iconfont-plugin-nodejs

2.创建iconfont文件夹,结构如下图:

 3.配置webpack.dev.conf.js

const WebpackIconfontPluginNodejs  = require('webpack-iconfont-plugin-nodejs');
const dir = 'static/iconfont/';

new WebpackIconfontPluginNodejs({
      fontName: 'iconfont',
      cssPrefix: 'ico',
      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'],
    }),

4.将svg文件放置在/static/iconfont/svgs下,如下图:

5.重启项目即可在/static/iconfont/fonts生成iconfont的css,woff等文件(支持热部署,新的svg文件放到svgs文件夹后会在font.css里面自动追加css样式),如下图:

6.使用,直接在main.js中引入font.css

 

二.使用icomoon.io生成

1.打开生成地址:

https://icomoon.io/app/#/select

2.点击import icons上传svg文件,上传完成后会在UntitledSet中显示

3.配置生成信息

点击同页面右下角Generate Font 进入配置界面

弹出配置界面后点击右下角的设置图标,弹出设置界面

设置如下,设置完成后点击弹框右上角X号关闭设置界面

然后点击右下角Download下载,下载下来是个zip解压后在项目static文件夹下新建iconfont文件夹,将解压文件放入新建的文件夹,在main.js中引入style.css文件即可使用了,可以参考上面一的