ucard-person-app-front/src/components/Icon.vue

<template>
    <span
      class="icon"
      v-html="svgContent"
      :style="{ width: size + 'px', height: size + 'px', color }"
    />
  </template>

  <script setup>
  import { ref, watchEffect } from 'vue'

  const props = defineProps({
    name: { type: String, required: true },         // 图标名，如 download → download.svg
    size: { type: [Number, String], default: 24 },
    color: { type: String, default: '' }
  })

  const svgContent = ref('')

  // 使用 Vite 的 glob 导入所有图标
  const modules = import.meta.glob('@/assets/icons/*.svg', { as: 'raw' })

  watchEffect(async () => {
    const path = `/src/assets/icons/${props.name}.svg`
    const loader = modules[path]

    if (loader) {
      const raw = await loader()
      // 替换 fill="..." 为 fill="currentColor"，使颜色可控
      svgContent.value = raw.replace(/fill="[^"]*"/g, 'fill="currentColor"')
    } else {
      console.warn(`[Icon] SVG not found: ${props.name}`)
      svgContent.value = ''
    }
  })
  </script>

  <style scoped>
  .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
  }
  </style>