在 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选项。

font-awesome图标可以与应用于 HTMLSpan 元素的className 一起使用，例如

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

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