如何在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'}
   ...={...}/>

这是上述尝试的结果：

- Matt

---

你尝试了什么？你期望的结果是什么？你得到了什么结果？ - Liora Haydont

你是如何引入 Font Awesome 的？ - JJJ

另外，f2bc似乎不存在。它应该是哪个图标？ - JJJ

@JJJ 你说得对，那个图标不存在。用任何图标都可以，我一定输错了。我想尝试只使用 Unicode 而不包含 Font Awesome，但我认为这是不可能的。 我想到这个主意，因为在 Chrome 控制台中运行以下代码将返回 TM 图标： let unicode = '2122'; let convertedUnicode = unescape('%u' + unicode); console.log(convertedUnicode) - Matt

Answer 1

react-select非常灵活，可以传递PropTypes.node作为label选项。

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

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

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

- Oluwafemi Sule

---

在这个配置中，工具提示显示“[object object]”。 - R. Oosterholt

我觉得你正在使用一个不同的库和 react-select 一起。我认为这不是原始问题的一部分。 - Oluwafemi Sule

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

- Mohit