我在哪里可以找到 FontAwesome 免费包中图标的对象名称？

Question

FontAwesome是一组图标库。在他们的使用文档中，他们写了一个例子，你可以通过从free-solid-svg-icons包中导入咖啡图标的对象来使用他们的咖啡图标，如下所示：

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
 
const element = <FontAwesomeIcon icon={faCoffee} />
 
ReactDOM.render(element, document.body)

查看FontAwesome Coffee Icon 文档，我看不到咖啡图标包含在哪个包中，或者它的对象名称是什么。我们从示例代码中知道它的对象名称是faCoffee并且它包含在@fortawesome/free-solid-svg-icons包中，但是其他 5,365 个图标中的任何一个呢？

问：如何找到 FontAwesome 图标的 React 对象名称，以及它包含在哪个 React 包中？

Answer 1

Font-Awesome 中只有 4 个包：

Name    | Free | Paid | Prefix | NPM Package (free)                  | NPM package (paid)
---------------------------------------------------------------------------------------------------------
Solid   | Yes  | Yes  | fas    | @fortawesome/free-solid-svg-icons   | @fortawesome/pro-solid-svg-icons
Regular | Yes  | Yes  | far    | @fortawesome/free-regular-svg-icons | @fortawesome/pro-regular-svg-icons
Light   | No   | Yes  | fal    |                                     | @fortawesome/pro-light-svg-icons
Brands  | Yes  | No   | fab    | @fortawesome/free-brands-svg-icons  | 

在搜索图标页面上，您可以按包过滤它们，以便知道哪些图标属于哪个包；例如，以下链接提供了由 Solid 包过滤的图标。

话虽如此，从您发布的代码中，您可以从图标列表中减去添加前缀“fa”的图标的 React 名称；React 中的“咖啡”图标是“faCoffee”。

从过滤后的链接中，您应该能够找到哪些图标属于哪个包。

Answer 2

我更喜欢深入研究 Github 中的代码。即这个文件https://github.com/FortAwesome/Font-Awesome/tree/master/js-packages/%40fortawesome/free-regular-svg-icons

这包括文件名，例如。faAddressBook.d.ts作为 TS 声明，但可以很好地指示存在什么、不存在什么。