@applaudem/icon-selector-dialog/README.md

A searchable icon selector dialog component for React with Material-UI and Iconify

# Icon Selector Dialog

A searchable icon selector dialog component for React with Material-UI and Iconify integration. Uses Dutch interface by default.

## Features

- 🔍 Search across multiple icon sets
- 📂 Category-based browsing
- ⌨️ Keyboard shortcuts for quick search
- 🔄 Debounced search with async processing
- 🎨 Material-UI theming support
- 📱 Responsive design
- 💪 TypeScript support

## Supported Icon Sets

This component includes the following icon sets out of the box:
- Material Design Icons
- Font Awesome
- Line Awesome
- Heroicons
- Feather Icons
- Phosphor Icons
- Carbon Icons

## Installation

```bash
npm install @applaudem/icon-selector-dialog
```

## Dependencies

This component requires the following peer dependencies:
- React (^18.2.0)
- Material-UI (@mui/material ^5.15.11)
- React DOM (^18.2.0)
- @emotion/react (^11.11.3)
- @emotion/styled (^11.11.0)

The following dependencies will be installed automatically:
- @iconify/react (^4.1.1)
- @mui/icons-material (^5.15.11)

## Usage

```jsx
import IconSelector from '@applaudem/icon-selector-dialog';

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedIcon, setSelectedIcon] = useState('');

  return (
    <>
      <button onClick={() => setIsOpen(true)}>
        Select Icon
      </button>

      <IconSelector
        open={isOpen}
        onClose={() => setIsOpen(false)}
        onSelect={(iconName) => {
          setSelectedIcon(iconName);
          setIsOpen(false);
        }}
        currentIcon={selectedIcon}
      />
    </>
  );
}
```

## Props

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| open | boolean | Yes | Controls the visibility of the dialog |
| onClose | () => void | Yes | Callback function when the dialog is closed |
| onSelect | (iconName: string) => void | Yes | Callback function when an icon is selected |
| currentIcon | string | No | Currently selected icon name (for highlighting) |

## Features in Detail

### Search Functionality
- Real-time search across all icon sets
- Debounced search to prevent UI blocking
- Shows icon set information in search results
- Clear search button

### Keyboard Support
- Auto-focus search input when dialog opens
- Keyboard navigation support
- Escape key to close dialog

### Category Management
- Icons organized by categories
- "Other" category automatically placed at the bottom
- Disabled category selection during search

### UI/UX Features
- Loading states with progress indicators
- Responsive grid layout
- Icon preview with names
- Hover and selection states
- Clear visual hierarchy
- Dutch interface

## License

MIT © Applaudem