vue2动态使用自定义svg图标

1、安装svg-sprite-loader包

npm install svg-sprite-loader@6.0.11 --save

2、在components文件夹中创建SvgIcon.vue组件

<template>
  <svg
    className="svg-icon"
    aria-hidden="true"
    :style="{ width: width, height: height }"
  >
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
export default {
  props: {
    iconClass: {
      type: String,
      default: "account-pin-circle-fill",
    },
    width: {
      type: String,
      default: "16px",
    },
    height: {
      type: String,
      default: "16px",
    },
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`;
    },
  },
};
</script>

3、src下创建icons文件夹，并在其中创建svg文件夹用于存放自己的svg图标，创建index.js文件

index.js文件内容，进行全局挂载

import Vue from "vue";
import SvgIcon from "../components/SvgIcon.vue"; 
Vue.component("svg-icon", SvgIcon);

const req = require.context("./svg", false, /\.svg$/);
const requireAll = (requireContext) =>
  requireContext.keys().map(requireContext);
requireAll(req);

4、配置vue.config.js文件

const { defineConfig } = require("@vue/cli-service");
//引入path
const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: (config) => {
    // 配置 svg-sprite-loader
    config.module.rule("svg").exclude.add(resolve("src/icons")).end();
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]",
      })
      .end();
  },
});

5、组件已经全局挂载，无需再次引入，可直接在需要的地方使用

<svg-icon icon-class="icon-name" width="16px" height="16px"></svg-icon>
//icon-class动态传入值