External Components

go.raybo.org/3JSG

In a real project you won't want to do all the work yourself, so let's take a look at how we can install a module to help us add icons to our projects.

React Icons 

npm install react-icons --save

React icons gives you access to thousands of some of my favorite icon libraries like Font Awesome, Bootstrap Icons, and CSS.gg.... To get it installed, we're going to issue and npm install command.

Importing an Icon 

import { ICONNAME } from "react-icons/LIBNAME";
...
<ICONNAME />

Once you've installed the library, whenever you want to use an icon, you can easily import it into the component. I'm going to use one called box icons.

To use an icon. First you figure out which library you want, or you can just do a search for what you need.

import { BsFillBootstrapFill } from "react-icons/bs";

<h1 className="text-5xl"><BsFillBootstrapFill className="inline-block text-red-400 align-top" /> Pet List</h1>