@mindinventory/mi-react-icon-picker

mi-react-icon-picker

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

Installation

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

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

Importing the Component

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

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

Usage

Basic Example

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