Web Apps Using NextJS, AWS Amplify, Tailwind & Font Awesome - Part 3 of 4 - Add Icons

Part 1 - Application Basics
Part 2 - Cloud Infrastructure
Part 3 - Adding Icons - This post
Part 4 - Using Font Awesome Pro with AWS Amplify

Part 3 of 4 - Add Icons

Third in a four-part series where I show you how to set up a web application using Nextjs, AWS Amplify and Font Awesome. Note: this post series covers installation and setup of the various components, but does not go into detail on how to create your application once it's set up.

What we'll cover:

1. Installing Font Awesome
2. Installing free icons in your app
3. Installing pro icons in your app
4. Setting up Dynamic Importing
5. Adding icons to your app

What you'll need:

1. A beautifully architected and connected Nextjs & Amplify app (Where will you get one of THOSE?)
2. A Font Awesome account if you plan on using any Pro icons
3. A place to meditate while you're waiting for your build to finish
4. Backup copies of your work (Do it! You'll thank me!)

Optional but nice to have:

1. A time machine so you don't have to delete your entire app and start from scratch (AGAIN).
2. Really good copy/paste skills (Practice makes perfect!)
3. A dragon (What? Who doesn't want a DRAGON??)

Install Font Awesome

Now that we have our frontend hosted and connected to our backend, it's time to add some icons. For this we'll use Font Awesome. For those of you not familiar, Font Awesome is a library of over 16,000 icons, more than 2000 of which are 100% free. Along with the icons, they have provided a number of ways of using them. In this post we will focus on using the SVG icons directly in our project, keeping things very fast.

First, navigate to the root of your project directory and install Font Awesome:

npm i --save @fortawesome/fontawesome-svg-core

Install Free Icons

To use free icons, install them as follows:

npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

Note: You don't have to install all three libraries, just the libraries that have the icons you want. You can search for them on the font awesome website.

Install Pro Icons

If you have a Pro license you have to do a little extra configuration:

At the root of your project directory create a file named '.npmrc' and add the following:

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=  <— use your own authToken here

Then install the pro icon libraries you wish to use:

npm i --save @fortawesome/pro-solid-svg-icons
npm i --save @fortawesome/pro-regular-svg-icons
npm i --save @fortawesome/pro-light-svg-icons
npm i --save @fortawesome/pro-thin-svg-icons
npm i --save @fortawesome/pro-duotone-svg-icons

Install React Component And Set Up Dynamic Importing

Now that you have your icons installed, let's get your project set up to use them. First install the FA React component:

npm i --save @fortawesome/react-fontawesome@latest

To keep your project build smaller, we will set up dynamic importing of the icons, which will only pull in the icons you will actually use. For this we will use Babel.

To set up FA dynamic importing:

npm install babel-plugin-macros
npm install --save-dev @babel/preset-react

Next, create babel.config.js and add:

module.exports = function (api) {
    api.cache(true);
    return {
        plugins: ['macros'],
        presets: ['@babel/preset-react']
    }
}

Finally, create babel-plugin-macros-config.js and add:

module.exports = {
  'fontawesome-svg-core': {
    'license': 'free'
  }
}

If you are using Pro icons, your babel-plugin-macros-config.js should contain:

module.exports = {
  'fontawesome-svg-core': {
    'license': 'pro'
  }
}

Finally, since Next.js manages CSS differently than most web projects if you just follow the plain vanilla documentation to integrate react-fontawesome into your project you'll see huge icons because they are missing the accompanying CSS that makes them behave.

To fix this, open your _app.js and add the following code just after your import statements:

import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'
config.autoAddCss = false

Add Icons To Your App

Finally! The moment you've all been waiting for. Let's add some icons. In the page your component where you wish to add icons, add the following to the import section:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { solid, regular, brands } from '@fortawesome/fontawesome-svg-core/import.macro' // <-- import styles to be used

Then to add the icons, you would use the FontAwesomeIcon component as follows:

<FontAwesomeIcon icon={solid('user-secret')} />
<FontAwesomeIcon icon={regular('coffee')} />
<FontAwesomeIcon icon={brands('twitter')} />

To import individual icons:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {faSun, faMoon} from '@fortawesome/free-solid-svg-icons'

If you wish to use variable as icon, so that it can be changed based on some criteria:

import React, { useState } from "react";

const [faDarkLight, setFaDarkLight] = useState(faMoon)
setFaDarkLight(faSun)

<FontAwesomeIcon icon={faDarkLight} size="xl" />

Next up, how to use Font Awesome icons in AWS Amplify hosted projects, including using environment variables to store FA license codes.

Resources

1. Setting Up Font Awesome with React
2. Font Awesome Icon Search
3. Using Font Awesome with Nextjs