Fa Picker is a Slack-like customizable
font awesome icon picker component for React
Demo • Changelog




Brought to you by the Deskpro team

Heavy thanks to Missive team for Emoji-mart

Installation

npm install --save emoji-mart

Components

Picker

import 'icon-mart/css/icon-mart.css'
import { Picker } from 'emoji-mart'

<Picker set='emojione' />
<Picker onSelect={this.addIcon} />
<Picker title='Pick your icon…' icon='hand-point-up' />
<Picker style={{ position: 'absolute', bottom: '20px', right: '20px' }} />
<Picker i18n={{ search: 'Recherche', categories: { search: 'Résultats de recherche', recent: 'Récents' } }} />

Prop	Required	Default	Description
autoFocus		false	Auto focus the search input when mounted
color		#ae65c5	The icon color
icon		department_store	The icon shown when no icons are hovered, set to an empty string to show nothing
include		[]	Only load included categories. Accepts I18n categories keys. Order will be respected, except for the recent category which will always be the first.
exclude		[]	Don't load excluded categories. Accepts I18n categories keys.
custom		[]	Custom icons
recent			Pass your own frequently used icons as array of string IDs
iconSize		24	The icon width and height
onClick			Params: (icon, style, color, event) => {}. Not called when icon is selected with enter
onSelect			Params: (icon, style, color) => {}
perLine		9	Number of icons per line. While there’s no minimum or maximum, this will affect the picker’s width. This will set Frequently Used length as well (perLine * 4)
i18n		{…}	An object containing localized strings
native		false	Renders the native unicode icon
backgroundImageFn		((set, sheetSize) => …)	A Fn that returns that image sheet to use for icons. Useful for avoiding a request if you have the sheet locally.
iconsToShowFilter		((icon) => true)	A Fn to choose whether an icon should be displayed or not
showPreview		true	Display preview section
showSkinTones		true	Display skin tones picker. Disable both this and showPreview to remove the footer entirely.
iconTooltip		false	Show icons short name when hovering (title)
style			Inline styles applied to the root element. Useful for positioning
title		Icon Mart™	The title shown when no icons are hovered
notFoundIcon		sleuth_or_spy	The icon shown when there are no search results
notFound			Not Found
icons		{}	Custom icons

I18n

search: 'Search',
clear: 'Clear', // Accessible label on "clear" button
notfound: 'No Icon Found',
colortext: 'Choose your color',
categories: {
  search: 'Search Results',
  recent: 'Frequently Used',
  custom: 'Custom',
},

Tip: You usually do not need to translate the categories and skin tones by youself, because this data and their translations should be included in the Unicode CLDR (the "Common Locale Data Repository"). You can look them up and just take them from there.

Examples of emoji object:

{
  id: 'smiley',
  name: 'Smiling Face with Open Mouth',
  colons: ':smiley:',
  text: ':)',
  emoticons: [
    '=)',
    '=-)'
  ],
  skin: null,
  native: '😃'
}

{
  id: 'santa',
  name: 'Father Christmas',
  colons: ':santa::skin-tone-3:',
  text: '',
  emoticons: [],
  skin: 3,
  native: '🎅🏼'
}

{
  id: 'octocat',
  name: 'Octocat',
  colons: ':octocat:',
  text: '',
  emoticons: [],
  custom: true,
  imageUrl: 'https://github.githubassets.com/images/icons/emoji/octocat.png'
}