React-icons

React Icons is a popular library used in React applications to add icons easily. It provides icons from many famous icon libraries such as Font Awesome, Bootstrap Icons, Material Design Icons, and more.

In this chapter, we are going to learn about React Icons, how to install them, and how to use them in React applications.

What are React Icons?

React Icons is an open-source library that provides a collection of icons for React applications.

Using React Icons, developers can import and use icons as React components. Instead of installing multiple icon libraries separately, React Icons provides all icons in a single package.

React Icons supports many popular icon libraries, including:

• Font Awesome
• Bootstrap Icons
• Material Design Icons
• Heroicons
• Feather Icons

Why React Icons?

The following reasons can correctly justify why React Icons are chosen.

1. In some instances, one library might not contain all the essential icons for usage. Thus, there arises a problem of installing some other libraries to import them into your project directory. React Icons saves developers from having to install different types of packages for such icons.
2. ES6 imports are greatly utilized by React Icons that allow us to include only those necessary icons for the current project. Hence, it removes space-related confusion.
3. React Icons are designed solely for React. This means that it is tailored only to React, and there exist no issues using it in our react project.
4. It is straightforward to implement.

Getting Started with React Icons

To get started with the practical visualization of React Icons, all we need to do is add a node package and import the component we want. To do that, we need to install the package using npm through the below-given command.

Installation (for standard projects)

Usage

Installation(for meteorjs, gatsbyjs, etc)

Usage

Importing React Icons

Importing React icons is very simple. It follows this rule or syntax.

For instance, consider that we are importing more than one icon from the library. We can do that in just one line of code using the ES6 destructing feature. See the code below for reference.

Now, to take this forward, add the below code in the App.js file and import all the necessary icons. The method of importing multiple icons is shown below.

Entering icon tags

After importing the icons from React Icons in the App.js file, we can use it anywhere in the file, like any HTML tag we know. Consider the below code, for instance, where we would be working only in the nav section within the div tag of the navbar-header. Enter two icons before the h1 tag and two after it, as shown below.

The icons would appear something like this.

Just like this, we can add multiple icons across different sections of our application. It is simple as that.

Icon Styling

There are usually various ways to style the icons. In this case, we would be using only two ways to style React icons to keep them neat and easy to understand.

1. React Context API.
2. Styled component.

Using React Context API

We can either choose to style an icon or more than one icon in React. We need to wrap up all the icons in the tag and style the desired icon residing in the tag.

To understand how it is done, import the Context API and add it to the top of the file, as shown below.

Let's style the added react icons in the App.js file as shown below.

The above CSS code would increase the font size. To visualize this, open the browser and the results should look something like this.

Let's move ahead by styling individual elements. To do that, first, change the color of each icon present on the other side. The overall code snippet is given below to help us out.

Styled Components in React Icons

Assuming that we are familiar with Styled components, let's install this component through the command line as shown below.

Importing Styled Components

Usage

Now, move down to the last line in App.js and add the styles as shown below.

Adding another styled component like an alarm, as given below.

To apply these styled components to the icons used in the App.js file, use the below method as shown.

It is important to note that all we did was rename the components to the styled-components and save the changes. It is simple as that. The final output might look something like this.

This was one of the examples to make us familiar with React Icons and how different components of React Icons can be used for adding different types of icons on a website or web application.