# DynamicIcon 组件

动态图标渲染组件，支持所有 Lucide React 图标和 Emoji。

## 功能特性

- ✅ 支持所有 Lucide React 图标（1000+ 个）
- ✅ 支持 Emoji 表情
- ✅ 自动识别图标类型
- ✅ 支持自定义默认图标
- ✅ 完整的 TypeScript 类型支持

## 使用方法

### 基础用法

```tsx
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="💾" />
```

### 自定义默认图标

```tsx
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 图标属性 |

## 示例

### 在表格中显示图标

```tsx
<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>
```

### 在按钮中显示图标

```tsx
<Button>
  <DynamicIcon name="Calendar" className="h-4 w-4 mr-2" />
  选择日期
</Button>
```

## 注意事项

1. 图标名称必须与 Lucide React 的图标名称完全匹配（区分大小写）
2. 查看所有可用图标：https://lucide.dev/icons
3. Emoji 会自动以 `text-lg` 大小渲染

