Using Font Awesome in React

#react #fontawesome

Intro

While working on my latest side project I knew that I would need icons for my likes and comments component. In the past I had used Font Awesome for smaller projects and just stuck with the basic implementation.

<h1> Address Book </h1>
<i class="fas fa-address-book"></i>

<script src="https://kit.fontawesome.com/(yourKitCode).js" crossorigin="anonymous"></script>

This lead to this issue

To some people this is okay but I enjoy no errors in my console.

Getting Started

To get started first we will need to install the following packages using either npm or yarn.

npm

  npm i --save @fortawesome/fontawesome-svg-core
  npm install --save @fortawesome/free-solid-svg-icons
  npm install --save @fortawesome/react-fontawesome

yarn

  yarn add @fortawesome/fontawesome-svg-core
  yarn add @fortawesome/free-solid-svg-icons
  yarn add @fortawesome/react-fontawesome

@fortawesome/fontawesome-svg-core is used as the base svg library, @fortawesome/free-solid-svg-icons refers to the free solid svg icons Library here and finally @fortawesome/react-fontawesome is the base library.

You can add additional styles with these

  npm install --save @fortawesome/free-brands-svg-icons
  npm install --save @fortawesome/free-regular-svg-icons

Using Icons

Font Awesome gives two options to use when importing icons. The first is individual use and second is global use.

For individual use you would import like such

import React from 'react'
import { faHeart,faCommentDots,faShareSquare } from "@fortawesome/free-regular-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

...
return (
<FontAwesomeIcon icon={faHeart} />
<FontAwesomeIcon icon={faCommentDots} /> 
<FontAwesomeIcon icon={faShareSquare} />
)

For global usage add this to your app.js to initialize your app and library

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