Using a Font Awesome Icon with react-select v2?

user_9536031 0
Viewed 7707

Using: https://react-select.com/home I've been trying variations of the following idea:

 const hex = 'f2bc';
 const char = unescape('%u' + hex);
 <Select
   defaultValue={ label: char, value: 'some-value'}
   ...={...}/>

This is the result of the above attempt:

enter image description here

font-awesome react-select reactjs
2 Answers

react-select is flexible to allow PropTypes.node to be passed for the label option.

font-awesome icons can be used with className applied to an HTMLSpan element e.g.

const labelWithIcon = <span className="fas fa-stroopwafel" />

<Select defaultValue={{ label: labelWithIcon, value: 'some-value' }} />
user_51898110

To dispaly icons instead of text you can do like this :

const options = [
      { value: "text", label: <FontAwesomeIcon icon={faFileAlt} /> },
      { value: "image", label: <FontAwesomeIcon icon={faFileImage} /> },
      { value: "video", label: <FontAwesomeIcon icon={faFileVideo} /> }
];

<Select  placeholder="Text"  options={options} />
user_75697010
Related