可以将自定义图标添加到 font-awesome-react

Posted 2023-02-21

【中文标题】可以将自定义图标添加到 font-awesome-react

【英文标题】：Can Custom Icons Be Added to font-awesome-react

【发布时间】：2019-06-22 08:49:12

【问题描述】：

react-font-awesome repo 上的 issue 表明这至少是可能的，但并未概述添加自定义 SVG 图标所需的内容。

React Font Awesome 允许您从库中添加图标，但只能从它们自己的库中添加。

有什么方法可以创建一个您自己的图标库并添加它吗？

我为什么要这样做？因为 react-font-awesome 围绕其 <FontAwesomeIcon /> 组件构建了许多有用的功能，我希望能够为我的应用程序中的所有图标使用这个单一组件，无论它们是 Font Awesome 图标还是我自己的.

注意：我了解如何创作 SVG 文件，我有兴趣将它们打包为可以加载到 react-font-awesome 的库。

【问题讨论】：

为什么要将它们加载到 react-font-awsome 中？如果你把它们打包成一个库，你就不能把它们当作你自己的库，独立于 react-font-awesome 吗？

@vhflat 只是为了一个一致的 API。我不想关心我是要字体真棒图标还是自定义图标。 React Font Awesome 已经提供了一个简单的抽象，允许我使用一个添加许多有用功能的 react 组件：<FontAwesomeIcon icon="igloo" />。我不想为自己的图标复制此功能和 API。

graphicdesign.stackexchange.com 可能还有更多

有可能。看到这个答案：***.com/a/50339724/2190075

【参考方案1】：

根据自述文件，您可以使用library.add()添加其他图标包

import ReactDOM from 'react-dom'
import  library  from '@fortawesome/fontawesome-svg-core'
import  fab  from '@fortawesome/free-brands-svg-icons'
import  faCheckSquare, faCoffee  from '@fortawesome/free-solid-svg-icons'

library.add(fab, faCheckSquare, faCoffee)

因此，如果您以与 free-brands-svg-icons 相同的方式格式化您自己的图标包，您应该可以添加它。

【讨论】：

这不是定义图标最方便的格式，但我很确定如果您有一致的 SVG 文件，就可以制作一些东西。谢谢你的建议，我还在考虑是否值得。