- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.360 --> 00:00:02.030
In this guide, we are gonna learn
2
00:00:02.030 --> 00:00:06.230
how we can integrate icons into our React applications
3
00:00:06.230 --> 00:00:09.940
and we're gonna use the fortawesome library,
4
00:00:09.940 --> 00:00:11.670
specifically for React.
5
00:00:11.670 --> 00:00:13.700
So we're going to install this library,
6
00:00:13.700 --> 00:00:16.490
and we're actually going to install a set of libraries.
7
00:00:16.490 --> 00:00:18.500
I'm gonna show you some of the documentation
8
00:00:18.500 --> 00:00:22.650
and then we're going to add a sign out link directly
9
00:00:22.650 --> 00:00:24.020
in our NavBar.
10
00:00:24.020 --> 00:00:25.270
So let's get started.
11
00:00:25.270 --> 00:00:29.410
Right here, I will share the link to this library
12
00:00:29.410 --> 00:00:31.520
in the show notes and if you come down,
13
00:00:31.520 --> 00:00:33.840
you'll see that they have some great examples,
14
00:00:33.840 --> 00:00:37.480
both for the installation and then also for how
15
00:00:37.480 --> 00:00:40.230
to use this set of code libraries
16
00:00:40.230 --> 00:00:42.220
and this is specifically for React
17
00:00:42.220 --> 00:00:45.081
and it gives you access to the full set
18
00:00:45.081 --> 00:00:50.081
of icons that you can use inside of your React applications.
19
00:00:50.450 --> 00:00:52.670
So the very first thing we're gonna do
20
00:00:52.670 --> 00:00:56.610
is we have to install the library itself
21
00:00:56.610 --> 00:01:00.090
and we're actually going to install three separate libraries
22
00:01:00.090 --> 00:01:01.220
to get this to work.
23
00:01:01.220 --> 00:01:04.420
So we have the installation instructions right here
24
00:01:04.420 --> 00:01:07.950
and so I'm simply going to type npm i
25
00:01:07.950 --> 00:01:11.390
and then I'm gonna show how we can install these all
26
00:01:11.390 --> 00:01:12.730
in the same line.
27
00:01:12.730 --> 00:01:14.680
So I'm gonna copy the first one,
28
00:01:14.680 --> 00:01:17.110
switch to Visual Studio Code here
29
00:01:17.110 --> 00:01:20.340
and I'm gonna type npm i,
30
00:01:20.340 --> 00:01:23.060
you don't have to type in the --save,
31
00:01:23.060 --> 00:01:24.730
that's gonna happen automatically.
32
00:01:24.730 --> 00:01:27.580
So I'm gonna type in the first one in the list,
33
00:01:27.580 --> 00:01:30.750
which is fontawesome-svg-core.
34
00:01:30.750 --> 00:01:35.750
Then I'm gonna do the free-solid-svg-icons
35
00:01:36.320 --> 00:01:39.090
and then lastly, react-fontawesome
36
00:01:39.090 --> 00:01:41.010
and make sure that you get everything
37
00:01:41.010 --> 00:01:43.520
from the @ symbol, where it says fortawesome,
38
00:01:43.520 --> 00:01:45.540
that's gonna be the same for all of these
39
00:01:45.540 --> 00:01:50.470
and then /react-fontawesome or whatever one
40
00:01:50.470 --> 00:01:52.020
of the libraries you're copying.
41
00:01:52.020 --> 00:01:54.910
So this is the full set of libraries we need
42
00:01:54.910 --> 00:01:55.960
and if you're curious
43
00:01:55.960 --> 00:01:59.582
on why they have us install three different libraries,
44
00:01:59.582 --> 00:02:03.640
it's because the fortawesome module
45
00:02:03.640 --> 00:02:07.540
is pretty large and you wouldn't want to install libraries
46
00:02:07.540 --> 00:02:09.370
that you're not actually going to use.
47
00:02:09.370 --> 00:02:11.280
That'd be considered a poor practice.
48
00:02:11.280 --> 00:02:14.000
You only wanna install what you're actually going
49
00:02:14.000 --> 00:02:16.000
to integrate into your application.
50
00:02:16.000 --> 00:02:19.180
So this is gonna be the base set of items
51
00:02:19.180 --> 00:02:20.930
and so now what we're gonna do
52
00:02:20.930 --> 00:02:24.300
is type the enter key
53
00:02:24.300 --> 00:02:26.070
and we're going to install this
54
00:02:26.070 --> 00:02:28.070
and so it's gonna go up to npm
55
00:02:28.070 --> 00:02:30.380
and it's gonna grab each one of these libraries
56
00:02:30.380 --> 00:02:34.690
and it's gonna place them in the Node modules directory.
57
00:02:34.690 --> 00:02:36.751
Now, scanning down a little bit more,
58
00:02:36.751 --> 00:02:39.270
let's look at some of the usage.
59
00:02:39.270 --> 00:02:42.970
So we have our fontawesome component here.
60
00:02:42.970 --> 00:02:44.850
This is the reason why we're using this
61
00:02:44.850 --> 00:02:48.720
is because by using this fortawesome library,
62
00:02:48.720 --> 00:02:51.297
we're able to use each of the icons
63
00:02:51.297 --> 00:02:55.300
as a component, which means that we can pass props to them
64
00:02:55.300 --> 00:02:58.670
and we can treat them like a standard component.
65
00:02:58.670 --> 00:03:02.740
So right here, this is the basic syntax for calling this.
66
00:03:02.740 --> 00:03:06.140
Now, let's also see how we can import these libraries.
67
00:03:06.140 --> 00:03:07.691
So at the very top of the file,
68
00:03:07.691 --> 00:03:10.910
we are going to import one of these libraries.
69
00:03:10.910 --> 00:03:14.670
I'm gonna import the, we're not gonna use font-awesome-icon,
70
00:03:14.670 --> 00:03:17.990
this is simply gonna be react-fontawesome,
71
00:03:17.990 --> 00:03:21.290
and then if we scroll down, we can see a few
72
00:03:21.290 --> 00:03:23.840
of the other types of ways
73
00:03:23.840 --> 00:03:25.100
that we can import these.
74
00:03:25.100 --> 00:03:27.370
So we can import a library.
75
00:03:27.370 --> 00:03:30.200
We can import icons one at a time
76
00:03:30.200 --> 00:03:35.200
and we can also import each one of these icons separately
77
00:03:35.220 --> 00:03:37.468
and don't worry if this is still a little bit fuzzy.
78
00:03:37.468 --> 00:03:40.140
We're gonna walk through each one of these
79
00:03:40.140 --> 00:03:42.300
and we're gonna see how it can work.
80
00:03:42.300 --> 00:03:43.770
So let's get started.
81
00:03:43.770 --> 00:03:45.140
Let's see if that installed.
82
00:03:45.140 --> 00:03:46.510
So yes, that's perfect.
83
00:03:46.510 --> 00:03:49.180
So we now have all three of these libraries
84
00:03:49.180 --> 00:03:51.460
and that's all we're gonna have to do
85
00:03:51.460 --> 00:03:54.750
in order to have access to these.
86
00:03:54.750 --> 00:03:56.670
Now, I wanted to keep this one nice and short
87
00:03:56.670 --> 00:03:59.220
because working with these icons
88
00:03:59.220 --> 00:04:01.410
can actually be a little bit tricky
89
00:04:01.410 --> 00:04:03.084
and so I wanna have a dedicated guide
90
00:04:03.084 --> 00:04:07.820
where we see how we can build our own library of icons.
91
00:04:07.820 --> 00:04:10.270
So we're gonna create our own set,
92
00:04:10.270 --> 00:04:13.960
our own module where we bring in each one
93
00:04:13.960 --> 00:04:15.850
of the icons that we wanna use
94
00:04:15.850 --> 00:04:17.870
and only the icons we wanna use
95
00:04:17.870 --> 00:04:19.960
and then we can make those available
96
00:04:19.960 --> 00:04:21.120
throughout the application.
97
00:04:21.120 --> 00:04:22.600
So I'll see you in the next guide
98
00:04:22.600 --> 00:04:24.283
when we build out that module.