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?
Fontawesome Package The fontawesome package enables easy access to more than 1500 high-quality icons in LaTeX. These icons are covering many examples such as: animals, buildings, alerts, computers, brands, arrows, currency, date & time and much more! In this post we will consider fontawesome 5 package (version 5.13.0, 2020/03/24).
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:
The complete set of 675 icons in Font Awesome 4.7.0 You asked, Font Awesome delivers with 41 shiny new icons in version 4.7. Want to request new icons? Here's how .
The following code shows how one can insert icons in LaTeX using the Font Awesome package: An icon is inserted by using the command \faIcon {the-icon-name}. The icon name corresponds to the official icon name, which most of the time can be obtained from Fontawesome.com.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With