Vue-cli3.0 svg-sprite-loader 配置

安装svg-sprite-loader

npm install svg-sprite-loader --save

在项目根目录中打开 vue.config.js

const path = require('path');
function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
  chainWebpack: config => {
    config.resolve.alias
        .set('@', resolve('src'))
    config.module.rules.delete("svg"); //重点:删除默认配置中处理svg
    config.module
        .rule('svg-smart')
        .test(/\.svg$/)
        .include
        .add(resolve('src/icons')) //处理svg目录
        .end()
        .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({
            symbolId: 'icon-[name]'
        })
  }
}

在src目录下新建index.js

import Vue from 'vue'
import iconSvg from '@/components/svgIcon/iconSvg'

Vue.component('icon-svg', iconSvg)

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

在components目录下新建文件夹svgIcon，并在该文件夹中新建iconSvg.vue

最后，在main.js中导入icons

import './icons' // icon