Using React Icons

The React library is full of resources to help optimize your code. One of the features I’ve recently discovered is React Icons. React Icons gives you the ability to import Icons directly into your React Code.

Your first step is to Install React Icons in your terminal:

npm install react-icons --save

Once installed, it’s time to view the vast library of available icons to use in your projects. Here are some examples from https://react-icons.github.io/react-icons:

We have chosen to use the ImEvil icon inside of our button. Let’s import the icon into out React Component file. We will need to surround the icon name in curly braces, similar to how we import hooks. Following the forward slash should be the first two letters of the icon name.

import React from 'react';
import { ImEvil } from 'react-icons/im'

Now that we have icons installed and the specific icon imported into our component, we can start using the icon in our code. We will insert into our code, similar to how any other React Component looks (angle bracket, capitalized first letter, forward slash, angle bracket)

function devilButton(){
    return(
     <button>
       <ImEvil /> Button
     </button>
   )
}

Once theIcon is correctly placed, it should now be visible in the DOM!

Go head give the React Icons a try to jazz up your projects. My personal favorite use of icons are the filled and unfilled ones for use with state. In the code below each Icon is assigned state. I then used a ternary operator, to toggle between Icons when the button is clicked.

import { ImEvil } from 'react-icons/im'
import { ImEvil2 } from 'react-icons/im'
import { useState } from 'react'

function devilButton(){

 const [change, setChange] =useState(true)
 
 function handleChange(){
  setChange((change) => !change)
 }

    return(
       <div>
        {change ? (
         <button> <ImEvil /> Button </button>
          ) : (
        <button> <ImEvil2 /> Button </button>
         )}
      </div>
   )
}

Which looks like this:

Resources used:

React Icons

react-icons