vue-cli4使用svg（svg-sprite-loader）

1、创建vue项目

vue create my-project

目录结构为：

image.png

2、在vue项目中安装 svg-sprite-loader

npm install svg-sprite-loader --save-dev

3、在src文件夹下创建组件 components/Svg.vue

4、新建 /src/icons 和 /src/icons/svg 目录，把.svg文件都放到 /src/icons/svg 或者/src/icons/mainSvg目录里

5、新建 /src/icons/index.js 文件并编辑

import Vue from 'vue'
import Svg from '@/components/Svg'
Vue.component('svg-icon', Svg)

/**
 * require.context 的参数说明
 * './svg' 代表要查找的文件路径
 * false 代表是否查找子目录
 * /\.svg$/ 代表要匹配文件的正则
 * 
 */
const req = require.context('./svg', false, /\.svg$/)
const reqa = require.context('./mainSvg', false, /\.svg$/)
    // https://zhuanlan.zhihu.com/p/59564277
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
requireAll(reqa)

6、修改根目录配置文件 vue.config.js ,没有就手动创建，修改配置记得要重新 npm run serve 一下。

// 注意 'icon-[name]' 前缀需要跟Svg.vue中`#icon-${this.iconClass}`前缀一致
const path = require('path')

function resolve(dir) {
    return path.join(__dirname, './', dir)
}

module.exports = {
    chainWebpack(config) {
        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()
    }
}

7、全局引入cons，main.js可以引入

import Vue from 'vue'
import App from './App.vue'

import './icons'

8、应用 App.vue

具体demo项目可以查看：https://gitlab.com/public-hjn/svg-demo