DynamicIcon 组件
动态图标渲染组件，支持所有 Lucide React 图标和 Emoji。
功能特性
- ✅ 支持所有 Lucide React 图标（1000+ 个）
- ✅ 支持 Emoji 表情
- ✅ 自动识别图标类型
- ✅ 支持自定义默认图标
- ✅ 完整的 TypeScript 类型支持
使用方法
基础用法
import DynamicIcon from '@/components/DynamicIcon';
// 使用 Lucide 图标名称
<DynamicIcon name="Calendar" className="h-4 w-4" />
<DynamicIcon name="Database" className="h-5 w-5" />
// 使用 Emoji
<DynamicIcon name="📅" />
<DynamicIcon name="💾" />
自定义默认图标
import DynamicIcon from '@/components/DynamicIcon';
import { Star } from 'lucide-react';
// 当图标不存在时显示 Star
<DynamicIcon name="NonExistent" fallback={Star} className="h-4 w-4" />
Props
| 属性 |
类型 |
默认值 |
说明 |
| name |
string |
- |
图标名称（Lucide 图标名或 Emoji） |
| fallback |
LucideIcon |
FolderKanban |
默认图标组件 |
| className |
string |
"h-4 w-4" |
CSS 类名 |
| ...其他 |
LucideProps |
- |
其他 Lucide 图标属性 |
示例
在表格中显示图标
<TableCell>
{record.icon ? (
<div className="flex items-center justify-center">
<DynamicIcon name={record.icon} className="h-5 w-5" />
</div>
) : (
<span className="text-muted-foreground">-</span>
)}
</TableCell>
在按钮中显示图标
<Button>
<DynamicIcon name="Calendar" className="h-4 w-4 mr-2" />
选择日期
</Button>
注意事项
- 图标名称必须与 Lucide React 的图标名称完全匹配（区分大小写）
- 查看所有可用图标：https://lucide.dev/icons
- Emoji 会自动以
text-lg 大小渲染
