webpack - svg图片自动转换成css类名

1. 插件安装

npm install webpack-iconfont-plugin-nodejs -d

2. vue项目中的文件夹创建

3. webpack.dev.config.js中增加配置项

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

// 在plugins里面增加配置;
plugins: [
  new WebpackIconfontPluginNodejs({
        fontName: 'webIcon',
        cssPrefix: 'icon',
        svgs: path.join(dir, 'svgs/*.svg'),
        fontsOutput: path.join(dir, 'fonts/'),
        cssOutput: path.join(dir, 'fonts/font.css'),
        jsOutput: path.join(dir, 'fonts/fonts.js'),
        formats: ['ttf', 'woff'],
    })
]

• 注: 添加玩配置之后 需要重启项目

4. main.js 引入动态生成的css文件

import '../static/iconfonts/fonts/font.css'

以上步骤完成之后, 只需要将svg图片添加到svgs文件夹下, font.css 文件下就会自动生成对应的类名, 在项目中直接使用该类名即可