@mindinventory/mi-react-icon-picker
v1.0.5
Published
A React component library for selecting icons, compatible with Font Awesome 6.6.0.
Downloads
39
Readme
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
).