参考：https://www.zhangxinxu.com/wordpress/2014/07/introduce-svg-sprite-technology/

参考：https://cisy.me/webpack-svg-sprite/

1、安装插件：

npm i -S svg-sprite-loader

2、更改build/webpack.base.conf.js配置文件

        {
            test: /\.svg$/,
            loader: 'svg-sprite-loader',
            include: [path.resolve(__dirname, '../src/images/icons')],
            options: {
                //symbolId: 'icon-[name]' //这个没有生效，生效的是默认的name
            }
        }

        {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url',
            exclude: [path.resolve(__dirname,'../src/images/icons')], //排除字体图标文件
            query: {
                limit: 10000,
                name: utils.assetsPath('img/[name].[ext]')
            }
        },

3、下载svg文件并放入images/icons/svg/目录下，

4、新建公用组件components/common/SvgIcon.vue

<template> 
    <svg :class="svgClass" aria-hidden="true">
        <use :xlink:href="iconName"></use>
    </svg> 
</template> 

<script>
export default {
  name: "svg-icon",
  props: {
    iconClass: { type: String, required: true },
    className: { type: String }
  },
  computed: {
    iconName() {
      return `#${this.iconClass}`;
    },
    svgClass() {
      if (this.className) {
        return "svg-icon " + this.className;
      } else {
        return "svg-icon";
      }
    }
  }
};
</script> 

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

5、新建src/images/icons/index.js文件

import Vue from 'vue'
import SvgIcon from '../../components/common/SvgIcon'
/* require.context("./test", false, /.test.js$/);
    这行代码就会去 test 文件夹（不包含子目录） 下面的找所有文件名以 .test.js 结尾的文件能被 require 的文件。
    更直白的说就是 我们可以通过正则匹配引入相应的文件模块。
     require.context有三个参数： 
     directory：说明需要检索的目录 
     useSubdirectories：是否检索子目录 
     regExp: 匹配文件的正则表达式 */
//全局注册 
Vue.component('svg-icon', SvgIcon) 
const requireAll = requireContext => requireContext.keys().map(requireContext) 
const req = require.context('./svg', false, /\.svg$/) 
requireAll(req)

6、main.js中引入组件

import './images/icons/index.js'

7、组件中应用

<svg-icon icon-class="location"></svg-icon>
<svg-icon icon-class="search"></svg-icon>