How to use SVG Icons in your React Project

You have built your project to a reasonable amount. Now, you want to add icons to improve the visual message.

While there are pools of free icons library you can choose from, here, we will be using the react icons library.

It is a small library that enables you to add icons from various popular icon sets (including Font Awesome, Ionicons, Bootstrap icons, Feather etc.) into your React project as an SVG element.

This is a good choice as SVGs (Scalable Vector Graphics) are not only supported by all major browsers, they take less space compared to other image formats and allows us to style icons without a quality loss.

Great! Let’s see how we can use it.

If you are following the series from the beginning, you are good to go. Else, you can simply create React App project to follow along.

Let’s head over to the terminal and install react-icons. So run this command in your project directory:

npm install react-icons

# or its equivalent yarn command

yarn add react-icons

Once the installation is done, head over to the react-icons website and see all of the icons available for us.

As you can see from the left panel, you can click on the available fonts library and search for the icons you’d like to add in your project. You can do this by going through the long list or simply use CTRL + F or CMD + F to search for specific icons.

Another way to search for icons is to make use of the search input. You can figure out which library an icon belongs to by looking at the prefix (first two letters of the icon). You’ll also use this prefix when importing the icon.

Now, you’ve searched for icons. In the case of our todos app, we are adding the delete and add icons. So I came up with these selections: FaPlusCircle and FaTrash.

React icons export icons as React component and uses the ES6 import to include the icons in your project.

We will use the FaPlusCircle in the InputTodo.js file to replace the "Submit" text and FaTrash in the TodoItem.js file to replace the "Delete" text.

Open the InputTodo.js file and add this to the top of the file:

import { FaPlusCircle } from "react-icons/fa"

Then, find this line:

<button className="input-submit">Submit</button>

And replace the text with the Icon component.

<button className="input-submit">
  <FaPlusCircle />
</button>

Save the file and head over to the TodoItem.js file.

Add this to the top of the file:

import { FaTrash } from "react-icons/fa"

Then, find this:

<button onClick={() => props.deleteTodoProps(id)}>Delete</button>

And replace with this:

<button onClick={() => props.deleteTodoProps(id)}>
  <FaTrash />
</button>

Save the file and check the frontend. You should be able to see your SVG icons.

Before we get to styling our icons, let’s take a few notes.

As seen above, we imported our icons from the Font Awesome icon set. See the icon library name prefixed to the icon. Also, each of the icon set has got its path as seen in the import statement.

The ES6 import allow us to include only the icons that our app is using instead of bringing all the icons (that tends to increase the size of our application) from a set.

Styling React Icons

By default, these icons inherit the CSS styles of the parent element. You can go ahead and style them directly in your CSS file as SVGs by targeting its parent element.

.input-submit svg {
  color: darkcyan;
  font-size: 20px;
  margin-top: 2px;
}

React icons also allows us to pass unique props (including color, size and className) to style individual icons.

<button className="input-submit">
  <FaPlusCircle color="darkcyan" size="20px" className="submit-icon" />
</button>

Also, like the JSX element, you can pass the style prop to customize your icons. We will go with this approach.

Back to the InputTodo.js file. Update the icon so you have:

<button className="input-submit">
  <FaPlusCircle
    style={{ color: "darkcyan", fontSize: "20px", marginTop: "2px" }}
  />
</button>

Save the file.

Nothing special in the above code as we’ve covered styling in this part of the series.

Let’s do the same for the delete icon. Open the TodoItem.js file and update the icon so you have:

<button onClick={() => props.deleteTodoProps(id)}>
  <FaTrash style={{ color: "orangered", fontSize: "16px" }} />
</button>

Save and see the styles applied in the frontend.

Great!

Styling React Icons using the IconContext

You may want to style multiple side-by-side icons at a go without wanting to target them in your CSS file (an easier method). React icons allows us to configure icons props using the React Context API.

Well, you don’t have to know the Context API to implement it. It’s very straight forward.

First, you have to import the IconContext from the react-icons module.

import { IconContext } from "react-icons"

After that, you’ll wrap all of your icons with the Provider component and assign to the Provider value prop, an object consisting of unique keys (provided by react-icons) and value pairs.

You’ll have something like this:

<IconContext.Provider
  value={{
    color: "darkcyan",
    style: { fontSize: "20px", color: "#ff0000" },
    className: "submit-iconn",
  }}
>
  <button className="input-submit">
    <FaPlusCircle />
    <FaPlusCircle />
    <FaPlusCircle />
  </button>
</IconContext.Provider>

A few note:

The style key (like the style attribute mentioned earlier in the series) accepts an object with camelCased properties, unlike the other available key that accepts a string.

The color assigned through the style key overrides that assigned directly to the value prop.

If you are like me, you’ll stick with the style and the global className keys.

This is a quick one and very easy to implement. Hope you enjoyed the series so far? Before we round up, let’s discuss routing in a React app. We want our app to have an about-me page that contains information about the app.

Let’s go!

Want to say something? I’m in the comment section.