<template>
  <!-- H5 平台使用 SVG Symbol -->
  <!-- #ifdef H5 -->
  <svg class="icon" :style="style">
    <use :xlink:href="symbolId" />
  </svg>
  <!-- #endif -->

  <!-- 微信小程序使用 Image 组件 -->
  <!-- #ifdef MP-WEIXIN -->
  <image
    :src="imageSrc"
    mode="aspectFit"
    class="icon"
    :style="style"
  />
  <!-- #endif -->
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  name: { type: String, required: true }, // 图标名称
  size: { type: [String, Number], default: 18 }, // 图标尺寸
  color: String, // 图标颜色（仅 H5 有效）
})

// H5 的 Symbol ID
const symbolId = computed(() => `#icon-${props.name}`)

// 微信小程序的图片路径（需将 SVG 存放到 static）
const imageSrc = computed(() => `/static/icons/${props.name}.svg`)

// 动态样式
const style = computed(() => ({
  width: `${props.size}px`,
  height: `${props.size}px`,
  color: props.color,
}))
</script>