1
00:00:00,200 --> 00:00:00,620
Okay.

2
00:00:00,620 --> 00:00:06,320
And before we start working on the Navbar, let's also cover React Icons Library, which we're going

3
00:00:06,320 --> 00:00:09,980
to use in this project to generate our icons.

4
00:00:10,010 --> 00:00:17,870
Now, the reason why I really prefer this particular library is because they have tons and tons and

5
00:00:17,870 --> 00:00:20,480
tons of libraries to choose from.

6
00:00:21,100 --> 00:00:26,190
And second, we import icons as components.

7
00:00:26,200 --> 00:00:31,570
So it's very easy to set up the logic, the styles and the rest of the stuff.

8
00:00:31,600 --> 00:00:38,360
If you navigate to the docs, you'll see the libraries that are available to us.

9
00:00:38,380 --> 00:00:43,450
So essentially these are all the libraries that we can use.

10
00:00:44,200 --> 00:00:47,170
We can even search for the icon, let's say, home.

11
00:00:47,290 --> 00:00:53,830
So we set up the search and notice these are going to be all the home icons we can use.

12
00:00:53,860 --> 00:00:55,000
Now, the one gotcha.

13
00:00:55,000 --> 00:01:00,940
We need to be very specific which library we're looking for, and then we can just start using it as

14
00:01:00,940 --> 00:01:02,380
a component.

15
00:01:02,410 --> 00:01:09,640
Now, in order to get started, you want to install the library and then you want to import the icon

16
00:01:09,640 --> 00:01:18,130
name and then the React Icons library, forward slash, and then the actual icon library you're going

17
00:01:18,130 --> 00:01:18,730
to use.

18
00:01:18,760 --> 00:01:20,050
So let's try it out.

19
00:01:20,080 --> 00:01:23,150
I'm going to go to NAV Bar since that's the.

20
00:01:23,820 --> 00:01:26,820
Next component we're going to work on.

21
00:01:27,120 --> 00:01:31,050
And effectively I want to get the home icon.

22
00:01:31,050 --> 00:01:34,070
So this icon is coming from Font Awesome library.

23
00:01:34,080 --> 00:01:41,250
So we're going to go with for home from then React icons and then forward slash and for as a side note

24
00:01:41,250 --> 00:01:48,660
in their docs, you can just click on the icon and the name will be automatically copied to the clipboard.

25
00:01:49,240 --> 00:01:54,220
Which of course makes it very easy to go back to the project and grab the icon.

26
00:01:54,220 --> 00:02:00,270
But again, make sure that you import from the specific library, otherwise you'll get the error.

27
00:02:00,280 --> 00:02:02,800
And when it comes to a NAV bar.

28
00:02:03,370 --> 00:02:04,300
For now.

29
00:02:04,390 --> 00:02:06,100
I'm just going to place it over here.

30
00:02:06,520 --> 00:02:10,060
I'll set up a heading two with the nav bar.

31
00:02:10,850 --> 00:02:12,230
Again, this is temporary.

32
00:02:12,530 --> 00:02:14,660
We'll change all of this in the next video.

33
00:02:14,660 --> 00:02:16,480
And let's just go with home.

34
00:02:16,550 --> 00:02:22,520
And if everything is correct, we should see the home icon in the nav bar.