React-fontawesome: How to use with pro license?

Created on 24 Oct 2017 · 6Comments · Source: FortAwesome/react-fontawesome

I want to use the pro RC3 in React. This library seems like the right choice, but it looks like it's designed only for the free version. How can I add my pro icon packs and have them recognized by this library? Is that supported yet?

Source

lehresman

👍1

Most helpful comment

@robmadole Docs are overcomplicated.

Steps:

1) Go to https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers and copy this part:

to a file in the root of your project called .npmrc

2) yarn add @fortawesome/fontawesome-pro @fortawesome/fontawesome-svg-core @fortawesome/pro-solid-svg-icons @fortawesome/react-fontawesome

@fortawesome/fontawesome-pro - dunno what this does. I guess it checks .npmrc to confirm the token. Seems superfluous.
@fortawesome/fontawesome-svg-core - dunno what this does. I guess it converts things like font-size: 10px or color: red; to adjust the size/color of your icon? It also makes library available so you can add icons to your icon library.
@fortawesome/pro-solid-svg-icons - Pro icon set. Replace solid with regular and/or light to load different icon sets.
@fortawesome/react-fontawesome - The <FontAwesomeIcon /> component.

3) Where your app is initialized (app.js for CRA users; _app.js for Next.js users) select the icons that will go into your icon library:

import { Component } from 'react'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faSpinnerThird } from '@fortawesome/pro-solid-svg-icons'

library.add(faSpinnerThird)

class App extends Component {
  // ...
}

export default MyApp

4) Now anywhere in your project you can use the <FontAwesomeIcon /> component like so:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export default () => (
  <div>
    <h1>Hello</h1>
    <FontAwesomeIcon icon="spinner-third" />
  </div>
)

Note: You have to use the dash-case version of the icon's name sans the prefix. That is, not faSpinnerThird.

The library approach doesn't load icons multiple times so it's faster so use it. If a font isn't loading for some reason, check your terminal and you might see something like prefix: 'fas' blah blah which means FontAwesome is looking for the default iconset prefix (fas). To fix this you need to pass in your font like so: <FontAwesomeIcon icon={['fab', 'instagram']} />.

Ideally, FontAwesome would put all free icons in a single package, and all pro icons (including all the free ones) in a single package, and then just let users take advantage of tree-shaking to keep bundle sizes down.

Syntax _could_ look like this and take less than a paragraph for people to instantly understand it.

// .npmrc
token stuff

// ImPoor.js
import { FA, solidCamera } from 'fontawesome-free'

<FA icon={solidCamera} />

// ImRich.js
import { FA, solidCamera, lightCamera } from 'fontawesome-pro'

<FA icon={solidCamera} />
<FA icon={lightCamera} />

corysimmons on 21 Apr 2019

❤14 🎉4

All 6 comments

I was able to copy /packages from the main repo into my project, and then import /packages/fontawesome-pro-