VUE3.0 解析svg文件

網上關於解析svg的有很多，就不白話了。

1：在src文件夾下建立如下文件

 

 svg文件夾專門存放下載下來的svg文件。

index.js用來解析svg文件。

SvgIcon.vue是svg的公共組件，提取出來便於邏輯書寫。

2：svgicon.vue的代碼。主要是公共組件的邏輯（固定即可，要做調整也可修改）：

<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>
<script>
export default {
  name: "SvgIcon",
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ""
    }
  },
  computed: {
    iconName() {
      return `#icon-${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>

3：index.js的代碼，主要是創建公共組件並解析svg，供main.js全局引用導出

import Vue from 'vue'
import SvgIcon from '../icons/SvgIcon.vue'
//定義全局組件
Vue.component("svg-icon", SvgIcon);
const req = require.context("./svg", false, /\.svg$/) //第一個：目錄  第二個：是否遍歷子級目錄  3：定義遍歷規則
const requireAll = requireContext => {
    return requireContext.keys().map(requireContext)
};
requireAll(req);

4：在main.js中引用

 

 5：修改vue.config.js里面的配置，找到chainWebpack 屬性：代碼如下

//3.0版本
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    // 清除已有的所有 loader。
    // 如果你不這樣做，接下來的 loader 會附加在該規則現有的 loader 之后。
    svgRule.uses.clear()
    svgRule
      .test(/\.svg$/)
      .include.add(path.resolve(__dirname, './src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
    const fileRule = config.module.rule('file')
    fileRule.uses.clear()
    fileRule
      .test(/\.svg$/)
      .exclude.add(path.resolve(__dirname, './src/icons'))
      .end()
      .use('file-loader')
      .loader('file-loader')
  }

6：使用npm命令安裝依賴

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

7:修改vue.config.js之后需要重啟服務。

之后就可以在界面中引用svg-icon組件了

 <svg-icon icon-class="你的svg文件名稱" class-name="ybp-style"></svg-icon>

這就是我的圖標：