@locaop/icon-picker NPM

@locaop/icon-picker

Overview

DEMO IMG

@locaop/icon-picker is a strongly typed React Icons picker for font-awesome icons. It contains both a picker component and an icon renderer.

Includes all icons: Font Awesome 5

Mainly includes social icons: Phosphor Icons

I feel like an icon picker is a pretty common requirement so I was surprised to find a lack of sufficient icon pickers in the React Ecosystem. The existing ones I found were not that great. As a result, I decided to roll my own.

Installation

Install via npm

npm i @locaop/icon-picker

or yarn

yarn add @locaop/icon-picker

Usage

The IconPicker component is just like any other picker component. The value prop is the icon that is displayed on the picker. When a new icon is selected, the onChange handler is fired.

import * as React from 'react'
import { IconPicker } from '@locaop/icon-picker'

export default () => {
  const [value, setValue] = useState("")
  return (
    <IconPicker value={value} onChange={(v) => setValue(v)} />
  )
}

You can also use the IconPickerItem component to render the icon. This uses react-icons under the hood.

import * as React from 'react'
import { IconPickerItem } from '@locaop/icon-picker'

export default () => (
  <IconPickerItem icon="FaAdobe" size={24} color="#000" />
  )

All valid configurations/props of the package

IconPicker

Prop	Type	Required	Description
value	string	true	The current font awesome icon displayed on the picker.
onChange	(v: string) => void	true	A change handler that is executed when a new icon is selected.
hideSearch	boolean	false	If true, the search input is not displayed. Default is false.
containerStyles	StyleType	false	Styles for the picker container
pickerContainerStyles	StyleType	false	Styles for the picker button

IconPickerItem | Prop | Type | Required | Description | | ---- | --- | --- | --- | icon | string | true | The name of the icon to render. Example: "FaAdobe" | | size | number | false |The size of the icon. Default: 24 | | color | string | false | The color of the icon. Default: "#3a3a3a" | | onClick | (v: string) => void | false | An onClick handler for the icon. |