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

Question

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

此代码将为我们提供带箭头的切换：

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

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

Answer 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。

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?

icons

reactjs

react-bootstrap