PrimeReact 结合反应图标

Question

我想知道是否可以在 PrimeReact 中使用 react-icons package 中的图标，因为 primeIcons package 不幸的是不包含我的项目所需的所有图标。

我还没有找到解决方案，因为 react-icons 将图标导出为组件，而 PrimeReact 获取由字符串分配的图标。

Answer 1

更改按钮中的搜索图标

你可以访问https://react-icons.github.io/react-icons/search?q=fasearch

右键单击图标并检查元素，从开发人员控制台复制 SVG
创建 say search.svg文件并将 fasearch 的svg粘贴到文件中 在 say root.css文件中添加以下 class

.pi-search:before {
  content: url(search.svg) !important;
}

这将更改搜索图标

Answer 2

这是一个例子

import { FaWheelchair, FaBolt, FaCarAlt, FaCar } from "react-icons/fa";

...

return( 
<div className="flex card-container overflow-hidden ">
              <div className="flex-none flex align-items-center justify-content-center  p-1">
                            <TfiWheelchair />
                            <p className="text-lg">Wheelchair</p>
                        </div>
                    </div>);