Icon 图标
原创线性图标集，按名渲染内联 SVG，tree-shakable。
用法
常用图标
尺寸与颜色
尺寸与颜色
无障碍名称
设置 label 后图标对屏幕阅读器暴露可读名称。
带标签图标
旋转动画
spin 属性让图标无限旋转（适合 loading 场景）；rotate 按角度静态旋转；flip 镜像翻转（可与 rotate 叠加）。
spin 旋转
rotate 角度旋转
flip 翻转
自定义图标
src：远程/本地 SVG URL，fetch 加载内联渲染（颜色跟随color/currentColor）- slot：直接在标签内放内联
<svg>，优先级高于name
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 变体（如粗细）
动画预设
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
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
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 | — |
label | 可读名称；设置后 role="img" | string | — |
library | 远程图标库名（registerIconLibrary 注册的库），优先于 name 内置注册表 | string | — |
name | 图标名（kebab-case） | IconName | — |
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 | — |
插槽
| 名称 | 说明 |
|---|---|
| 默认 | — |
图标名一览：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 gear heart info loading lock mail menu minus more-vertical more plus refresh search sort star-filled star trash upload user warning。