Practical React series: 1. React Icons

This article is a series of practical React components. Here, in this article, we are going to learn how to use react Icons.

So, without any further ado, let's start.

1. Install react-icons package in your terminal by running this command:

       npm install react-icons --save
   

2. Let's create a simple react component.

So, let's elaborate on the above code.

    import { FaReact } from "react-icons/fa";
    import { MdAlarm } from "react-icons/md";

    export default function App() {
    return (
            <div className="App">
                  <h2>npm install react-icons </h2>
                  <FaReact color="dodgerblue" size="10rem" />
                  <MdAlarm />
             </div> 
    );
  }

While importing any react icon, first you have to import that specific icon, and can specify properties like color, and size.

If you want to specify the same properties like color, and size to all the react icons in your react component, then you can use IconContext.

Refer this example,

    import { FaReact } from "react-icons/fa";
    import { MdAlarm } from "react-icons/md";
    import { IconContext } from "react-icons";

    export default function App() {
      return (
        <IconContext.Provider value={{ color: "blue", size: "12rem" }}>
          <div className="App">
            <h2>npm install react-icons </h2>
            <FaReact color="dodgerblue" size="10rem" />
            <MdAlarm />
            <h4>
              Here we can see MdAlarm also have a predefined color and size because
              of IconContext.Provider
            </h4>
          </div>
        </IconContext.Provider>
      );
    }

That's it. Without using any external .svg files or .png files or any other external icons, you can use this react-icons package.

Thank you for reading through this article. I hope it provided a good understanding of how to use icons in your react components.