图标
@astryxdesign/core v0.7.1 · Icon
属性
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
name | string | — | Iconify 的 id，格式是 集合:图标。carbon 集合注册之后，carbon-settings 与 carbon:settings 相同。集合名里带连字符时请保留冒号。 |
icon | string | Component | — | 语义名、CSS 图标类，或你自己的组件。语义名由最近的主题换成 Iconify id；该图标尚未注册时用内置字形。设置了 name 时忽略它。 |
color | 'inherit' | 'primary' | 'secondary' | 'tertiary' | 'disabled' | 'accent' | 'success' | 'error' | 'warning' | 'blue' | 'cyan' | 'green' | 'gray' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'yellow' | 'inherit' | 决定图标里 currentColor 解析成哪种颜色。inherit 保持周围文字的颜色。 |
size | 'xsm' | 'sm' | 'md' | 'lg' | — | 根字号 16px 时分别是 12px、16px、20px、24px。不传时，name 图标是 1em。其他图标在没有父级尺寸时回退到 md。 |
label | string | — | 有含义的图标的无障碍名称。会设置 role="img" 和 aria-label。装饰性图标省略它，保持 aria-hidden="true"。空字符串仍按装饰处理。 |
插槽
- 默认插槽：内联 SVG。在既没有
name也没有icon时使用。
注册
| 名称 | 来自 | 说明 |
|---|---|---|
astryxIcons() | @astryx-vue/core/icons | Vite 插件。扫描静态名字，只从已安装的 @iconify-json/* 打包这些图标。用 collections 限制读取哪些前缀。 |
addIcon(name, data) | @astryx-vue/core/Icon | 注册一枚图标。name 是 集合:图标。data.body 是 SVG 内部标记。 |
addCollection(collection) | @astryx-vue/core/Icon | 注册一份 @iconify-json 文档。整套集合都会进入包。 |
语义名
defineTheme({ icons }) 按名字覆盖。和被扩展的主题浅合并，当前这份优先。没写到的名字保持默认 id。集合要已经注册，否则仍画内置字形。
| 名字 | 默认 Iconify id |
|---|---|
close | lucide:x |
chevronDown | lucide:chevron-down |
chevronLeft | lucide:chevron-left |
chevronRight | lucide:chevron-right |
chevronsLeft | lucide:chevrons-left |
chevronsRight | lucide:chevrons-right |
check | lucide:check |
success | lucide:circle-check |
error | lucide:circle-x |
warning | lucide:triangle-alert |
info | lucide:info |
calendar | lucide:calendar |
clock | lucide:clock |
externalLink | lucide:external-link |
menu | lucide:menu |
moreHorizontal | lucide:ellipsis |
search | lucide:search |
upload | lucide:upload |
arrowUp | lucide:arrow-up |
arrowDown | lucide:arrow-down |
arrowsUpDown | lucide:arrow-up-down |
funnel | lucide:funnel |
eyeSlash | lucide:eye-off |
viewColumns | lucide:columns-3 |
copy | lucide:copy |
checkDouble | lucide:check-check |
wrench | lucide:wrench |
stop | lucide:square |
microphone | lucide:mic |
image | lucide:image |
表里这些是共享名字，所有组件共用一套。IconRegistry 类型表示「每个共享名字都画了」的完整注册表，upload 也在必填之列。自己写一整套主题图标时，要给 upload 单独配一个上传图形，不能拿 arrowUp 顶替。换 upload 不会影响表格排序箭头或发送按钮用的 arrowUp。
只有某一个组件自己用的图标，不进共享名字，而是用带命名空间的键，写成 组件:用途，类型是 NamespacedIconName。现在有一个：
| 键 | 用在哪里 |
|---|---|
numberInput:stepperDown | NumberInput 的加减按钮。向下的小箭头，加号那一格把它翻过来用。 |
主题用同一个 icons 覆盖它：defineTheme({ icons: { 'numberInput:stepperDown': 'carbon:chevron-down' } })。不覆盖时用内置字形。加新的命名空间键不会让 IconRegistry 多出必填项。
useSemanticIcon(name) 从 @astryx-vue/core/Icon 引入，也从包根导出。未知字符串、主题也没有覆盖时，返回空，调用方可以继续把它当 CSS 类。
主题
颜色走图标令牌。主题在根上覆盖对应变量即可。
css
.my-theme {
--astryx-icon-accent-foreground: #0074e2;
}--astryx-icon-primary-foreground--astryx-icon-secondary-foreground--astryx-icon-disabled-foreground--astryx-icon-accent-foreground--astryx-icon-success-foreground--astryx-icon-error-foreground--astryx-icon-warning-foreground--astryx-icon-blue-foreground，cyan、green、gray、orange、pink、purple、red、teal、yellow 同样是这个形式。
无障碍
根元素是 <span>。没有 label 时为 aria-hidden="true"。label 非空时为 role="img"，这段文字就是无障碍名称。内部 SVG 始终 aria-hidden。
class 和 style 会落到根元素上。name 不会：它用来选择图标。