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>