CMVR-IOT-UI/src/components/SvgIcon/index.vue

<template>
  <svg
    :width="size"
    :height="size"
    :style="svgStyle"
    class="svg-icon"
    aria-hidden="true"
  >
    <use :xlink:href="symbolId" />
  </svg>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  name: {
    type: String,
    required: true
  },
  size: {
    type: [String, Number],
    default: 24
  },
  color: {
    type: String,
    default: 'currentColor'
  },
  customStyle: {
    type: Object,
    default: () => ({})
  }
})

const symbolId = computed(() => `#icon-${props.name}`)

const svgStyle = computed(() => ({
  verticalAlign: 'middle',
  color: props.color,       // 用 color 替代 fill
  ...props.customStyle
}))
</script>