Icons in the computing world are defined as pictorial representations or ideograms displayed on a computer screen that conveys a meaning. Icons convey characteristics that separate them from each other and make a thing exist uniquely. Under all of these aspects, they are also called symbols popularly that quickly comprehend thoughts about a software tool, a function, a file, a data. Icons represent real-world entities that contain detailed illustrations and are designed so that one symbol speaks it all.
In this article, we will be talking about React Icons specifically. React is a powerful library that is dynamic and smart. It has all such assets that make it unique. We would also be learning about how what, and why of React Icons in this article and carry out the discussion by practically implementing them. Let's learn more about React Icons.
What are React Icons?
Why React Icons?
The following reasons can correctly justify why React Icons are chosen.
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)
Installation(for meteorjs, gatsbyjs, etc)
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.
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.
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
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.
Let's look at some of the advantages and disadvantages of using React Icons.
The advantages are as follows:
Icons are an integral part that needs no explanations at all. They play a crucial role in separating software's UI and make them unique in their class. It also appeals to the users about some of the important features that users see and how they use them. Many icons remain disposed in React Icons, and users can use it anytime with just simple import.