<template>
  <!-- Component 是 Vue 中的动态组件，:is="icon" 表示根据 icon 的值来动态渲染对应的图标组件 -->
  <!-- :theme="theme" 绑定图标主题，如轮廓（outline）、填充（filled）等 -->
  <!-- :size="size" 绑定图标大小，可以是数字或字符串类型 -->
  <!-- :spin="spin" 绑定图标是否旋转的状态，布尔类型 -->
  <!-- :fill="fill" 绑定图标的填充颜色，可以是字符串或字符串数组 -->
  <!-- :strokeLinecap="strokeLinecap" 绑定图标描边端点的样式 -->
  <!-- :strokeLinejoin="strokeLinejoin" 绑定图标描边连接处的样式 -->
  <!-- :strokeWidth="strokeWidth" 绑定图标描边的宽度 -->
  <Component
    :is="icon"
    :theme="theme"
    :size="size"
    :spin="spin"
    :fill="fill"
    :strokeLinecap="strokeLinecap"
    :strokeLinejoin="strokeLinejoin"
    :strokeWidth="strokeWidth"
  />
</template>

<script setup lang="ts">
// 从 '@icon-park/vue-next/lib/runtime' 导入 Icon 类型，用于定义图标相关的类型
import type { Icon } from '@icon-park/vue-next/lib/runtime'

// 使用 defineProps 定义组件的属性，明确指定属性的类型和默认值情况
defineProps<{
  // icon 属性，类型为 Icon，必填，用于指定要显示的图标
  icon: Icon
  // theme 属性，可选，类型为 'outline' | 'filled' | 'two-tone' |'multi-color'，表示图标的主题样式
  theme?: 'outline' | 'filled' | 'two-tone' |'multi-color'
  // size 属性，可选，类型为 number | string，用于设置图标的大小
  size?: number | string
  // spin 属性，可选，类型为 boolean，用于控制图标是否旋转
  spin?: boolean
  // fill 属性，可选，类型为 string | string[]，用于设置图标的填充颜色
  fill?: string | string[]
  // strokeLinecap 属性，可选，类型为 'butt' | 'round' |'square'，用于设置描边端点的样式
  strokeLinecap?: 'butt' | 'round' |'square'
  // strokeLinejoin 属性，可选，类型为'miter' | 'round' | 'bevel'，用于设置描边连接处的样式
  strokeLinejoin?: 'miter' | 'round' | 'bevel'
  // strokeWidth 属性，可选，类型为 number，用于设置描边的宽度
  strokeWidth?: number
}>()
</script>
