vue全局使用svg图片配置

1.安装依赖

npm i svg-sprite-loader -s

2.在vue.config.js里面配置

chainWebpack(config) {
    // 设置svg
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
    .use('svg-sprite-loader')
    .loader('svg-sprite-loader')
    .options({
        symbolId: 'icon-[name]'
        include:['./src/icons']
    })
}

3.在src下面创建目录

SvgIcon下面的index.vue

index.js

import Vue from 'vue'
import SvgIcon from './SvgIcon'// svg组件

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

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

5.在main.js引入

import './icons' // icon

6.页面使用