React Icon Picker

Icon picker component for React

Installation

If you are using npm:

npm i @arkn/react-icon-picker

If you are using yarn:

yarn add @arkn/react-icon-picker

If you are using pnpm:

pnpm add @arkn/react-icon-picker

About

This package uses icons from xicons with SVG components integrated from fluentui-system-icons, ionicons, ant-design-icons, material-design-icons, Font-Awesome, tabler-icons and carbon. Check this website to view the icons list: https://www.xicons.org.

Usage

Import the component and its styles:

import { IconPicker } from '@arkn/react-icon-picker'
import '@arkn/react-icon-picker/dist/style.css'

function App() {
  const [icon, setIcon] = useState<string | null>(null)

  return (
    <IconPicker
      value={icon}
      onChange={setIcon}
      placeholder="Select icon"
    />
  )
}

Multiple Selection

import { IconPicker } from '@arkn/react-icon-picker'
import '@arkn/react-icon-picker/dist/style.css'

function App() {
  const [icons, setIcons] = useState<string[]>([])

  return (
    <IconPicker
      value={icons}
      onChange={setIcons}
      multiple
      multipleLimit={5}
      placeholder="Select icons"
    />
  )
}

Props

| Name | Type | Description | Default | Required | | ---------------------- | ----------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ----------------- | -------- | | value | string / string[] / null | Selection, icon(s) SVG code(s) or name(s) | null | Yes | | onChange | (value: string / string[] / null) => void | Callback fired when selection changes | undefined | Yes | | placeholder | string | Input placeholder | undefined | No | | multiple | boolean | Enable multiple selection when set to true | false | No | | multipleLimit | number | Maximum number of selections when multiple selection is enabled | Infinity | No | | selectedItemsToDisplay | number | Number of selected icons to display when multiple selection is enabled | 9 | No | | iconLibrary | 'all' / 'antd' / 'carbon' / 'fa' / 'fluent' / 'ionicons4' / 'ionicons5' / 'material' / 'tabler' | Icon library to display. This property can take an array of several libraries to display | 'fa' | No | | selectedIconBgColor | string | Selected icon(s) background color | '#d3d3d3' | No | | selectedIconColor | string | Selected icon(s) color | '#000000' | No | | clearable | boolean | Make selected icon clearable when multiple is false | false | No | | disabled | boolean | Disable component | false | No | | displaySearch | boolean | Display search input | true | No | | searchPlaceholder | string | Search input placeholder | 'Search' | No | | valueType | 'svg' / 'name' | Type of selection value, icon(s) SVG code(s) or name(s) | 'svg' | No | | includeIcons | string[] | List of icons to include | [] | No | | excludeIcons | string[] | List of icons to exclude | [] | No | | includeSearch | string | The search query whose results must be included | undefined | No | | excludeSearch | string | The search query whose results must be excluded | undefined | No | | emptyText | string | Empty text | 'Nothing to show' | No | | inputSize | 'small' / 'medium' / 'large' | Size of input | 'medium' | No | | theme | 'dark' / 'light' | Picker theme | 'light' | No | | emptySlot | React.ReactNode | Custom content for empty state in dropdown icons list | undefined | No |

Display Icons

You can display icons by rendering the SVG code directly if your value type is svg:

import { IconPicker } from '@arkn/react-icon-picker'
import { useState } from 'react'

function App() {
  const [icon, setIcon] = useState<string | null>(null)

  return (
    <>
      <IconPicker value={icon} onChange={setIcon} placeholder="Select icon" />
      <i dangerouslySetInnerHTML={{ __html: icon || '' }} />
    </>
  )
}

Or use the custom Icon component provided by this package:

import { IconPicker, Icon } from '@arkn/react-icon-picker'
import { useState } from 'react'

function App() {
  const [icon, setIcon] = useState<string | null>(null)

  return (
    <>
      <IconPicker value={icon} onChange={setIcon} placeholder="Select icon" />
      <Icon data={icon} size={24} color="#124ebb" />
    </>
  )
}

Icon Props

| Name | Type | Description | Default | Required | | ----- | --------------- | --------------------- | --------- | -------- | | data | string / null | Icon svg code or name | undefined | Yes | | size | number / string | Icon size | 24 | No | | color | string | Icon color | undefined | No |

TypeScript Support

This package is written in TypeScript and provides full type definitions out of the box.

import type { IconLibrary, ValueType } from '@arkn/react-icon-picker'

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Changelog

Detailed changes for each release are documented in the release notes.

License

Credits

This project is a React port of vue3-icon-picker.