图标

在线示例：/design-system/icons。

图标来源

图标统一用 lucide-react（已在依赖里），不要混用多套图标库， 也不要在业务代码里手写 SVG（除图表这类自绘图形）。

import { CalendarDays, Search } from 'lucide-react'

<CalendarDays className="size-4" aria-hidden="true" />
<Button><Search aria-hidden="true" />搜索</Button>

约定：

• 装饰性图标一律 aria-hidden="true"；
• 只用图标表达的按钮必须给 aria-label（例如 <Button size="icon" aria-label="删除"><Trash2 aria-hidden="true" /></Button>）；
• 尺寸用 size-4 / size-3.5 这类工具类，不要写 w-4 h-4；
• 图标颜色跟随文字（currentColor），不要单独写颜色。

图标预览页

/design-system/icons 加载 lucide 的全部图标，支持：

• 关键字搜索（按组件名，例如 Arrow、Chart）；
• 分页浏览（每页 96 个）；
• 点击任意图标复制组件名，方便直接粘到代码里；
• 底部的导入语句复制按钮。

按需加载，不膨胀主包

import { DynamicIcon, dynamicIconImports } from 'lucide-react/dynamic'

const all = Object.keys(dynamicIconImports)   // 2000+ 图标名（kebab-case）

<DynamicIcon name="calendar-days" className="size-5" aria-hidden="true" />

预览页用动态入口，只有可视区用到的图标包会被加载，避免把全量图标打进主包。 业务代码仍然按需具名导入：import { Search } from 'lucide-react'， 动态入口只用于"要枚举全部图标"的场景（图标选择器、图标预览）。

命名换算

dynamicIconImports 的键是 kebab-case（arrow-down-0-1），组件名是 PascalCase（ArrowDown01）。 预览页里存了两种形式并以此展示，复制的是组件名。注意形如 arrow-down-0-1 与 arrow-down-01 会映射到同一个组件名，列表的 key 用 kebab 名而不是组件名，否则会有重复 key。