- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.590 --> 00:00:02.670
Now that we have Font Awesome installed
2
00:00:02.670 --> 00:00:03.870
in our application,
3
00:00:03.870 --> 00:00:06.800
now we're gonna build out a library module
4
00:00:06.800 --> 00:00:09.040
so that any component in our app
5
00:00:09.040 --> 00:00:12.723
is able to access the full set of icons
6
00:00:12.723 --> 00:00:14.940
that we wanna make available.
7
00:00:14.940 --> 00:00:16.450
So what we're gonna do
8
00:00:16.450 --> 00:00:20.780
is actually build out our own set of icon imports
9
00:00:20.780 --> 00:00:23.540
and then we are going to open that up
10
00:00:23.540 --> 00:00:25.920
to any component that needs them.
11
00:00:25.920 --> 00:00:27.910
So if you go through the documentation
12
00:00:27.910 --> 00:00:30.600
and part of the reason why I've split these guides
13
00:00:30.600 --> 00:00:33.120
into a few different sections
14
00:00:33.120 --> 00:00:36.850
is because the documentation can be a little bit tricky
15
00:00:36.850 --> 00:00:39.690
if you've never performed this type of task before.
16
00:00:39.690 --> 00:00:41.470
But the other reason why I've done it
17
00:00:41.470 --> 00:00:43.970
is because I've found that this process
18
00:00:43.970 --> 00:00:45.740
that I'm gonna show you in this guide
19
00:00:45.740 --> 00:00:48.140
is something that I've been able to do
20
00:00:48.140 --> 00:00:51.260
in pretty much any application that I work with
21
00:00:51.260 --> 00:00:53.180
that I wanna use Font Awesome in.
22
00:00:53.180 --> 00:00:56.830
So you're gonna be able to replicate this identical code
23
00:00:56.830 --> 00:00:59.600
in your own projects from here on out.
24
00:00:59.600 --> 00:01:01.720
And that is very helpful.
25
00:01:01.720 --> 00:01:04.260
So in the documentation,
26
00:01:04.260 --> 00:01:08.140
you can see that they say in your app.js file
27
00:01:08.140 --> 00:01:10.010
to add these imports
28
00:01:10.010 --> 00:01:12.210
where you're importing a library
29
00:01:12.210 --> 00:01:14.890
and you're importing these icons.
30
00:01:14.890 --> 00:01:16.660
We're not gonna worry about the brand's icon
31
00:01:16.660 --> 00:01:17.950
'cause we're not using that
32
00:01:17.950 --> 00:01:20.130
but they show how you can import those
33
00:01:20.130 --> 00:01:22.430
and then you have this library function
34
00:01:22.430 --> 00:01:25.360
and then you add the different items
35
00:01:25.360 --> 00:01:29.630
that you want exported and available in your application.
36
00:01:29.630 --> 00:01:32.360
That can a be a little bit tricky for one
37
00:01:32.360 --> 00:01:33.510
if you've never done it
38
00:01:33.510 --> 00:01:35.770
but also, if you were to place all
39
00:01:35.770 --> 00:01:39.670
of this code inside of your application.js file,
40
00:01:39.670 --> 00:01:41.920
then you're gonna see that as you start
41
00:01:41.920 --> 00:01:45.850
to add more icons, that your app.js file
42
00:01:45.850 --> 00:01:46.980
or your bootstrap file,
43
00:01:46.980 --> 00:01:48.770
'cause that's what we're gonna be using,
44
00:01:48.770 --> 00:01:50.640
is gonna become very long
45
00:01:50.640 --> 00:01:53.560
and it's gonna look like the entire component
46
00:01:53.560 --> 00:01:55.880
is doing nothing except managing icons,
47
00:01:55.880 --> 00:01:57.930
which is not really a great practice.
48
00:01:57.930 --> 00:01:59.110
So what we're gonna do,
49
00:01:59.110 --> 00:02:02.750
we're gonna see how we can take this process right here
50
00:02:02.750 --> 00:02:06.870
and we're going to put it in its own dedicated module
51
00:02:06.870 --> 00:02:08.190
and then we're simply gonna be able
52
00:02:08.190 --> 00:02:11.740
to import that module into our bootstrap file.
53
00:02:11.740 --> 00:02:13.610
Don't worry if that doesn't quite make sense yet.
54
00:02:13.610 --> 00:02:16.340
We're gonna walk through it in detail here.
55
00:02:16.340 --> 00:02:18.780
So I'm gonna open up Visual Studio Code.
56
00:02:18.780 --> 00:02:20.670
I have our NavBar component open
57
00:02:20.670 --> 00:02:23.200
but we're not going to work with that quite yet.
58
00:02:23.200 --> 00:02:24.880
We'll get to that at the end.
59
00:02:24.880 --> 00:02:28.750
And then I'm gonna go into our utils directory.
60
00:02:28.750 --> 00:02:31.170
And I'm gonna create a new file here.
61
00:02:31.170 --> 00:02:32.920
I'm gonna have it lowercase
62
00:02:32.920 --> 00:02:34.330
'cause this is not a component.
63
00:02:34.330 --> 00:02:36.360
This is just a helper module.
64
00:02:36.360 --> 00:02:39.980
And I'm gonna call it icons.js.
65
00:02:39.980 --> 00:02:41.210
And now inside of here,
66
00:02:41.210 --> 00:02:44.340
this is where we're going to have the type of code
67
00:02:44.340 --> 00:02:46.280
that was in the documentation,
68
00:02:46.280 --> 00:02:48.830
and you can even just copy this if you'd like.
69
00:02:48.830 --> 00:02:51.540
We're not going to include the fab like I mentioned.
70
00:02:51.540 --> 00:02:54.896
But for right now, we can just copy these imports.
71
00:02:54.896 --> 00:02:58.793
And I'm gonna get rid of that fab one.
72
00:02:58.793 --> 00:03:01.600
So let's see what we're imported.
73
00:03:01.600 --> 00:03:04.330
We've imported the library module
74
00:03:04.330 --> 00:03:06.560
from fontawesome-svg-core.
75
00:03:06.560 --> 00:03:08.530
That's one of the libraries we installed.
76
00:03:08.530 --> 00:03:11.440
Now, here, these are the actual icons
77
00:03:11.440 --> 00:03:12.420
that we're wanting to use.
78
00:03:12.420 --> 00:03:14.130
Now, these were in the documentation.
79
00:03:14.130 --> 00:03:15.520
We're not going to use these.
80
00:03:15.520 --> 00:03:19.050
So let's see the names that we are gonna use
81
00:03:19.050 --> 00:03:20.930
because this part can be very tricky
82
00:03:20.930 --> 00:03:22.410
if you've never used it before.
83
00:03:22.410 --> 00:03:26.090
The Font Awesome library for React uses kind
84
00:03:26.090 --> 00:03:30.010
of a weird syntax if you've never worked with it before.
85
00:03:30.010 --> 00:03:31.970
So you're gonna go to Font Awesome
86
00:03:31.970 --> 00:03:34.500
and I'm gonna provide to you this link
87
00:03:34.500 --> 00:03:36.320
so you can go and access it,
88
00:03:36.320 --> 00:03:37.690
and for search icons,
89
00:03:37.690 --> 00:03:40.820
I'm gonna just say sign out
90
00:03:40.820 --> 00:03:42.640
'cause that's the icon we wanna use here
91
00:03:42.640 --> 00:03:45.270
and you can see that it has all the icons.
92
00:03:45.270 --> 00:03:46.240
If they're grayed out,
93
00:03:46.240 --> 00:03:48.760
that means that they are Pro paid icons.
94
00:03:48.760 --> 00:03:51.700
We're just gonna use this on called signoutalt.
95
00:03:51.700 --> 00:03:55.000
Now, the code for actually using this
96
00:03:55.000 --> 00:03:57.350
in regular HTML is right here
97
00:03:57.350 --> 00:03:59.020
where you could just copy this.
98
00:03:59.020 --> 00:04:02.640
That will not work for React Font Awesome.
99
00:04:02.640 --> 00:04:05.410
They have a very specific syntax
100
00:04:05.410 --> 00:04:06.490
that you have to follow.
101
00:04:06.490 --> 00:04:10.310
It's kind of like how you work with style props
102
00:04:10.310 --> 00:04:12.450
when you're passing in those.
103
00:04:12.450 --> 00:04:14.010
And so what we're gonna do
104
00:04:14.010 --> 00:04:16.300
is I'm just gonna copy the URL up here.
105
00:04:16.300 --> 00:04:21.300
You could also just copy where it says fa-sign-out-alt here
106
00:04:21.530 --> 00:04:24.100
and we're going to switch back in the code
107
00:04:24.100 --> 00:04:28.015
and instead of using the ones in the documentation,
108
00:04:28.015 --> 00:04:30.960
I'm going to say sign-out-alt
109
00:04:30.960 --> 00:04:32.720
but the way I'm going to import it
110
00:04:32.720 --> 00:04:37.270
is I'm gonna say lowercase fa, then the S
111
00:04:37.270 --> 00:04:39.260
is gonna be capitalized
112
00:04:39.260 --> 00:04:41.160
and then I'm gonna get rid of the dash
113
00:04:41.160 --> 00:04:43.393
and I'm gonna capitalize the O,
114
00:04:43.393 --> 00:04:46.610
then get rid of the dash and capitalize the A.
115
00:04:46.610 --> 00:04:49.490
So this the syntax that you're gonna see
116
00:04:49.490 --> 00:04:52.920
for your imports and that's kind of a little bit tricky.
117
00:04:52.920 --> 00:04:54.500
The only way that you'd know to do that
118
00:04:54.500 --> 00:04:56.320
is by reading the documentation.
119
00:04:56.320 --> 00:04:57.300
But now that I've shown you,
120
00:04:57.300 --> 00:04:59.340
now you know how to do it.
121
00:04:59.340 --> 00:05:01.130
Now, with that done,
122
00:05:01.130 --> 00:05:04.600
now we need to simply export a function
123
00:05:04.600 --> 00:05:07.720
where we're using the library add.
124
00:05:07.720 --> 00:05:12.330
So this is in reference to the documentation here
125
00:05:12.330 --> 00:05:14.820
where it says library.add
126
00:05:14.820 --> 00:05:19.360
and then you pass in the different types of icons
127
00:05:19.360 --> 00:05:20.990
that you wanna add to the library.
128
00:05:20.990 --> 00:05:23.830
But we need to wrap it up in a function and export it.
129
00:05:23.830 --> 00:05:25.519
So I'm gonna say export default
130
00:05:25.519 --> 00:05:28.010
and this is simply going to be,
131
00:05:28.010 --> 00:05:30.830
this isn't gonna take in any types of argument.
132
00:05:30.830 --> 00:05:32.580
So it's gonna be a fat arrow function
133
00:05:32.580 --> 00:05:36.330
and then it's gonna return library.add,
134
00:05:36.330 --> 00:05:38.110
just like in the documentation,
135
00:05:38.110 --> 00:05:39.890
and then inside of there,
136
00:05:39.890 --> 00:05:42.380
we're gonna pass in the icon we wanna add,
137
00:05:42.380 --> 00:05:43.760
which is that faSignOutAlt
138
00:05:45.600 --> 00:05:47.540
and that's all we need to do here.
139
00:05:47.540 --> 00:05:48.373
Now, the cool thing
140
00:05:48.373 --> 00:05:51.630
about this is any time we want a new icon here,
141
00:05:51.630 --> 00:05:54.670
so you could go through that full Font Awesome library,
142
00:05:54.670 --> 00:05:56.360
pick out all the icons that you wanna use
143
00:05:56.360 --> 00:05:58.950
in the application and all you have to do
144
00:05:58.950 --> 00:06:02.170
is add them inside of this import statement
145
00:06:02.170 --> 00:06:04.970
and then add them to where it says library.add.
146
00:06:04.970 --> 00:06:07.350
So say you had some other one called fa
147
00:06:08.680 --> 00:06:11.760
and let's call it AddressBook since that one's at the top.
148
00:06:11.760 --> 00:06:14.210
You'd add that at the import
149
00:06:14.210 --> 00:06:15.570
and then you'd add it
150
00:06:15.570 --> 00:06:17.830
to this library.add function.
151
00:06:17.830 --> 00:06:19.940
You'd say faAddressBook
152
00:06:19.940 --> 00:06:22.620
and now every part of the application
153
00:06:22.620 --> 00:06:24.150
could call that icon.
154
00:06:24.150 --> 00:06:28.210
So in the future, that's how you can add any other icons
155
00:06:28.210 --> 00:06:29.580
that you wanna work with.
156
00:06:29.580 --> 00:06:30.840
So I'm gonna hit Save here.
157
00:06:30.840 --> 00:06:35.300
And now I'm gonna open up our bootstrap.js file.
158
00:06:35.300 --> 00:06:39.290
So this is located in src, bootstrap.js
159
00:06:39.290 --> 00:06:42.610
and what I wanna do now is import that library.
160
00:06:42.610 --> 00:06:44.630
So I'm gonna say import
161
00:06:44.630 --> 00:06:46.774
and I'm just gonna call it icons
162
00:06:46.774 --> 00:06:51.774
from ./utils and then icons just like that.
163
00:06:53.560 --> 00:06:55.390
Now, because this is a function,
164
00:06:55.390 --> 00:06:57.140
inside of our main function,
165
00:06:57.140 --> 00:06:58.580
we simply need to call it.
166
00:06:58.580 --> 00:07:03.180
So now I can say icons, call it as a function, hit Save.
167
00:07:03.180 --> 00:07:04.410
Now, what's gonna happen
168
00:07:04.410 --> 00:07:07.950
is when the entire application loads,
169
00:07:07.950 --> 00:07:09.810
this main function here
170
00:07:09.810 --> 00:07:12.740
is gonna look for the icons library that we created.
171
00:07:12.740 --> 00:07:14.350
It's gonna call the function
172
00:07:14.350 --> 00:07:16.710
and then that is going to make any
173
00:07:16.710 --> 00:07:18.130
of the icons available
174
00:07:18.130 --> 00:07:20.320
to any component in the app
175
00:07:20.320 --> 00:07:21.730
that wants to use them.
176
00:07:21.730 --> 00:07:24.320
So that is how that works.
177
00:07:24.320 --> 00:07:26.340
Now, with all of that in place,
178
00:07:26.340 --> 00:07:29.390
now let's open up that NavBar component.
179
00:07:29.390 --> 00:07:31.160
It's in the shared directory
180
00:07:31.160 --> 00:07:32.460
and now what we can do
181
00:07:32.460 --> 00:07:35.130
is get rid of where it says logout here
182
00:07:35.130 --> 00:07:37.110
and now let's change it
183
00:07:37.110 --> 00:07:40.770
and let's import the Font Awesome icon.
184
00:07:40.770 --> 00:07:43.850
So what we can do is switch back to the documentation
185
00:07:43.850 --> 00:07:45.900
and see exactly how to work with this.
186
00:07:45.900 --> 00:07:48.510
So we're gonna import FontAwesomeIcon
187
00:07:48.510 --> 00:07:53.480
from this @forawesome/react-fontawesome.
188
00:07:53.480 --> 00:07:56.980
And part of the reason why I'm kinda taking this one step
189
00:07:56.980 --> 00:07:59.340
at a time is because if you've never done this before,
190
00:07:59.340 --> 00:08:02.570
I remember when I was having to teach this to myself,
191
00:08:02.570 --> 00:08:03.460
it was kinda tricky
192
00:08:03.460 --> 00:08:06.220
because they had a lot of very similar names.
193
00:08:06.220 --> 00:08:09.037
So we've now imported FontAwesomeIcon
194
00:08:09.037 --> 00:08:14.037
and now we can simply call that from within our logout link.
195
00:08:14.870 --> 00:08:16.720
So inside of the a tag,
196
00:08:16.720 --> 00:08:19.130
I'm gonna call FontAwesomeIcon
197
00:08:19.130 --> 00:08:22.800
and then it takes in a prop called icon
198
00:08:22.800 --> 00:08:24.560
and then that's gonna be a string
199
00:08:24.560 --> 00:08:26.360
and then I'm gonna wanna close it out.
200
00:08:26.360 --> 00:08:30.490
Now, the syntax we're calling the icon is closer
201
00:08:30.490 --> 00:08:33.280
to the actual syntax that you would see
202
00:08:33.280 --> 00:08:35.880
in the Font Awesome documentation.
203
00:08:35.880 --> 00:08:38.290
So we're not going to call this faSignOutAlt
204
00:08:40.150 --> 00:08:42.260
but instead, what we're gonna be able to do
205
00:08:42.260 --> 00:08:47.260
is simply type out sign-out-alt.
206
00:08:48.450 --> 00:08:50.530
So this is exactly like how it is
207
00:08:50.530 --> 00:08:52.790
in the Font Awesome documentation.
208
00:08:52.790 --> 00:08:54.350
So I know that can be a little bit tricky.
209
00:08:54.350 --> 00:08:56.620
They keep on switching back and forth
210
00:08:56.620 --> 00:08:59.230
between their naming convention
211
00:08:59.230 --> 00:09:01.630
and that definitely is not my favorite.
212
00:09:01.630 --> 00:09:04.400
It means that you have to read the documentation
213
00:09:04.400 --> 00:09:05.570
to understand how it works.
214
00:09:05.570 --> 00:09:08.660
But that is how the developers wanted to make it work
215
00:09:08.660 --> 00:09:10.210
so that's what we're gonna follow.
216
00:09:10.210 --> 00:09:12.190
So now let's go check this out.
217
00:09:12.190 --> 00:09:13.450
Let's see if it's working.
218
00:09:13.450 --> 00:09:15.540
I'm gonna open up the application here
219
00:09:15.540 --> 00:09:16.610
and there you go.
220
00:09:16.610 --> 00:09:18.080
You can see the icon is there.
221
00:09:18.080 --> 00:09:21.280
It's very small but you can see that that is working.
222
00:09:21.280 --> 00:09:23.250
That is the sign-out-alt.
223
00:09:23.250 --> 00:09:25.450
Now, I can hover over this
224
00:09:25.450 --> 00:09:27.970
and I can click Inspect
225
00:09:27.970 --> 00:09:29.140
and now what I could do
226
00:09:29.140 --> 00:09:32.730
is we could see exactly how we could make this bigger.
227
00:09:32.730 --> 00:09:36.570
So in the a tag, I'm selecting the a tag here,
228
00:09:36.570 --> 00:09:38.050
I could come up here
229
00:09:38.050 --> 00:09:41.223
and let's give ourselves a little bit of room,
230
00:09:42.200 --> 00:09:45.990
and so where its says nav-wrapper .right-side a,
231
00:09:45.990 --> 00:09:48.570
here I can add a font-size
232
00:09:48.570 --> 00:09:51.390
and let's go with 2rem,
233
00:09:51.390 --> 00:09:53.720
and you can see that made it a lot bigger.
234
00:09:53.720 --> 00:09:55.960
We could even see what 3rem looks like
235
00:09:55.960 --> 00:09:57.070
and that looks nice and big.
236
00:09:57.070 --> 00:09:59.150
I think something in between there,
237
00:09:59.150 --> 00:10:01.920
like maybe 2.5 would work well.
238
00:10:01.920 --> 00:10:05.680
So now we can open up our nav-wrapper styles
239
00:10:05.680 --> 00:10:10.260
and we can add this font-size rule to our style sheet.
240
00:10:10.260 --> 00:10:12.700
So let me close this out.
241
00:10:12.700 --> 00:10:17.400
I've copied that and now I'm gonna open up our nav styles
242
00:10:17.400 --> 00:10:22.400
that's located in our style directory, navbar, base
243
00:10:22.820 --> 00:10:27.620
and then I wanna go into where it says right-side a
244
00:10:27.620 --> 00:10:31.093
and this is where I'm gonna add font-size: 2.5rem.
245
00:10:31.991 --> 00:10:34.260
So that's giving us the two and a half times
246
00:10:34.260 --> 00:10:37.000
the normal expected size.
247
00:10:37.000 --> 00:10:38.250
Now if I come back here,
248
00:10:38.250 --> 00:10:39.854
you can see if I hit Refresh,
249
00:10:39.854 --> 00:10:42.860
everything there is working beautifully.
250
00:10:42.860 --> 00:10:44.159
You can see.
251
00:10:44.159 --> 00:10:45.710
We hover over, we have that icon.
252
00:10:45.710 --> 00:10:48.750
Now if I actually click it,
253
00:10:48.750 --> 00:10:50.170
it has signed us out
254
00:10:50.170 --> 00:10:52.200
and you can see, logged in is now false
255
00:10:52.200 --> 00:10:53.550
and now it doesn't even show up.
256
00:10:53.550 --> 00:10:55.900
So it has the exact behavior we had
257
00:10:55.900 --> 00:10:57.620
when it was a text button
258
00:10:57.620 --> 00:10:59.670
and that's exactly what we're wanting.
259
00:10:59.670 --> 00:11:02.230
So this is working all really nicely.
260
00:11:02.230 --> 00:11:03.270
So I hope that made sense.
261
00:11:03.270 --> 00:11:05.920
If it didn't, then I would recommend
262
00:11:05.920 --> 00:11:07.250
to go through the video again,
263
00:11:07.250 --> 00:11:08.621
go through those code examples
264
00:11:08.621 --> 00:11:12.940
and remember, the one nice thing about what we just built
265
00:11:12.940 --> 00:11:16.220
is something that you could potentially use for years.
266
00:11:16.220 --> 00:11:18.090
If you're building React applications
267
00:11:18.090 --> 00:11:19.510
for a number of years,
268
00:11:19.510 --> 00:11:21.360
you're gonna be able to use exactly
269
00:11:21.360 --> 00:11:22.620
what we built right now.
270
00:11:22.620 --> 00:11:26.550
You're gonna be able to create this icons module
271
00:11:26.550 --> 00:11:29.930
and then this is gonna contain all of your imports
272
00:11:29.930 --> 00:11:30.860
and your exports.
273
00:11:30.860 --> 00:11:32.900
Every icon you want in the application,
274
00:11:32.900 --> 00:11:34.230
you can add right here
275
00:11:34.230 --> 00:11:36.680
and then any component can call it
276
00:11:36.680 --> 00:11:40.800
exactly like how we did with the NavBar right here
277
00:11:40.800 --> 00:11:43.620
and then your application can have icons.
278
00:11:43.620 --> 00:11:45.699
So very nice work if you went through that.
279
00:11:45.699 --> 00:11:47.840
In the next guide, we're gonna see
280
00:11:47.840 --> 00:11:50.490
how we can start redirecting users
281
00:11:50.490 --> 00:11:52.223
using vanilla JavaScript.