27

FontAwesome is a collection of libraries of icons. In their Usage documentation, they write as an example that you can use their coffee icon by importing the coffee icon's object from the free-solid-svg-icons package, like this:

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)

Looking at the FontAwesome Coffee Icon documentation, I can see no reference to what package the coffee icon is included in, or what its object name is. We know from the example code that its object name is faCoffee and that it's included in the @fortawesome/free-solid-svg-icons package, but what about any of the other 5,365 icons?

Q: How can I find what React object name a FontAwesome icon has, and what React package it's included in?

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Mossmyr
  • 909
  • 2
  • 10
  • 26

2 Answers2

39

There are only 4 packages in Font-Awesome:

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  |

On the Search icons page you can filter them by package so you know what icons belongs to what package; As an example the following link gives icons filtered by Solid package.

That being said, from the code you posted you can deduct the React name of the icon adding the prefix "fa" from the icon list; the icon "Coffee" in React is "faCoffee".

And from the filtered link you should be able to find what icons belongs to what package.

Mossmyr
  • 909
  • 2
  • 10
  • 26
Kaiser
  • 1,957
  • 1
  • 19
  • 28
  • 9
    So for example `class="fab fa-foo"` in the documentation translates to `import { faFoo } from '@fortawesome/fontawesome-svg-core'` in React? How sure can we be that _all_ icon component names behave this way, that there are no exceptions? – Mossmyr Jun 13 '19 at 09:20
  • 1
    for this specific icon as it's fab (means is in the brand package), you should use @fortawesome/free-brands-svg-icons. If you are willing to install a bunch of icons, consider importing the full package. Using the Explicit Import is meant to be used for importing a few icons which represent you have checked the name already. – Kaiser Jun 13 '19 at 14:52
  • 1
    What's the name of the full package? And looking over the [official React component documentation](https://www.npmjs.com/package/@fortawesome/react-fontawesome), it looks like there are free and pro versions of solid and regular, while brands is exclusively free and light is exclusively pro. – Mossmyr Jun 13 '19 at 15:18
  • 1
    You have to follow the installation instructions mentioned on the documentation: $ npm i --save @fortawesome/fontawesome-svg-core $ npm i --save @fortawesome/free-solid-svg-icons $ npm i --save @fortawesome/react-fontawesome And then use it like this: – Kaiser Jun 13 '19 at 15:49
6

I prefer to go down the route of digging into the code in Github. Namely this file https://github.com/FortAwesome/Font-Awesome/tree/master/js-packages/%40fortawesome/free-regular-svg-icons

This includes the filename, eg. faAddressBook.d.ts as a TS declaration, but gives you a good pointer to what is there, and what is not.

AndyD
  • 875
  • 7
  • 18
  • 2
    A link to a solution is welcome, but please ensure your answer is useful without it: [add context around the link](//meta.stackexchange.com/a/8259) so your fellow users will have some idea what it is and why it’s there, then quote the most relevant part of the page you're linking to in case the target page is unavailable. [Answers that are little more than a link may be deleted.](/help/deleted-answers) – Yunnosch Oct 01 '20 at 18:40