CODEWITHSUNDEEP
reactjsfont-awesomefont-awesome-5
samuelg0rd0n
samuelg0rd0n

Reputation: 1258

How to integrate FontAwesome 5 Pro with React?

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.

Upvotes: 10

Views: 15500

Answers (6)

Beau Smith
Beau Smith

Reputation: 34367

You must use a TOKEN to access Font Awesome Pro via NPM.

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.

  1. Login to see your token: https://fontawesome.com/account/services
  2. Navigate to this step-by-step tutorial after logging in and it will contain your token in all the examples: https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers#installing-pro
  3. Install react-fontawesome and follow the examples to render icons: https://github.com/FortAwesome/react-fontawesome

Note: If you're looking to use Font Awesome Pro in React Native, check out: react-native-fontawesome-pro

Upvotes: 4

clodal
clodal

Reputation: 1825

Here's how to integrate Font Awesome 5 Pro with React (2018):

  1. Purchase a Pro licence from Font Awesome's pricing page
  2. Upon success, ignore the success pages. You should be logged into Font Awesome. In the login state, go to this guide: Font Awesome Installation Guide.
  3. If you are logged in and have a valid license key in your account, every code snippet in this tutorial will use your access token.
  4. Now, you can install your license key globally via (A) npm config set ... or locally per project via (B) .npmrc. I recommend (B) so other team-mates can also install the pro package.

  5. 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>

  6. 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:

    • @fortawesome/pro-solid-svg-icons
    • @fortawesome/pro-regular-svg-icons
    • @fortawesome/pro-light-svg-icons
  7. So now do npm install @fortawesome/pro-<MY_ICON_WEIGHT>-svg-icons to install the pro package of your choice.

  8. 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)

  9. 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

Upvotes: 31

PKK
PKK

Reputation: 783

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.

Upvotes: 5

AnonyMoose
AnonyMoose

Reputation: 1

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}/>

Upvotes: 0

samuelg0rd0n
samuelg0rd0n

Reputation: 1258

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.

Upvotes: 1

Harsh Makadia
Harsh Makadia

Reputation: 3443

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>

Upvotes: 0

Related Questions