@mindinventory/mi-react-icon-picker

mi-react-icon-picker

A React component library for selecting icons, compatible with Font Awesome 6.6.0.

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 and its associated CSS.

import IconPicker from "@mindinventory/mi-react-icon-picker";
import '@mindinventory/mi-react-icon-picker/lib/iconpicker.css';

Usage

Basic Example

You can provide a custom set of Font Awesome icons organized by categories.

    const icons = {
        Brands: [
            'fa-brands fa-500px',
            'fa-brands fa-amazon',
        ],
        Currency: [
        'fa-cny',
        'fa-dollar-sign',
        ],
    };

    <IconPicker
        icons={icons}
        value='fa-brands fa-amazon'
        onChange={(e) => onChange(e, 'icon')}
        closeOnSelect={true}
        showCategory={true}
        showSearch={true}
        isMulti={false}
        adjustPosition={{ top: 10, left: 0 }}
        buttonStyle='flex items-center justify-center min-h-[35px] min-w-[35px] rounded-l-[8px] border border-none'
        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}
    />

Using Pre-defined Icons

Alternatively, you can import a set of pre-defined Font Awesome icons from the package.

    
import icons from '@mindinventory/mi-react-icon-picker/lib/icons.js';

<IconPicker
    icons={icons}
        value='fa-brands fa-amazon'
        onChange={(e) => onChange(e, 'icon')}
        closeOnSelect={true}
        showCategory={true}
        showSearch={true}
        isMulti={false}
        adjustPosition={{ top: 10, left: 0 }}
        buttonStyle='flex items-center justify-center min-h-[35px] min-w-[35px] rounded-l-[8px] border border-none'
        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:

• icons: Object - An object containing categories of Font Awesome icons.
• 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).
• showCategory: Boolean - Whether to display icon categories (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).