Could someone advice me on how to integrate FontAwesome 5 Pro with React?
I know there are packages @fortawesome/react-fontawesome and for example @fortawesome/fontawesome-free-regular but is there a way how to include pro version of icons?
When I log in to FontAwesome website, I can download the pro-version JS but I guess that's of no use in React.
Here's how to integrate Font Awesome 5 Pro with React (2018):
npm config set ...
or locally per project via (B) .npmrc
. I recommend (B) so other team-mates can also install the pro package.For (B), Go to your package.json directory and create a .npmrc
file. In that file, paste the code snippet provided in the guide. It should look something like this:
// .npmrc
@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=<MY_AUTH_TOKEN_FROM_FONT_AWESOME>
Once done, you should now be able to install the pro packages. They are according to the official react adapter react-fontawesome available as the following npm packages:
npm install @fortawesome/pro-<MY_ICON_WEIGHT>-svg-icons
to install the pro package of your choice.Thereafter, continue usage as provided by the react-fontawesome package. Which should look something like this in your react code if you installed the light version and using the 'Library' method by react-fontawesome:
// app.js
import { library, config } from '@fortawesome/fontawesome-svg-core'
import { fal } from '@fortawesome/pro-light-svg-icons'
library.add(fal)
Finally, usage looks something like this in a component file (available in both JS and TS flavours):
// Foo.jsx
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
const Foo = () => {
return (
<FontAwesomeIcon icon={['fal', 'utensils']} />
)
}
export default Foo
And if you are into Typescript:
// Foo.tsx
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { IconLookup } from '@fortawesome/fontawesome-svg-core'
const Foo = () => {
const icon: IconLookup = { prefix: 'fal', iconName: 'utensils' }
return (
<FontAwesomeIcon icon={icon} />
)
}
export default Foo
tldr; Use @fortawesome/pro-light-svg-icons
, @fortawesome/pro-regular-svg-icons
NPM packages.
I ran into this problem today, and I think the main question of how to use Pro version of the icons has not been addressed. The official docs aren't much help. This is what I had to do for using faFilePlus
icon, the light version:
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFilePlus } from '@fortawesome/pro-light-svg-icons/faFilePlus';
and then:
<FontAwesomeIcon icon={faFilePlus} />
Note the use of @fortawesome/pro-light-svg-icons
NPM package. This is undocumented anywhere in the FA's official docs and I had to dig through several places to arrive at this solution. The official docs only talk about the use of "free" icons but don't say where to find the equivalent NPM package for light, regular etc.
Also note that this does require NPM to be authenticated as mentioned in one of the answers.
Manually downloading the icons and installing them locally is an anti-pattern and not the way the Font Awesome team expects you to use Font Awesome Pro with Node and NPM.
Accessing to the Pro packages requires you to configure the @fortawesome scope to use the Font Awesome Pro NPM registry using your TOKEN which can be found in your Font Awesome account settings.
Note: If you're looking to use Font Awesome Pro in React Native, check out: react-native-fontawesome-pro
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