New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

@mindinventory/mi-react-icon-picker

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@mindinventory/mi-react-icon-picker

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


Version published
Weekly downloads
52
increased by57.58%
Maintainers
0
Weekly downloads
 
Created

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

FAQs

Package last updated on 25 Dec 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts