Better React documentation: need to know icon's name + where to import from

[aindriu80]

hi,

I'm using react-fontawesome in a React project - its its a bit awkward compared to html... I don't know the correct name of the icon to use, or where to import the icon from.

Take the star : https://fontawesome.com/icons/star?style=regular

to use the star in html you use: <i class="fas fa-star"></i>

But what is it supposed to be in React ?

component:

import { faHome } from "@fortawesome/free-solid-svg-icons";

<div>
    <FontAwesomeIcon icon={faStar} />
</div>

And put in the imports into App.js to use :

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faIgloo } from '@fortawesome/free-solid-svg-icons'

It could be clearer what name to use for an icon in a component and what library to import in order to use that icon.

[jmayergit]

It's honestly so confusing.

[blatde91]

how did you even figure that much out lol i have no idea what i'm doing

[BenQuirk]

5 minutes in to setting this up for a React project and had the same thought- where's the documentation to show what icon is in what library?

[elramus]

@BenQuirk when you say "what icon is in what library", what do you mean? Like pro vs free? Solid vs regular vs light? Someone correct me if I'm wrong, but I believe that solid, regular, and light all include all the icons (not brands, of course). Just a matter of pro vs free. The pro versions have all the icons so there's no need to look up where anything lives. If not pro, then yeah I guess you do need to look it up, but it's visible from both the icon search results page (grayed out or not, and hovering over pro says "PRO") and the single icon page (right side of the page).

That being said, I do rely on TS auto import for FontAwesomeIcon because I can never remember if it's default or named export and if it's fontawesome-svg-core or react-fontawesome 😄.

[BenQuirk]

@elramus I ended up using React-Icons (https://alligator.io/react/react-icons-open-source-icons/) because the instructions made it look so easy. :)

[Dror-Bar]

I have the same issue. I need to use all of these icons: https://use.fontawesome.com/releases/v5.0.9/css/all.css

But I have no idea how to import all of these. Does anyone have any idea? I would appreciate some hints.

[JasonParra]

What about using faStar from both "free-solid-svg-icons" and "free-regular-svg-icons".

import { faStar } from '@fortawesome/free-solid-svg-icons' //no-outline import { faStar } from '@fortawesome/free-regular-svg-icons' //outline

I need to use both in the same component and isnt posible.

[nirossss]

you can copy the name you need from here: https://react-icons.github.io/react-icons/icons?name=fa

[JasonParra]

definitely a more user-friendly implementation of fontawesome, thanks !!!