React Bootstrap：如何将 Dropdown.Toggle 的图标从箭头图标更改为 React Icon 中的其他一些图标？答案

【问题标题】：React Bootstrap: How can I change the icon of Dropdown.Toggle from the arrow icon to some other icons from React Icon?React Bootstrap：如何将 Dropdown.Toggle 的图标从箭头图标更改为 React Icon 中的其他一些图标？
【发布时间】：2021-12-09 01:57:35
【问题描述】：

https://react-bootstrap.netlify.app/components/dropdowns/#dropdown-toggle-props

这段代码会给我们一个带箭头的开关：

<Dropdown.Toggle split variant="success" id="dropdown-split-basic" />

但我想将图标从反应图标更改为其他图标。如果有人能告诉我如何做，我将不胜感激。提前谢谢！

【问题讨论】：

标签： reactjs icons react-bootstrap

【解决方案1】：

您可以添加以下 CSS 来隐藏默认插入符号图标：

.dropdown-toggle::after {
  display: none;
}

然后，当您定义下拉列表时，将您想要的图标作为 JSX 的一部分：

<Dropdown>
  <Dropdown.Toggle variant="success" id="dropdown-basic">
    Dropdown Button
    <FontAwesomeIcon icon={faCaretSquareDown} style={{ marginLeft: '10px' }} />
  </Dropdown.Toggle>
  ...
</Dropdown>

在这种情况下，我使用了Font Awesome 图标，因此必须将以下依赖项添加到 package.json：

"@fortawesome/fontawesome-svg-core": "1.2.36",
"@fortawesome/free-solid-svg-icons": "5.15.4",
"@fortawesome/react-fontawesome": "0.1.16",

以下导入到我的组件文件中：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCaretSquareDown } from '@fortawesome/free-solid-svg-icons';

结果是：

可以在here找到一个工作演示。

【讨论】：