Gatsby: [v2] how can I put fontawesome in gatsby

[KamiGim]

Summary

I face this problem when I try to put react-fontawesome in gatsby[v2] projects, but I don't know how to do it. There's no document or anything about how to do it at all

Thanks

Environment (if relevant)

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[LekoArts]

The documentation of this font awesome package explains it quite well — you import the icon and then use it. You need to be more specific with your error.

[KamiGim]

There's no App.js or Index.js in gatsby to put the import statement

[LekoArts]

You would import that in your Layout component that wraps all pages.

[KamiGim]

It's not working even if I put import and library.add(xxx,xxx) in Layout component

[m-allanson]

@KamiGim We'll need some more information to be able to help - could you create an example repo on GitHub and post a link here?

[rockchalkwushock]

@KamiGim

here is how I am making use of fontawesome with v2 in my site. Works with no issues.

https://github.com/rockchalkwushock/codybrunner.me/blob/move-to-gatsby-v2/src/components/commons/Icon.js

[KamiGim]

@rockchalkwushock Thanks a lot I will try it

[saiprasad2595]

@rockchalkwushock Link is not working. Can you please check.

[saiprasad2595]

This was super easy.Try this if you are looking for font-awesome icons.
https://www.npmjs.com/package/react-icons

[waleedshkt]

@KamiGim, you can make react-fontawesome work by adding the following code snippet (mentioned in official react-fontawesome docs) in your layout component as told by @LekoArts.

import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee  } from '@fortawesome/free-solid-svg-icons'

library.add(fab, faCheckSquare, faCoffee)

first npm install -S and import free-brands-svg-icons or/ and free-solid-svg-icons only if you need icons from them.

Then in each component where to use icons, add the following code:

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

Now use it in your component like shown below:

<FontAwesomeIcon icon={["fab", "apple"]} style={{color:"#000000"}} />

I believe it is at this step where things go wrong. You need to include 'fab' in icon prop as shown above if you are adding brand icons. Otherwise if using (let say) solid icons, then just enter the spinal-case (e.g check-square) styled name of the icon without [] enclosing brackets in icon prop instead of camelCase (checkSquare) and you don't need to include 'fa' in the beginning.

I hope this helps you and others experiencing same issue.

[py563]

@LekoArts can we follow similar flow to make it work on your gatsby-cara-theme starter