Using Font Awesome 5 in React

In part one of this series we demoed reactstrap to create simple forms quickly and efficiently. In this installment, we’re going to use Font Awesome 5 to add some SVG icons and make our forms even more attractive.

The series

• Part 1: Fancy Forms in React with ReactStrap 🎩

• Part 2: Using Font Awesome 5 in React 🦄

What’s New?

FA went all out with version 5 by rewriting their entire codebase and providing users with new and refreshing features.

V5 adds a wide variety of icons (over 1000!) and even category packs that include travel, emoji 😍, and design in a fancy SVG format.

If you’ve worked with Font Awesome in the past, something like ‘fa-profile’ might look familiar. In V5 FA introduced icon styles like ‘fas’ for Font Awesome solid, ‘fal’ for Font Awesome Light, ‘fab’ for Font Awesome Brands and lastly ‘far’ for Font Awesome Regular so the new icons might look more like ‘far fa-profile’. This adds a great deal of flexibility for UI/UX design.

Additionally, there are FA packages (like the one we’re about to use!) for React, Angular, Vue and Ember.

To fund this rapid and robust development, FA introduced Font Awesome Pro which gives users additional design flexibility and functionality. If you’re a fan of the free functionality in V4, not to fret! All functionality in V4 remains in the free plan with bug fixes and updates.

Check out their update page for the full scoop.

Installation

Let’s pick up from where we left off in part one. We took the liberty of adding some CSS to get an 🐊.io feel.

To get started, we’re going to install react-fontawesome along with the SVG libraries fontawesome-svg-core and fontawesome-svg-icons. The packages we’re installing only contain the free version. If you’re looking to utilize new pro icons and styles, check out their Github repo for additional installation and configuration instructions.

Here’s how to install what’s needed via npm or Yarn:

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

# or, using Yarn:
$ yarn add @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

Implementation

Now that we’re golden on the installation, we’re going to jump right in and implement these bad boys.

In our App.js file, we’re going to import the icons we need.

In this example we’re going to use the envelope and key icons. All icons can be found in Font Awesome’s icon library. All icon imports are converted to camelCase with fa at the start leaving out all the dashes. For example, the key icon will be imported as faKey. We’ll start by importing the required files and calling fontawesome-svg-core’s 'library.add to pull our icons.

import { library } from '@fortawesome/fontawesome-svg-core';
import { faEnvelope, faKey } from '@fortawesome/free-solid-svg-icons';

library.add(faEnvelope, faKey);

// ...

As our project grows, we only need to import and add icons to our library in App.js. Imagine that we have a component called SignUp.js where we need to use these icons. Since they have already been added to the library in App.js we simply add the import below for the ** component.

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

/// ...

Next, as part of the Username label, we’re going to use the FontAwesomeIcon component.

// ...

<Label>
  <FontAwesomeIcon
    icon="envelope"
  />
  Username
</Label>

Notice that the icon name provided isn’t written the same as when it’s imported. When passing the icon name as a prop to the FontAwesomeIcon component, we only need the icon’s name in lowercase letters. For additional styling I also added a className. Now just rinse and repeat for the key icon. The result should look something like this:

Our icons and text are a little squished and, dare I say, boring, so let’s add a space between the icon and the label text and change the icon’s color and size:

// ...

<label>
  <FontAwesomeIcon
    icon="envelope"
    color="#6DB65B"
    size="sm"
  />
  {' '}Username
</label>

As you can see, the FontAwesomeIcon component can take a few different props to change the icon style. Here we used the color and size props. The size prop expects a string value like xs, lg, 2x, 3x… There are quite a few more props that can be passed-in. Notably, the spin and pulse boolean props will have the icon rotate on itself.

TLDR

reactstrap + react-fontawesome = one happy dev 🚀