Icons are an excellent method for enhancing the look and ease of access of a user interface. They give a precise visual illustration of the task of an element. I will explain in full how to incorporate icons and make your UI 10 times better
What is React-icons?
React-icons is a small library that helps you add icons (from all different icon libraries) to your React apps. It delivers the icons to your app as components so they're easier to work with, and it lets you style them so they're consistent with the overall style of your app.
Let's go over the steps to add react-icons to your app and start using them in your components.
Step 1: Installation
The first step is to install the react-icons library using npm or yarn. Open up your terminal and run the following command:
# npm
npm install react-icons
# yarn
yarn add react-icons
Step 2: Import Icons
After the installation is complete, you can start importing the icons you want to use in your components. For example, to import the FaBeer icon from the Font Awesome library, you would use the following code:
import { FaBeer } from 'react-icons/fa';
Step 3: Use Icons in Components
Now that you have imported the icons, you can use them in your components. To use the FaBeer icon, for example, you would use the following code:
<FaBeer size={30} color="#087f23" />
You can also use the icons in JSX expressions:
const Icon = <FaBeer size={30} color="#087f23" />;
Step 4: Customize Icons
React-icons allows you to customize the icons by passing in props. For example, you can change the size and color of the icon. The size prop accepts a number, while the color prop accepts a string.
<FaBeer size={30} color="#087f23" />
You can also add additional className, onClick, and other event listeners to the icon
<FaBeer size={30} color="#087f23" className="my-icon" onClick={()=>console.log("icon clicked")}/>
Step 5: Utilize Different Icon Libraries
React-icons supports a wide variety of icon libraries, including Font Awesome, Bootstrap Icons, and many more. To use a different library, you will need to import icons from that library instead of the default 'react-icons/fa'.
For example, to use Bootstrap Icons, you would import them like this:
import { BsGithub } from 'react-icons/bs';
and then use them in your component like this:
<BsGithub size={30} color="#087f23" />
You can also import multiple icons like this:
import { BsGithub, BsTwitter, BsLinkedin } from 'react-icons/bs';
And that's it! You now know how to add React-icons to your app and start using them in your components. With react-icons, adding icons to your app has never been easier.
Check out the official React-icons documentation to find out what other cool icons you can add to your app.
If you enjoyed this article be sure to leave a like and connect with me on Twitter, thanks.