icons

# 图标 **始终使用项目配置的 `iconLibrary` 进行导入。** 检查项目上下文中的 `iconLibrary` 字段：`lucide` → `lucide-react`, `tabler` → `@tabler/icons-react` 等。切勿假设使用 `lucide-react`。 --- ## 按钮中的图标使用 data-icon 属性 将 `data-icon="inline-start"` (前缀) 或 `data-icon="inline-end"` (后缀) 添加到图标上。图标上不要使用尺寸类。 **错误：** tsx Search **正确：** tsx Search Next --- ## 组件内的图标不要使用尺寸类 组件通过 CSS 处理图标尺寸。不要在 `Button`, `DropdownMenuItem`, `Alert`, `Sidebar*` 或其他 shadcn 组件内的图标上添加 `size-4`, `w-4 h-4` 或其他尺寸类。除非用户明确要求自定义图标尺寸。 **错误：** tsx Search Settings **正确：** tsx Search Settings --- ## 将图标作为组件对象传递，而不是字符串键 使用 `icon={CheckIcon}`，而不是查找映射的字符串键。 **错误：** tsx const iconMap = { check: CheckIcon, alert: AlertIcon, } function StatusBadge({ icon }: { icon: string }) { const Icon = iconMap[icon] return } **正确：** tsx // 从项目配置的 iconLibrary (例如 lucide-react, @tabler/icons-react) 导入。 import { CheckIcon } from "lucide-react" function StatusBadge({ icon: Icon }: { icon: React.ComponentType }) { return }