BoundLink-Plate-UI/src/components/BsUi/SvgIcon/index.vue

<!-- SvgIcon.vue -->
<template>
  <svg
    class="svg-icon"
    :style="{
      width: size ? (typeof size === 'number' ? `${size}px` : size) : '1em',
      height: size ? (typeof size === 'number' ? `${size}px` : size) : '1em',
      color: color,
    }"
    aria-hidden="true"
  >
    <use :href="'#' + name"></use>
  </svg>
</template>

<script setup>
  import { defineProps } from 'vue';

  const props = defineProps({
    name: {
      type: String,
      required: true,
    },
    size: {
      type: [String, Number],
      default: '1em',
    },
    color: {
      type: String,
      default: "currentColor", // 使用 currentColor 继承父级颜色
    },
  });
</script>

<style scoped>
  .svg-icon {
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>