You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
< 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 >