# mi-react-icon-picker

A React component library for selecting icons, compatible with icomoon.

## Installation

Install the `mi-react-icon-picker` package via npm:

```bash
npm i @mindinventory/mi-react-icon-picker
```

## Importing the Component

To use the IconPicker component, you need to import the component.

```bash
import IconPicker from "@mindinventory/mi-react-icon-picker";
```

## Usage

### Basic Example

```jsx
<IconPicker
  value="icon-home"
  onChange={(e) => onChange(e, "icon")}
  closeOnSelect={true}
  showSearch={true}
  isMulti={false}
  adjustPosition={{ top: 10, left: 0 }}
  buttonStyle="flex items-center justify-center h-[35px] w-[35px] rounded-[8px] border border-[#eaecf0]"
  noSelectedPlaceholder="arrow-up-from-bracket"
  zIndexPopup={9999}
  popupStyle="bg-white border border-gray-300 shadow-lg rounded popup-container min-w-[280px]"
  gridColumns={5}
  gridRows={4}
  iconBgColor="bg-gray-200"
  iconSelectedBgColor="bg-blue-200"
  iconHeight={65}
  iconWidth={65}
/>
```

# Props

Here are the available props for the `IconPicker` component:

- value: _String_ - The currently selected icon.
- onChange: _Function_ - Callback function triggered when an icon is selected.
- closeOnSelect: _Boolean_ - Whether to close the picker upon selection (default: `true`).
- showSearch: _Boolean_ - Whether to enable a search bar for filtering icons (default: `true`).
- isMulti: _Boolean_ - Allows multiple icon selection (default: `false`).
- adjustPosition: _Object_ - Adjust the position of the icon picker relative to the trigger element.
- buttonStyle: _String_ - Custom styles for the picker button.
- noSelectedPlaceholder: _String_ - Placeholder icon when no icon is selected.
- zIndexPopup: _Number_ - z-index value for the icon picker popup.
- popupStyle: _String_ - Custom styles for the picker popup container.
- gridColumns: _Number_ - Number of columns in the icon grid.
- gridRows: _Number_ - Number of rows in the icon grid.
- iconBgColor: _String_ - Background color for the icons.
- iconSelectedBgColor: _String_ - Background color for the selected icon.
- iconHeight: _Number_ - Height of the icons (default: `65px`).
- iconWidth: _Number_ - Width of the icons (default: `65px`).