图标
NetNexus UI 提供 43 个基于 @lucide/vue 的适配图标。公开名称使用 *Outlined 形式，推荐从 netnexus-ui/icons 具名导入。
基础用法
vue
<script setup>
import { DeleteOutlined, LoadingOutlined, SaveOutlined } from 'netnexus-ui/icons';
import 'netnexus-ui/icons.css';
</script>
<template>
<SaveOutlined />
<DeleteOutlined :size="20" :stroke-width="1.5" class="danger-icon" />
<LoadingOutlined spin aria-label="正在加载" role="img" />
</template>
<style scoped>
.danger-icon {
color: #ff4d4f;
}
</style>若应用已经引入 netnexus-ui/style.css，不需要再引入 icons.css。
在按钮中使用
图标组件不会随 app.use(NetNexusUi) 自动全局注册，需要在使用它的单文件组件中显式导入。
vue
<script setup>
import { NnButton } from 'netnexus-ui/components';
import { SaveOutlined } from 'netnexus-ui/icons';
import 'netnexus-ui/style.css';
</script>
<template>
<NnButton type="primary">
<template #icon>
<SaveOutlined />
</template>
保存
</NnButton>
</template>属性与透传
适配层会处理以下属性，其余 attribute 和事件会继续传给底层 Lucide 组件：
| 属性 | 默认值 | 说明 |
|---|---|---|
size | 1em | 图标尺寸，可传数字或 CSS 尺寸字符串 |
strokeWidth | 2 | SVG 描边宽度；模板中可写 stroke-width |
spin | 未启用 | 真值会添加 .nn-icon-spin，使用 1 秒线性无限旋转动画 |
class | 无 | 与内置 .nn-icon、可选 .nn-icon-spin 合并 |
aria-label | 无 | 存在时不会自动写 aria-hidden="true" |
图标颜色使用 currentColor，通常只需设置父元素或图标本身的 color。
vue
<script setup>
import { InfoCircleOutlined } from 'netnexus-ui/icons';
function openHelp() {
console.log('打开帮助');
}
</script>
<template>
<InfoCircleOutlined size="1.25rem" color="currentColor" aria-label="帮助信息" role="img" @click="openHelp" />
</template>无障碍
- 没有
aria-label时，适配层自动设置aria-hidden="true"，适合按钮文字旁的装饰图标。 - 图标本身承载含义时，应同时提供可理解的
aria-label，并建议增加role="img"。 - 只有图标的按钮仍应把可访问名称放在按钮上，例如
<NnButton aria-label="保存">。注意：组件是否透传该属性应以对应组件参考和实现为准。 spin没有内置的prefers-reduced-motion处理。应用可以按自身无障碍策略覆盖动画：
css
@media (prefers-reduced-motion: reduce) {
.nn-icon-spin {
animation: none;
}
}完整图标清单
“底层 Lucide 图标”用于说明当前映射，不是额外的 NetNexus UI 导出。
| NetNexus UI 导出 | 底层 Lucide 图标 |
|---|---|
ApiOutlined | Network |
AppstoreOutlined | LayoutGrid，运行时保留 AppWindow 回退 |
BellOutlined | Bell |
CheckCircleOutlined | CheckCircle |
ClockCircleOutlined | Clock |
CloudDownloadOutlined | CloudDownload |
CloudServerOutlined | Server |
CloudUploadOutlined | UploadCloud |
ClusterOutlined | ChartNetwork |
CodeOutlined | Code |
CopyOutlined | Copy |
DatabaseOutlined | Database |
DeleteOutlined | Trash2 |
DownloadOutlined | Download |
EditOutlined | Edit |
ExclamationCircleOutlined | CircleAlert |
EyeOutlined | Eye |
ExternalLinkOutlined | ExternalLink |
FileSearchOutlined | FileSearch |
FileTextOutlined | FileText |
FolderOpenOutlined | FolderOpen |
FolderOutlined | Folder |
ImportOutlined | Import |
InfoCircleOutlined | Info |
KeyOutlined | KeyRound |
LoadingOutlined | LoaderCircle |
MenuFoldOutlined | PanelLeftClose |
MenuUnfoldOutlined | PanelLeftOpen |
PlusOutlined | Plus |
ProfileOutlined | FileText |
ReloadOutlined | RefreshCw |
RouteOutlined | Route |
SafetyOutlined | Shield |
SaveOutlined | Save |
SearchOutlined | Search |
SendOutlined | Send |
SettingOutlined | Settings |
StepForwardOutlined | StepForward |
SwapOutlined | Repeat |
ToolOutlined | Wrench |
UnorderedListOutlined | List |
UploadOutlined | Upload |
WifiOutlined | Wifi |
也可以从根入口导入同名图标：
js
import { SearchOutlined } from 'netnexus-ui';使用 netnexus-ui/icons 可以更清楚地表达依赖范围。当前包只公开上表中的适配图标，不会转发 @lucide/vue 的完整导出。
已知边界
- 图标类型声明当前是通用 Vue
Component，不会为size、strokeWidth、spin等属性提供精确自动补全。 ProfileOutlined和FileTextOutlined当前都映射到FileText，不是两种不同图形。- 图标不是插件注册表中的组件，必须局部导入或由应用自行注册。
icons.css只包含基础布局和旋转动画；颜色、间距、交互状态由使用场景决定。