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

Question

FontAwesome 是图标库的集合。在他们的Usage documentation 中，他们写了一个示例，您可以通过从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 documentation，我看不到咖啡图标包含在哪个包中，或者它的对象名称是什么。我们从示例代码中知道它的对象名称是faCoffee，并且它包含在@fortawesome/free-solid-svg-icons 包中，但是other 5,365 icons 中的任何一个呢？

问：我怎样才能找到一个 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  | 

在Search icons page 上，您可以按包过滤它们，这样您就可以知道哪些图标属于哪个包；例如，以下链接给出了icons filtered by Solid package。

话虽如此，从您发布的代码中，您可以从图标列表中扣除添加前缀“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 声明，但可以很好地指出存在什么，什么不存在。