CODEWITHSUNDEEP
reactjsfont-awesome-5
Mossmyr
Mossmyr

Reputation: 991

Where do I find the object names of icons in the FontAwesome free packages?

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?

Upvotes: 29

Views: 37360

Answers (2)

AndyD
AndyD

Reputation: 895

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.

Upvotes: 6

Kaiser
Kaiser

Reputation: 2005

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.

Upvotes: 40

Related Questions