<template>
  <span
    class="app-icon"
    :style="style"
    role="img"
    :aria-label="name"
    v-html="svg"
  ></span>
</template>

<script setup>
import { computed } from 'vue'
import { icons } from './icons/index.js'

const props = defineProps({
  // 图标名称，对应 icons/index.js 注册表的 key
  name: { type: String, required: true },
  // 尺寸：数字按 px 处理，也可传 '2em' 等字符串
  size: { type: [Number, String], default: 24 }
})

const svg = computed(() => {
  const s = icons[props.name]
  if (!s && import.meta.env.DEV) {
    console.warn(`[AppIcon] 未找到图标：${props.name}`)
  }
  return s || ''
})

const px = computed(() =>
  typeof props.size === 'number' ? `${props.size}px` : props.size
)
const style = computed(() => ({ width: px.value, height: px.value }))
</script>

<!-- 注意：v-html 注入的内容不受 scoped 样式影响，此处使用全局样式控制尺寸 -->
<style>
.app-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  vertical-align: middle;
  flex: none;
}
.app-icon > svg {
  width: 100%;
  height: 100%;
  display: block;
}
</style>
