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

$3

`jsx
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`).