# LucideIconSelect 组件

Lucide React 图标选择器组件，提供可视化的图标选择界面。

## 功能特性

- ✅ 支持所有 Lucide React 图标（1000+ 个）
- ✅ 搜索功能
- ✅ 分类浏览（12 个常用分类）
- ✅ 实时预览
- ✅ 响应式设计
- ✅ 完整的 TypeScript 类型支持

## 使用方法

### 基础用法

```tsx
import { useState } from 'react';
import LucideIconSelect from '@/components/LucideIconSelect';

function MyComponent() {
  const [iconName, setIconName] = useState('');
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>
        选择图标
      </button>
      
      <LucideIconSelect
        open={open}
        onOpenChange={setOpen}
        value={iconName}
        onChange={setIconName}
      />
    </>
  );
}
```

### 在表单中使用

```tsx
import { useForm } from 'react-hook-form';
import LucideIconSelect from '@/components/LucideIconSelect';
import DynamicIcon from '@/components/DynamicIcon';

function FormExample() {
  const [iconSelectOpen, setIconSelectOpen] = useState(false);
  const form = useForm();

  return (
    <FormField
      control={form.control}
      name="icon"
      render={({ field }) => (
        <FormItem>
          <FormLabel>图标</FormLabel>
          <FormControl>
            <div className="flex items-center gap-2">
              <Input 
                placeholder="点击选择图标" 
                value={field.value}
                readOnly
                onClick={() => setIconSelectOpen(true)}
                className="cursor-pointer"
              />
              {field.value && (
                <div className="flex items-center justify-center w-10 h-10 border rounded-md">
                  <DynamicIcon name={field.value} className="h-5 w-5" />
                </div>
              )}
            </div>
          </FormControl>
          <LucideIconSelect
            open={iconSelectOpen}
            onOpenChange={setIconSelectOpen}
            value={field.value}
            onChange={field.onChange}
          />
        </FormItem>
      )}
    />
  );
}
```

### Props

| 属性 | 类型 | 必填 | 说明 |
|------|------|------|------|
| value | string | 否 | 当前选中的图标名称 |
| onChange | (iconName: string) => void | 否 | 图标变化回调 |
| open | boolean | 是 | 是否显示弹窗 |
| onOpenChange | (open: boolean) => void | 是 | 关闭弹窗回调 |

## 图标分类

组件内置了以下分类：

- **常用** - 常用业务图标
- **文件与文档** - 文件相关图标
- **用户与团队** - 用户管理图标
- **开发与代码** - 开发工具图标
- **数据与存储** - 数据库、存储图标
- **网络与服务** - 网络、服务器图标
- **时间与日历** - 时间、日期图标
- **操作与控制** - 操作按钮图标
- **通知与提醒** - 通知相关图标
- **编辑与格式** - 编辑工具图标
- **导航与箭头** - 导航、箭头图标
- **状态与标记** - 状态指示图标

## 自定义配置

如需添加或修改分类，可编辑 `src/config/lucideIcons.ts` 文件：

```ts
export const ICON_CATEGORIES = {
  '自定义分类': [
    'Icon1', 'Icon2', 'Icon3'
  ],
  // ... 其他分类
};
```

## 示例截图

选择器提供：
- 🔍 搜索框 - 快速查找图标
- 📑 分类标签 - 按类别浏览
- 🎨 图标网格 - 可视化选择
- ✅ 当前选中 - 实时预览

## 相关组件

配合 `DynamicIcon` 组件使用效果更佳：

```tsx
import DynamicIcon from '@/components/DynamicIcon';
import LucideIconSelect from '@/components/LucideIconSelect';
```

