vue3 svg-icon组件

Vue 3 中的 SVG Icon 组件可以通过以下步骤来实现：

1. 首先，创建一个名为 `SvgIcon.vue` 的单文件组件。在该组件中，可以使用 `<svg>` 标签来渲染 SVG 图标。

<template>
  <svg :class="className" :style="styles">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
export default {
  name: "SvgIcon",
  props: {
    className: {
      type: String,
      default: ""
    },
    styles: {
      type: Object,
      default: () => ({})
    },
    iconName: {
      type: String,
      required: true
    }
  }
};
</script>

2. 在你的项目中，导入该组件并在需要使用 SVG 图标的地方进行注册。

<template>
  <div>
    <svg-icon className="custom-class" :styles="{ fontSize: '24px' }" iconName="your-icon-name" />
  </div>
</template>

<script>
import SvgIcon from "@/components/SvgIcon.vue";

export default {
  components: {
    SvgIcon
  }
};
</script>

在上面的示例中，`className` prop 可以用于自定义样式类名，`styles` prop 可以用于自定义样式对象，`iconName` prop 则用于指定要渲染的 SVG 图标的名称。

请确保你已经在项目中正确引入 SVG 图标库，并将图标名称传递给 `iconName` prop。