Giao diện
IconPicker — Chọn icon đa thư viện
Trường IconPicker dùng khi cấu hình giao diện cần chọn một icon (ví dụ icon menu, block, trường biểu mẫu). Bạn có thể chọn từ hơn 27 bộ icon (Ant Design, FontAwesome, Material, Lucide, Heroicons, …), tìm theo tên trên kho lớn (khoảng 48 000 tên), và mỗi bộ chỉ tải khi bạn mở tab tương ứng — giao diện chọn icon mở nhanh hơn.
Cách dùng trên giao diện
- Nhấn vào ô chọn icon — cửa sổ hiện ra.
- Chọn tab bộ icon — nội dung bộ đó được tải khi bạn vào tab lần đầu.
- Tìm kiếm: gõ một phần tên để lọc trên toàn bộ kho, không phụ thuộc tab đang mở.
- Chọn một icon — hệ thống lưu tên icon (chuỗi ký tự), ví dụ
LuActivity,MdOutlineEmail.
Props (tích hợp form)
typescript
interface IconPickerProps {
value?: string;
onChange?: (value: string) => void;
disabled?: boolean;
suffix?: React.ReactNode;
iconSize?: number;
searchable?: boolean;
children?: React.ReactNode;
}Các bộ icon trong tab
| Tab (tên hiển thị) | Tiền tố thường gặp trong tên |
|---|---|
| Ant Design | (không có tiền tố — tên thường kết thúc bằng Outlined / Filled / TwoTone) |
| Bootstrap | Bs |
| Boxicons | Bi |
| Circum | Ci |
| CSS.gg | Cg |
| Devicons | Di |
| Feather | Fi |
| Flat Color | Fc |
| FontAwesome | Fa |
| Game Icons | Gi |
| Github Octicons | Go |
| Heroicons | Hi |
| IcoMoon Free | Im |
| Ionicons | Io |
| Lucide | Lu |
| Material Design | Md |
| Phosphor | Pi |
| Radix | Rx |
| Remix | Ri |
| Simple Icons | Si |
| Simple Line Icons | Sl |
| Tabler | Tb |
| Themify | Tfi |
| Typicons | Ti |
| VS Code | Vsc |
| Weather | Wi |
Một số tab có thêm lọc kiểu (Outlined / Filled, đường nét / đặc, …) dưới dạng nút chọn trong cùng tab.
Tìm kiếm và tốc độ
Ô tìm kiếm dùng một danh sách tên (đã chuẩn bị sẵn, rất nhiều icon), nên kết quả có thể gồm nhiều bộ khác nhau cùng lúc. Mỗi tab chỉ tải bộ icon khi bạn mở tab đó — không cần tải hết ngay từ đầu.
Đọc tên icon đã chọn
Tên thường bắt đầu bằng tiền tố của bộ, ví dụ LuActivity (Lucide), FaRegUser (FontAwesome), MdOutlineEmail (Material). Hệ thống dùng tiền tố để hiển thị đúng bộ icon.
Ant Design
Icon Ant Design không dùng tiền tố mà phân biệt qua hậu tố: SearchOutlined, SearchFilled, SearchTwoTone.