1、安装依赖

npm i svg-sprite-loader -D

2、需要配置相关的svg

打开vue.congfig.js文件，配置chainWebpack

需要在src/assets/svg新建文件夹，里面存放svg图

chainWebpack: config => {
    config.module.rules.delete('svg'); //重点:删除默认配置中处理svg,
    config.module
      .rule('svg-sprite-loader')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/svg')) // 表示目录中的文件需要进行 svg-sprite-loader
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      });
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/)
      .exclude.add(resolve('src/assets/svg')) // 表示目录中的文件不要进行 url-loader
      .end()
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 10240, // 设置小于10k的就base64
        name: 'img/[name].[hash:7].[ext]',
        publicPath: assetsPublicPath
      });
},

3、重点：编写svgIcon组件

svgIcon文件夹包含两个文件：svgIcon.vue和index.js

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 `#icon-${this.iconClass}`;
    },
    svgClass () {
      if (this.className) {
        return 'svg-icon ' + this.className;
      } else {
        return 'svg-icon';
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor; //此属性为更改svg颜色属性设置
  stroke: currentColor;
  overflow: hidden;
}
</style>

index.js如下：

import Vue from 'vue';
import SvgIcon from '@/components/svgIcon/svgIcon.vue';
// 全局注册组件
Vue.component('svg-icon', SvgIcon);
// 定义一个加载目录的函数
const requireAll = requireContext => requireContext.keys().map(requireContext);
/**
 * require.context是什么？
 * 一个webpack的api,通过执行require.context函数获取一个特定的上下文,
 * 主要用来实现自动化导入模块,
 * 在前端工程中,如果遇到从一个文件夹引入很多模块的情况,
 * 可以使用这个api,它会遍历文件夹中的指定文件,
 * 然后自动导入,使得不需要每次显式的调用import导入模块
 */
const req = require.context('@/assets/svg', false, /\.svg$/);
// 加载目录下的所有 svg 文件
requireAll(req);

4、单页使用时

需要在main.js文件里引用

// 全局注册svg组件
import '@/components/svgIcon';

5、示例

在svg文件里添加一张test.svg图片，iconClass跟图片名称保持一致，className可以自己添加类，默认会有一个svg-icon

注意：需要把svg图片文件的(需要修改的)fill以及stroke修改成currentColor。

比如下面的svg文件就stroke="currentColor"

<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="14px" viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="test" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
        <g id="17-test" transform="translate(-1153.000000, -537.000000)" stroke="currentColor">
            <g id="icon-test" transform="translate(1154.000000, 538.000000)">
                <path d="M14.4576763,0 L6.15140056,0 C5.87525819,-1.94537167e-16 5.65140056,0.223857625 5.65140056,0.5 L5.65140056,5.98362814 C5.65140056,6.25977051 5.42754294,6.48362814 5.15140056,6.48362814 L3,6.48362814 L3,6.48362814" id="路径-4"></path>
                <path d="M5.48334313,2.84002654 L2.79482046,2.84002654 C2.68270744,2.84002654 2.5738475,2.877706 2.48572375,2.94701353 L0.190903296,4.75184293 C0.0703681963,4.84664132 -1.85064764e-15,4.99150847 -1.77635684e-15,5.14485594 L-1.77635684e-15,10.1645815 C-1.36303406e-15,10.4407239 0.223857625,10.6645815 0.5,10.6645815 L3.10371973,10.6645815 L3.10371973,10.6645815 M6.10371973,10.6645815 L9.30163607,10.6645815 M12.3016361,10.6645815 L14.554688,10.6645815" id="形状"></path>
                <path d="M6.10371973,10.6645815 L6.10371973,10.8706025 C6.10371973,11.6990296 5.43214685,12.3706025 4.60371973,12.3706025 C3.7752926,12.3706025 3.10371973,11.6990296 3.10371973,10.8706025 L3.10371973,10.6645815" id="路径"></path>
                <path d="M12.3016361,10.6645815 L12.3016361,10.8706025 C12.3016361,11.6990296 11.6300632,12.3706025 10.8016361,12.3706025 C9.97320895,12.3706025 9.30163607,11.6990296 9.30163607,10.8706025 L9.30163607,10.6645815" id="路径备份"></path>
                <line x1="9.97537131" y1="5.5" x2="14.4921377" y2="5.5" id="路径-8"></line>
            </g>
        </g>
    </g>
</svg>

页面使用以及样式修改

<svg-icon iconClass="test" className='test-name'></svg-icon>

.test-name {
  width: 14px;
  height: 14px;
  color: green;
}