deploy-ease-platform/frontend/src/components/LucideIconSelect

LucideIconSelect 组件

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

功能特性

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

使用方法

基础用法

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}
      />
    </>
  );
}

在表单中使用

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 文件：

export const ICON_CATEGORIES: Record<string, IconCategory> = {
  'custom': {
    name: '自定义分类',
    icon: 'Star',  // 分类的代表性图标
    icons: [
      'Icon1', 'Icon2', 'Icon3'
    ]
  },
  // ... 其他分类
};

示例截图

选择器提供：

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

相关组件

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

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