Adding icons to a React layout

< Back to TOC

Let’s improve the app from the previous chapter by finally dealing with that import statement at the very top of the MainMenu, Jumbotron, and Footer component files.

Here’s what we’ll do.

First, we’ll install the react-icons module using npm.

After that, we’ll import and use the appropriate icons in our components.

Table of contents

1. Importing the icons module
2. Understanding how react-icons work
3. Adding another icon to a component

Importing the icons module

Let’s go back to the terminal and run:

npm i --save react-icons

Now our package.json file is updated to this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
{
  "name": "reactbootstrap1",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "bootstrap": "^5.1.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Now that we have the appropriate modules added to our node_modules folder, let’s pretend that we have another, junior developer, on our team. It’s a first day at their job, and they need to add the app to their brand new machine.

Since we’ve already mentioned that the node_modules folder doesn’t get added to Git - actually, it’s specifically listed in the .gitignore file - as the folder to be completely ignored, how would they install it?

Let’s pretend we’re that new imployee. The easiest way to do this play pretend is: delete the node_modules sub-folder from our app’s folder.

Now the node_modules folder is no longer there.

To bring it back, we’ll essentially need to do the same thing that our new co-worker will have to do, and that is: run the npm install command:

npm install

All the missing node modules will be reinstalled to our project, because npm will read the contents of package.json and act accordingly.

Alright, so now that we’re taken that slight detour, let’s go back to adding those icons in our app.

Understanding how react-icons work

The simplest way to learn the basics of react-icons setup is to visit their website.

Here’s a screenshot of it from December 2021.

One of the first things to notice is that there are many different icon libraries included in this project: Bootstrap Icons, Font Awesome, Ionicons, etc. There’s really plenty to choose from.

So let’s just pick a few random icons and use them in each of our components.

In the MainMenu.js component, let’s deleted the commented-out // import SomeModule... line of code and add this line instead:

import { IconName } from "react-icons/bs";

The bs at the very end of this line stands for “Bootstrap”. The IconName is a placeholder for the actual icon, so let’s update it to this:

import { BsFillAlarmFill } from "react-icons/bs";

It’s the very first icon showing in the list of Bootstrap icons - an icon of an alarm clock.

Now we need to use it in the main menu component’s JSX:

<a className="navbar-brand" href="#">
    <BsFillAlarmFill />
    Navbar
</a>

We’ve added an icon in front of the Navbar’s brand title in our main navigation.

Let’s update the Jumbotron component next.

Adding another icon to a component

In Jumbotron.js, let’s add the following import at the very top of the file:

import { FaAndroid } from "react-icons/fa";

This time, we’re using the FontAwesome icon set - specifically, the Android logo.

And we’re adding it in our componet’s JSX next to the words “Custom jumbotron”:

<h1 className="display-5 fw-bold">
    <FaAndroid />
    Custom jumbotron
</h1>

Since the process is pretty straightforward, we won’t be updating the Footer.js component in the book. Instead, this can be an exercises for those readers that feel like practicing.

After these little updates, let’s run our app again and we should get the same website, plus the icons we’ve just added.

< Prev lesson Next lesson >