Vue は svgIcon パブリック コンポーネントをカプセル化します

1. コンポーネントに新しい common\SvgIcon.vue を作成します

<template> 
    <svg :class="svgClass" aria-hidden="true" preserveAspectRatio="xMaxYMax meet">
        <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: 5em;
  height: 5em; */
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

</style>

2. .svg ファイルを保存するために、src の下に新しいassets\image\icons\svgを作成します。

3. srcの下に新しいassets\image\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)

4. build\webpack.base.conf.js のモジュール\ルールを変更します

{
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude: [path.resolve(__dirname,'../src/assets/image/icons')], //排除字体图标文件
        query: {
            limit: 10000,
            name: utils.assetsPath('img/[name].[ext]')
        }
      },
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [path.resolve(__dirname, '../src/assets/image/icons')],
        options: {
            //symbolId: 'icon-[name]' //这个没有生效，生效的是默认的name
        }
      },