在 react-select v2 中使用 Font Awesome 图标？

Question

使用：https://react-select.com/home 我一直在尝试以下想法的变体：

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

这是上述尝试的结果：

Answer 1

react-select 可以灵活地允许 PropTypes.node 传递给 label option。

font-awesome 图标 can be used with className 应用于 HTMLSpan 元素，例如

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

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

Answer 2

要显示图标而不是文本，您可以这样做：

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} />

在 react-select v2 中使用 Font Awesome 图标？

Using a Font Awesome Icon with react-select v2?

font-awesome

reactjs

react-select