1
00:00:00,180 --> 00:00:00,540
All right.

2
00:00:00,620 --> 00:00:06,810
And before we start setting up the components, since we've set up quite a few icons over there.

3
00:00:07,320 --> 00:00:10,470
All right away, showcase which library you prefer using.

4
00:00:10,770 --> 00:00:12,600
And what is the overall setup?

5
00:00:12,990 --> 00:00:18,030
So it's my preference the year's library by the name of React icons for the following reasons.

6
00:00:18,420 --> 00:00:23,920
I mean, first of all, they have a bunch and bunch and bunch of libraries over there, so there's definitely

7
00:00:23,920 --> 00:00:25,410
a bunch of icons to choose from.

8
00:00:26,390 --> 00:00:32,450
And second, as far as working with the library, I find it very easy because you just grabbed the icon

9
00:00:32,450 --> 00:00:38,720
as the component and then you can do a bunch of cool things if I want, I can add the class here and

10
00:00:38,720 --> 00:00:41,420
set up the styling and that sort of thing.

11
00:00:41,720 --> 00:00:46,370
Now let me stop, first of all, the server, because we'll have to install that one and then let's

12
00:00:46,370 --> 00:00:48,410
navigate to the client.

13
00:00:49,330 --> 00:00:52,480
And yes, there's a link which will utilize in a second.

14
00:00:52,800 --> 00:00:54,460
Basically, this is backed their ducks.

15
00:00:54,820 --> 00:01:00,100
But before we do anything, let me just install everything that I was going to beat my React Icons package.

16
00:01:00,430 --> 00:01:07,390
Then I want to move back to my application, basically back to my server and go with npm and start,

17
00:01:07,690 --> 00:01:09,490
since this will take a little bit of time.

18
00:01:09,730 --> 00:01:11,170
So we might as well do that right now.

19
00:01:11,440 --> 00:01:13,570
And let's navigate to the documentation.

20
00:01:13,960 --> 00:01:17,110
And as you can see right now, my application is starting them.

21
00:01:17,530 --> 00:01:24,520
And essentially the idea is following where once we install the library, then we have all of these

22
00:01:24,520 --> 00:01:25,510
icons to choose from.

23
00:01:25,780 --> 00:01:30,670
So notice how many other libraries they utilize the icon libraries.

24
00:01:30,970 --> 00:01:37,330
And if you want to search for specific icon, for example, home, just type here and you'll get all

25
00:01:37,330 --> 00:01:38,770
the results now.

26
00:01:38,800 --> 00:01:44,110
In order to get the icon, you'll need the name and the library where it is coming from.

27
00:01:44,150 --> 00:01:47,920
So, for example, with FHA, that's going to be font awesome.

28
00:01:48,160 --> 00:01:53,530
And then the syntax is following where if I go back home, notice you go with icon name.

29
00:01:53,800 --> 00:01:59,650
Now this is going to be a named import and then the ports and library.

30
00:01:59,920 --> 00:02:03,910
And what's really cool, they give you a ride away suggestions there as well.

31
00:02:04,210 --> 00:02:05,140
So let's try it out.

32
00:02:05,150 --> 00:02:07,930
In my case, I'm going to do that in Napa.

33
00:02:08,470 --> 00:02:12,040
So then navigate over there and then let me pick the icon.

34
00:02:12,310 --> 00:02:15,550
I think I'm going to go with the home one, so I'm going to go back over here.

35
00:02:15,790 --> 00:02:16,690
I'm going to go with font.

36
00:02:16,690 --> 00:02:20,500
Awesome, because that's one of the libraries I end up using a lot.

37
00:02:20,890 --> 00:02:22,330
Again, we're going to go over here.

38
00:02:22,360 --> 00:02:24,010
Let me try the auto import.

39
00:02:24,010 --> 00:02:28,930
So I'm going to go with F.A. home and nope, doesn't do anything.

40
00:02:29,260 --> 00:02:30,790
OK, let's go here with import.

41
00:02:30,790 --> 00:02:33,580
And then again, we can copy this to the clipboard.

42
00:02:33,590 --> 00:02:38,380
So the moment we click on it, notice it is copied the clipboard and copy and paste.

43
00:02:38,650 --> 00:02:39,850
And now we're looking from.

44
00:02:40,770 --> 00:02:46,320
And we want to go with react icons, then forward slash and notice these are all our options.

45
00:02:46,680 --> 00:02:48,690
So in our case, we're looking for FAA.

46
00:02:48,960 --> 00:02:53,940
And then right off 30 Navar, we're going to go here with FAA home.

47
00:02:54,120 --> 00:02:59,880
And that if everything is correct, I should be able to see that here as well and check it out.

48
00:03:00,270 --> 00:03:01,590
Now I have my take on.

49
00:03:01,860 --> 00:03:08,160
So this is what we're going to be doing for the remainder of the project, where essentially each and

50
00:03:08,160 --> 00:03:14,490
every time we start working on a component, if we want to get the icons out right away, showcase which

51
00:03:14,490 --> 00:03:15,180
ones we're getting.

52
00:03:15,450 --> 00:03:20,580
And as a result, you'll be in the loop which icons we're using for that particular component.