Vue项目中使用svg图标

demo代码

安装依赖

安装svg-sprite-loader和svgo-loader依赖

npm install svg-sprite-loader svgo-loader --save-dev

配置vue.config.js文件

'use strict'
const path = require('path')


function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
    chainWebpack(config) {
        // set svg-sprite-loader
        config.module
        .rule('svg')
        .exclude.add(resolve('src/icons'))
        .end()

        config.module
        .rule('icons')
        .test(/\.svg$/)
        .include.add(resolve('src/icons'))
        .end()
        .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({
            symbolId: 'icon-[name]'
        })
        .end()
        .before('svg-sprite