@applaudem/icon-selector-dialog NPM

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

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

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)