Icon 图标
语义化的矢量图形。
基础用法
使用 name 属性来指定图标。
基础用法
不同尺寸
可以通过 size 属性来控制图标大小。支持数字（像素）和字符串（CSS 单位）。
不同尺寸
旋转动画
使用 spin 属性可以让图标旋转起来，常用于加载状态。
旋转动画
自定义 SVG
支持通过 svg 属性直接传入 SVG 的 path 内容或者使用默认插槽。
自定义 SVG
在 Nuxt 中使用
Icon 组件在 Nuxt 3/4 中集成非常简单。由于 Icon 底层基于轻量的内联 SVG 渲染，SSR 阶段即可生成完整的矢量图形代码。
Nuxt 中使用
SSR 注意事项：
- ✅ 内置图标在服务端直接渲染为精简的 SVG 路径，无首屏网络请求
- ✅ 尺寸 (size) 和颜色 (color) 通过内联样式在服务端正确定位
- ✅ 加载动画 (spin) 通过 CSS 动画在服务端即保持运动状态（或首屏即准备就绪）
- ✅ 自动导入支持，提升开发效率
矢量优势
相比于字体图标（Icon Font），YH-UI 的 SVG Icon 方案更符合现代 Web 标准，且能完美避开 SSR 中常见的字体加载闪烁（FOIT/FOUT）问题。
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| name | 图标名称（内置图标集） | string | — |
| svg | 自定义 SVG 内容 (不含 <svg> 标签) | string | — |
| size | 图标尺寸 | number | string | — |
| color | 图标颜色 | string | currentColor |
| spin | 是否循环旋转 | boolean | false |
| rotate | 旋转角度 | number | 0 |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 自定义 SVG 内容 |