All right.
And before we start setting up the components, since we've set up quite a few icons over there.
All right away, showcase which library you prefer using.
And what is the overall setup?
So it's my preference the year's library by the name of React icons for the following reasons.
I mean, first of all, they have a bunch and bunch and bunch of libraries over there, so there's definitely
a bunch of icons to choose from.
And second, as far as working with the library, I find it very easy because you just grabbed the icon
as the component and then you can do a bunch of cool things if I want, I can add the class here and
set up the styling and that sort of thing.
Now let me stop, first of all, the server, because we'll have to install that one and then let's
navigate to the client.
And yes, there's a link which will utilize in a second.
Basically, this is backed their ducks.
But before we do anything, let me just install everything that I was going to beat my React Icons package.
Then I want to move back to my application, basically back to my server and go with npm and start,
since this will take a little bit of time.
So we might as well do that right now.
And let's navigate to the documentation.
And as you can see right now, my application is starting them.
And essentially the idea is following where once we install the library, then we have all of these
icons to choose from.
So notice how many other libraries they utilize the icon libraries.
And if you want to search for specific icon, for example, home, just type here and you'll get all
the results now.
In order to get the icon, you'll need the name and the library where it is coming from.
So, for example, with FHA, that's going to be font awesome.
And then the syntax is following where if I go back home, notice you go with icon name.
Now this is going to be a named import and then the ports and library.
And what's really cool, they give you a ride away suggestions there as well.
So let's try it out.
In my case, I'm going to do that in Napa.
So then navigate over there and then let me pick the icon.
I think I'm going to go with the home one, so I'm going to go back over here.
I'm going to go with font.
Awesome, because that's one of the libraries I end up using a lot.
Again, we're going to go over here.
Let me try the auto import.
So I'm going to go with F.A. home and nope, doesn't do anything.
OK, let's go here with import.
And then again, we can copy this to the clipboard.
So the moment we click on it, notice it is copied the clipboard and copy and paste.
And now we're looking from.
And we want to go with react icons, then forward slash and notice these are all our options.
So in our case, we're looking for FAA.
And then right off 30 Navar, we're going to go here with FAA home.
And that if everything is correct, I should be able to see that here as well and check it out.
Now I have my take on.
So this is what we're going to be doing for the remainder of the project, where essentially each and
every time we start working on a component, if we want to get the icons out right away, showcase which
ones we're getting.
And as a result, you'll be in the loop which icons we're using for that particular component.