<template>
  <svg aria-hidden="true" :style="customStyle" :class="props.class">
    <use :xlink:href="iconName" fill="currentColor" />
  </svg>
</template>

<script setup lang="ts">
import type { CSSProperties } from 'vue'
import { addUnit } from '~/utils/util'

// 定义组件属性
const props = withDefaults(
  defineProps<{
    // 图标名称
    name: any
    // 图标颜色
    color?: string
    // 图标大小
    size?: string | number
    // 图标类名
    class?: string
    // 图标样式
    style?: Record<string, any>
  }>(),
  {
    name: '',
    size: 'var(--el-font-size-medium)',
    class: '',
    style: () => ({})
  }
)

// 图标名称
const iconName = computed(() => {
  if (!props.name.startsWith('icon-')) {
    return `#icon-${props.name}`
  }
  return `#${props.name}`
})

// 自定义样式
const customStyle = computed<CSSProperties>(() => {
  return {
    ...props.style,
    fontSize: addUnit(props.size),
    width: addUnit(props.size),
    height: addUnit(props.size),
    ...(props.color ? { color: props.color } : {})
  }
})
</script>
