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
library.add() call and you can use the specific icons directly in FontAwesomeIcon component. (Saves some kilobytes)
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
OK, I solved it myself. What I did was to import @fortawesome/react-fontawesome. Then I manually downloaded the pro package of FontAwesome and from the folder /advanced-options/use-with-node-js/fontawesome-pro-light I copied desired icons (there are JS files such as faUsers.js) to my project folder and included these icons as well.
So at the beginning of the file I have something like
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import faUser from '../font-awesome/faUser';
Then I used it
render() {
return() (
...
<FontAwesomeIcon icon={faUser} />
...
);
}
It's a little bit annoying because I need to manually import every single icon but I couldn't think of any better solution.
I think you will be able to use them be adding the JS script and appropriate CSS files to your index.html
Let's say if you want to use the default font awesome without having any packages installed then directly include file in index.html as shown below
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js" integrity="sha384-+Ga2s7YBbhOD6nie0DzrZpJes+b2K1xkpKxTFFcx59QmVPaSA8c7pycsNaFwUK6l" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js" integrity="sha384-7ox8Q2yzO/uWircfojVuCQOZl+ZZBg2D2J5nkpLqzH1HY0C1dHlTKIbpRz/LG23c" crossorigin="anonymous"></script>
import directive.I managed to make it work without having to import each icon, with
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import fontawesome from '@fortawesome/fontawesome'
import solid from '@fortawesome/fontawesome-pro-solid'
fontawesome.library.add(solid)
And then using the icons as
<FontAwesomeIcon icon={solid.faPlusHexagon}/>
