Icon 图标
原创线性图标集，按名渲染内联 SVG，tree-shakable。
用法
常用图标
尺寸与颜色
尺寸与颜色
无障碍名称
设置 label 后图标对屏幕阅读器暴露可读名称。
带标签图标
旋转动画
spin 属性让图标无限旋转（适合 loading 场景）；rotate 按角度静态旋转；flip 镜像翻转（可与 rotate 叠加）。
spin 旋转
rotate 角度旋转
flip 翻转
自定义图标
四条通道（按使用场景选）：
- slot：直接在标签内放内联
<svg>，优先级高于name——一次性单点自定义 src：远程/本地 SVG URL，fetch 加载内联渲染（颜色跟随color/currentColor）——自有 SVG 文件资源registerIcon(name, svg)：注册后直接用name引用（同名覆盖内置）——应用级自定义图标集的正路registerIconLibrary：整套远程图标库接入（resolver → URL 按需 fetch，支持 sprite）——接入外部图标库
⚠️ 内置图标集为 opt-in：全量引入
@oas-ui/ui已自动注册；按需引入单组件时若使用内置图标名（<oas-icon name="close">等）需import '@oas-ui/icons/register'一次。不要直接改内置图标数据（@oas-ui/icons/registry导出的内部结构，无覆盖/清理语义）；正路是registerIcon()/registerIconLibrary()（官方 API、纯函数、SSR 安全）。想要「零内联税 + 图名开箱即用」？用
registerIconLibrary(name, { resolver, spriteSheet })接入远程 / sprite 图标库——图标以<use>引用或按需 fetch，不内联进包（详见下「远程图标库」）；或用registerIcon(name, svg)自带一套图标。
src 加载 SVG
slot 内联 SVG（优先于 name）
图标库注册
registerIcon(name, svg) 可注册自定义图标，之后直接用 name 引用（同名会覆盖内置图标）。
registerIcon 注册自定义图标
远程图标库
registerIconLibrary(name, { resolver, mutator, spriteSheet }) 注册远程图标库： resolver 把图标名解析为 SVG URL，组件按需 fetch 加载内联渲染（颜色跟随 color/currentColor）； mutator 在内联后调整 SVG（如描边图标补 stroke="currentColor"）； spriteSheet 模式渲染 <use href="url#name">，不内联整 SVG。
CDN 图标库（Lucide via jsDelivr，mutator 补描边）
sprite 表（本地，<use> 引用）
family 变体（本地 demo-set）
variant 变体（如粗细）
图标字体（iconfont）
iconfont-url 注入 iconfont 项目脚本（symbol sprite JS）：组件按需插入 <script>、同一 URL 去重，加载完成后自动刷新所有使用方，并把项目脚本注入的 <symbol> 内容内联渲染到组件（Shadow DOM 内 #fragment 无法跨树引用，故不使用 <use>）。
registerIconAlias(alias, target) 注册别名（含前缀别名）把短名映射到项目符号名：registerIconAlias('i-', 'icon-') 后 name="i-star" 解析为 icon-star。
iconfont 项目脚本 + 别名前缀
动画预设
animation 属性提供一组开箱即用的动画（尊重 prefers-reduced-motion，系统减弱动态时自动停用）。
动画预设
双色图标
duotone 把图标分层着色：data-layer="primary" / data-layer="secondary"（或前两个图形元素）分别用 --oas-icon-primary-color / --oas-icon-secondary-color 上色，透明度默认 primary 1 / secondary 0.4（变量可在宿主覆盖）。swap-opacity 交换两层透明度。内置图标为单色，主要配合自定义双层 SVG 使用。
duotone 双色
占位框模式
canvas 控制图标占位框尺寸：fixed（1.25×1em）/ auto（自然宽 × 1em）/ square（1.25×1.25em）/ roomy（1.5×1.5em）；显式设置 size 优先。
canvas 占位框模式
透明度层级
depth 控制透明度层级（1=100% … 5=20%），常用于批量图标营造层次感。
depth 透明度层级
按需引入
import { checkPath } from '@oas-ui/icons'
import { registerIcon } from '@oas-ui/ui'
registerIcon('my-icon', '<path d="..."/>')图标一览
全部图标（点击复制名称）
API
oas-icon
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
animation | 动画预设：spin / spin-pulse / spin-reverse / spin-snap / beat / fade / beat-fade / bounce / shake / swing / wag / buzz / float / jello（尊重 prefers-reduced-motion） | string | — |
canvas | 占位框模式：fixed（默认 1.25×1em）/ auto（自然宽 × 1em）/ square（1.25×1.25em）/ roomy（1.5×1.5em） | string | — |
color | 颜色（CSS 色值） | string | — |
depth | 透明度层级：1（100%）~ 5（20%），用于批量图标营造层次感 | string | — |
duotone | 双色图标：分层着色（--oas-icon-primary-color / --oas-icon-secondary-color + 透明度），主要配合自定义双层 SVG | boolean | — |
family | 图标族（传给库 resolver 的 family 参数，如描边/实心） | string | — |
flip | 翻转：镜像（x / y / both 轴），可与 rotate 组合 | string | — |
iconfont-url | 远程 iconfont 项目脚本地址：按需注入、同 URL 去重，加载后刷新使用方并内联 symbol 内容 | string | — |
label | 可读名称；设置后 role="img" | string | — |
library | 远程图标库名（registerIconLibrary 注册的库），优先于 name 内置图标 | string | — |
name | 图标名（kebab-case） | string | — |
rotate | 角度旋转：任意角度（rotate="45" 度数） | string | — |
size | 尺寸（px 或 em） | string | — |
spin | 旋转动画：无限旋转（loading 场景） | boolean | — |
src | 自定义图标地址：远程/本地 SVG URL，fetch 加载内联渲染（颜色跟随 color / currentColor） | string | — |
swap-opacity | 交换双色图标的 primary / secondary 透明度 | boolean | — |
variant | 图标变体（传给库 resolver 的 variant 参数，如粗细） | string | — |
插槽
| 名称 | 说明 |
|---|---|
| 默认 | 自定义图标内容（替代 name 内置图标） |
CSS 变量
| CSS 变量 | 默认值 |
|---|---|
--oas-icon-primary-color | currentColor |
--oas-icon-primary-opacity | 1 |
--oas-icon-secondary-color | currentColor |
--oas-icon-secondary-opacity | 0.4 |
图标名一览：alert-circle arrow-down arrow-left arrow-right arrow-up calendar check-circle check chevron-down chevron-left chevron-right chevron-up clock close-circle close copy download edit error external-link eye filter form gear heart info language loading lock mail menu minus more-vertical more organization plus refresh search sort star-filled star translate trash tree upload user warning。