Day 15: Implementing React Icons in a React Application

#learningreact #day15

On the 15th day of the MERN stack, today I learned about implementing React icons in a React application and explored about adding another key with a dynamic value in an API-fetched object according to event/state trigger. So here is a short summary of what I learned today.

React Icons Package:

When working with a React application, it’s necessary to add various icons during development because icons are a crucial part of the application; they convey more than words. Icons help make web applications more visually appealing and enhance user experience. Therefore, icons are essential to web applications. To implement icons in a React application, there are various methods such as downloading icon images and importing them, or linking various CDNs and libraries. However, there is a package named “react-icons” which already provides a huge collection of React icons from various CDN links and libraries, making it a more convenient way to implement icons in React applications. So today we explored this “react-icons” package. This package is best for adding icons in react application.

How to Implement React Icons in a React Application:

To implement the “react-icons” package and include icons in a React application, first, we need to install the “react-icons” package in our project directory using this command:

npm install react-icons

Then, we need to import the required icon module into our page as needed, like this:

import { FaBeer } from 'react-icons/fa';

After that, we need to implement that icon component in our fragment like this:

export const export const IconsDemo = () => {
return (
  <>
    <h3>Let's go for a <FaBeer />?</h3>
  </>
 );
}

For all module names and icon component names, explore this link:

https://react-icons.github.io/react-icons/