安裝svg-sprite-loader依賴

npm install svg-sprite-loader -D

svg.vue配置

<template>
  <svg class="svg-class" :class="className">
    <use :href="'#icon-' + iconName"></use>
  </svg>
</template>
<script>
export default {
  name: "SvgIcon",
  props: {
    iconName: {
      type: String,
      
 
default: ""
    },
    className: {
      type: String,
      default: ""
    }
  }
};
</script>

svg.js配置

/**
 * 圖片解析
 * require.context 讀取指定目錄的所有檔案
 * 第一個：目錄
 * 第二個：是否遍歷子級目錄
 * 第三個：定義遍歷檔案規則
 */
const req = require.context("../assets/svg", false, /\.svg$/); //正則裡面表示結尾，讀取結尾為.svg的檔案
const requireAll = requireContext => {
  
 
return requireContext.keys().map(requireContext);
};
requireAll(req);

vue.config.js配置

const path = require("path");
module.exports = {
  chainWebpack: config => {
    config.module.rules.delete("svg"); //重點:刪除預設配置中處理svg,
    config.module
      .rule("svg-sprite-loader")
      .test(/\.svg$/)
      .include.add(path.resolve(
 
"src/assets/svg")) //處理svg目錄
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]"
      });
  }
};