IconButton
带图标的 Button 薄封装（对齐 Semi iconButton）：icon 与 children(文字) 均可选，icon-only 只是无文字的分支。
如何引入
import { IconButton } from '@chenzy-design/svelte';基础用法
纯图标按钮：通过 icon snippet 传入图标，建议提供 ariaLabel 作为可访问名。等价于 Button 传 icon 且无文字。 Button
按钮类型
复用 Button 的五种语义类型：primary / secondary / tertiary / warning / danger。
按钮主题
复用 Button 的四种视觉变体：light / solid / borderless / outline。
尺寸
三档尺寸 large / default / small；纯图标下命中区随尺寸收成方形。
圆形按钮
circle 让按钮呈正圆（border-radius:50%），配合 icon-only 的方形尺寸得到正圆。circle 同样可用于 Button。
加载与禁用
loading 用旋转图标替换并禁止点击（aria-busy）；disabled 降低不透明度并禁止交互。
AI 风格 - 多彩
colorful 在各主题下用品牌蓝→紫渐变，营造 AI 风格；可与 circle 组合。
图标 + 文字
传入 children 文字后不再是纯图标按钮（对齐 Semi）：icon + 文字组合，自动加 -with-icon class。
图标位置
iconPosition 控制图标相对文字的位置：left（默认）/ right。
API 参考
IconButton
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
icon | 图标内容（可选） | Snippet | undefined |
children | 文字内容（可选）；提供后非纯图标 | Snippet | undefined |
ariaLabel | 可访问名（透传到 aria-label）；纯图标按钮建议提供 | string | undefined |
type | 语义类型 | 'primary'|'secondary'|'tertiary'|'warning'|'danger' | primary |
theme | 视觉变体 | 'solid'|'borderless'|'light'|'outline' | light |
size | 尺寸三档 | 'small'|'default'|'large' | default |
iconPosition | 图标相对文字位置（透传给 Button） | 'left'|'right' | left |
iconSize | 图标尺寸（作用在图标元素上，对齐 Semi） | 'inherit'|'extra-small'|'small'|'default'|'large'|'extra-large' | undefined |
iconStyle | 图标内联样式（作用在图标元素上，对齐 Semi） | string | undefined |
circle | 圆形按钮（复用 Button circle） | boolean | false |
disabled | 禁用 | boolean | false |
loading | 加载态（spin 图标替换） | boolean | false |
colorful | AI 多彩 | boolean | false |
block | 撑满容器宽度 | boolean | false |
noHorizontalPadding | 去水平内边距（仅 icon 时有效） | boolean|'left'|'right'|('left'|'right')[] | false |
htmlType | 原生 type | 'button'|'submit'|'reset' | button |
contentClassName | 内容区自定义类名（透传给 Button） | string | undefined |
class | 根元素自定义类名 | string | undefined |
style | 根元素自定义内联样式 | string | undefined |
Events
| 事件 | 载荷 | 说明 |
|---|---|---|
onclick | MouseEvent | disabled/loading 时不触发 |
onmousedown | MouseEvent | 鼠标按下 |
onmouseenter | MouseEvent | 鼠标移入 |
onmouseleave | MouseEvent | 鼠标移出 |
Slots
| 名称 | 说明 |
|---|---|
icon | 图标内容（也可用 icon prop） |
children | 文字内容（提供后非纯图标） |
Accessibility
| ARIA role | button |
| 键盘交互 | EnterSpace |
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-width-icon-extra-large | 24px | icon · 宽度特大尺寸 |
--cd-width-icon-extra-small | 8px | icon · 宽度特小尺寸 |
--cd-width-icon-large | 20px | icon · 宽度大尺寸 |
--cd-width-icon-medium | 16px | icon · 宽度medium |
--cd-width-icon-small | 12px | icon · 宽度小尺寸 |