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

defineOptions({
  name: 'SvgIcon'
});

interface Props {
  /** 图标名称 */
  name: string;
  /** 图标尺寸 (支持CSS单位) */
  size?: string | number;
  /** 图标颜色 */
  color?: string;
  /** 旋转动画 */
  spin?: boolean;
  /** 自定义类名 */
  className?: string;
}

// 设置默认属性值
const props = withDefaults(defineProps<Props>(), {
  size: '1em',
  color: 'currentColor',
  spin: false,
  className: ''
});

// 处理尺寸值，确保有单位
const formattedSize = computed(() => {
  if (typeof props.size === 'number') return `${props.size}px`;
  return props.size;
});

// 自定义样式
const style = computed(() => ({
  width: formattedSize.value,
  height: formattedSize.value,
  color: props.color,
  animation: props.spin ? 'icon-spin 1s infinite linear' : 'none'
}));
</script>

<template>
  <!-- SVG图标 -->
  <svg 
    :class="['svg-icon', className]"
    :style="style"
    aria-hidden="true"
  >
    <use :xlink:href="`#icon-${name}`" />
  </svg>
</template>

<style scoped>
.svg-icon {
  display: inline-block;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  transition: transform 0.3s ease;
}

@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>