<template>
  <Icon 
    :icon="iconName" 
    :width="size" 
    :height="size" 
    :color="color"
  />
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Icon } from '@iconify/vue'

interface Props {
  name: string
  size?: number | string
  color?: string
  iconLibrary?: string // 图标库名称，默认为 'tabler'
}

const props = withDefaults(defineProps<Props>(), {
  size: 32,
  color: 'currentColor',
  iconLibrary: 'tabler'
})

// 计算完整的图标名称
const iconName = computed(() => {
  // 如果name已经包含前缀（如 "heroicons:home"），直接返回
  if (props.name.includes(':')) {
    return props.name
  }
  // 否则添加图标库前缀
  return `${props.iconLibrary}:${props.name}`
})
</script>
