<template>
  <svg
    :class="['svg-icon', $attrs.class]"
    :style="svgStyle"
    aria-hidden="true"
    v-bind="$attrs"
  >
    <use :href="symbolId" />
  </svg>
</template>

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

const props = defineProps({
  /**
   * 图标名称，对应 src/assets/image 下的 SVG 文件路径（相对）
   * 规则：icon-[子目录]-[文件名]  或  icon-[文件名]（根目录下）
   * 示例：
   *   magnify.svg        → name="magnify"
   *   shop/handle.svg    → name="shop-handle"
   */
  name: {
    type: String,
    required: true,
  },
  color: {
    type: String,
    default: '',
  },
  strokeBold: {
    type: Boolean,
    default: false,
  },
  size: {
    type: [String, Number],
    default: '',
  },
})

const symbolId = computed(() => {
  // 兼容传入完整 id 或仅传文件名
  if (props.name.startsWith('icon-')) return `#${props.name}`
  return `#icon-${props.name}`
})

const svgStyle = computed(() => {
  const style = {}
  if (props.color) style.color = props.color
  if (props.size) {
    if (typeof props.size === 'number') {
      const s = `${props.size}px`
      style.fontSize = s
      style.width = s
      style.height = s
    } else if (typeof props.size === 'string') {
      const parts = props.size.trim().split(/\s+/)
      if (parts.length === 2) {
        // 支持 'width height' 格式，直接把第一项作为宽，第二项作为高
        style.width = parts[0]
        style.height = parts[1]
      } else {
        // 单一字符串则按统一大小处理（如 '24px' 或 '1.5em'）
        style.fontSize = props.size
        style.width = props.size
        style.height = props.size
      }
    }
  }
  // 仅当需要加粗描边时，设置 stroke 为 currentColor
  if (props.strokeBold) style.stroke = 'currentColor'
  return style
})
</script>

<style scoped>
.svg-icon {
  /* 默认继承父级字体大小 */
  width: 1em;
  height: 1em;
  /* 颜色通过 currentColor 继承，配合 fill=currentColor 的 SVG */
  fill: currentColor;
  vertical-align: -0.15em;
  overflow: hidden;
  display: inline-block;
}
</style>
