@mohsin-mi/iconpicker v1.0.47
Usage Example.
Note: This IconPicker uses Font Awesome 6.6.0.
Install IconPicker
package
npm i @mohsin-mi/iconpicker
Import IconPicker
and IconPicker.css
import IconPicker from "@mohsin-mi/iconpicker";
import '@mohsin-mi/iconpicker/lib/iconpicker.css';
Use the IconPicker
component, and pass fontawesome icons
as an object with whatever the category names you want.
const icons = {
Brands: [
'fa-brands fa-500px',
'fa-brands fa-amazon',
],
Currency: [
'fa-cny',
'fa-dollar-sign',
],
};
Alternatively, you can import some pre-defined Icons from the package.
import icons from '@mohsin-mi/iconpicker/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}
/>
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago