在vue项目中使用svg

1.安装svg依赖

npm i svg-sprite-loader

 2.配置 vue.config.js 补充如下代码

const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
},

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

3.在 /src/components 创建 SvgIcon.vue 写入如下代码

4.在 src/assets/icons 文件中新建 svg文件（用来存放svg图）和 index.js。 

icons文件不一定非要在assets文件中  可直接在src文件下 只需修改步骤2中的路径即可

svg图可以去https://www.iconfont.cn/中制作 

 index.js文件配置如下

import Vue from 'vue'

import SvgIcon from '@/components/SvgIcon' // svg组件

// 注册到全局
Vue.component('svg-icon', SvgIcon)

const requireAll = (requireContext) =>
  requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)

requireAll(req)

 5.在main.js中引入 import '@/assets/icons'

在需要用到svg的地方使用svg