Vue2 引入下载的SVG图像的方式

Step 1：安装依赖

npm i svg-sprite-loader --save

Step 2：创建文件路径

// index.js
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component

// register globally
Vue.component('svg-icon', SvgIcon)

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

Step 3: 在main.js引入

import './icons'

Step 4: 在vue.config,js配置

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()

Step 5: 在vue页面使用

<svg-icon :iconClass="circleIcon" :className="circleIcon"></svg-icon>