1
00:00:03,000 --> 00:00:06,365
As a final touch on the Share link feature,

2
00:00:06,365 --> 00:00:09,203
we're going to add an icon to this button.

3
00:00:09,203 --> 00:00:13,188
For this we'll use a library called "Heroicons",

4
00:00:13,188 --> 00:00:15,522
that's made by the same people

5
00:00:15,522 --> 00:00:17,078
behind Tailwind CSS.

6
00:00:17,156 --> 00:00:20,053
If we search all the icons for "link",

7
00:00:20,053 --> 00:00:21,969
there is a nice icon here,

8
00:00:21,969 --> 00:00:25,138
that's perfect for our "Share link" button.

9
00:00:25,138 --> 00:00:27,889
So, first of all let's go and install

10
00:00:27,889 --> 00:00:30,490
that icon library into our project.

11
00:00:30,565 --> 00:00:33,479
It comes with a React support package,

12
00:00:33,479 --> 00:00:35,688
that we can add to our dependencies,

13
00:00:35,688 --> 00:00:40,857
by running "npm install @heroicons/react".

14
00:00:40,857 --> 00:00:43,904
That package will include all the icons.

15
00:00:43,904 --> 00:00:46,842
Right now we only need the "link" one,

16
00:00:46,842 --> 00:00:48,693
but maybe later on we'll need

17
00:00:48,693 --> 00:00:50,288
some other icons as well,

18
00:00:50,352 --> 00:00:52,796
all with a consistent design.

19
00:00:52,796 --> 00:00:55,666
Anyway, we can use an icon by importing

20
00:00:55,666 --> 00:00:58,462
it from the package we just installed,

21
00:00:58,535 --> 00:01:00,799
but this contains a few folders,

22
00:01:00,799 --> 00:01:04,279
with different variants for each icon set.

23
00:01:04,279 --> 00:01:09,209
For our example we'll use the 20x20 "solid" icons.

24
00:01:09,209 --> 00:01:12,260
This module provides all the available icons.

25
00:01:12,260 --> 00:01:15,108
The one we want is "LinkIcon".

26
00:01:15,108 --> 00:01:17,032
And we can use it just like

27
00:01:17,032 --> 00:01:18,885
any other React component:

28
00:01:18,956 --> 00:01:21,812
by adding it to our JSX elements.

29
00:01:21,812 --> 00:01:24,923
Now, the advantage of this library is that

30
00:01:24,923 --> 00:01:27,364
we can style each icon using

31
00:01:27,364 --> 00:01:29,544
Tailwind utility classes.

32
00:01:29,631 --> 00:01:33,051
Typically we want to set at least the dimensions,

33
00:01:33,051 --> 00:01:35,711
and I'll use "h" and "w-4",

34
00:01:35,711 --> 00:01:38,272
which is effectively 16px.

35
00:01:38,371 --> 00:01:40,562
We want to keep it small since

36
00:01:40,562 --> 00:01:42,242
it's inside the button.

37
00:01:42,315 --> 00:01:44,339
I'll need to reload the page,

38
00:01:44,339 --> 00:01:47,565
because I just restarted the dev server.

39
00:01:47,565 --> 00:01:49,804
But you can see the icon displayed

40
00:01:49,804 --> 00:01:50,990
inside the button.

41
00:01:51,056 --> 00:01:55,284
Now, we want it to be in the same row as the text,

42
00:01:55,284 --> 00:01:58,586
so let's change the button to use flexbox.

43
00:01:58,586 --> 00:02:00,113
That's an improvement,

44
00:02:00,113 --> 00:02:01,997
but we need some gap between

45
00:02:01,997 --> 00:02:03,478
the icon and the text.

46
00:02:03,546 --> 00:02:06,687
And we should also align them vertically,

47
00:02:06,687 --> 00:02:08,220
with "items-center".

48
00:02:08,295 --> 00:02:11,207
Ok, the button looks pretty good now.

49
00:02:11,207 --> 00:02:14,196
Let me just split this long string,

50
00:02:14,196 --> 00:02:16,189
so you can see the full code.

51
00:02:16,189 --> 00:02:17,457
But that's it.

52
00:02:17,457 --> 00:02:20,319
This is all that's needed to use an icon.

53
00:02:20,319 --> 00:02:22,755
It's also a simple example of

54
00:02:22,755 --> 00:02:26,326
how to use a third-party component in our app.

55
00:02:26,326 --> 00:02:30,233
Now, icons only contain SVG elements,

56
00:02:30,233 --> 00:02:32,576
so you can use them in either

57
00:02:32,576 --> 00:02:34,837
Server or Client Components.

58
00:02:34,918 --> 00:02:38,019
But if you import a third-party widget

59
00:02:38,019 --> 00:02:41,316
that also uses client-side functionality,

60
00:02:41,316 --> 00:02:43,062
you'll only be able to use

61
00:02:43,062 --> 00:02:44,741
it in a Client Component.

62
00:02:44,808 --> 00:02:47,794
If you don't have a Client Component already,

63
00:02:47,794 --> 00:02:49,519
you can always create one,

64
00:02:49,585 --> 00:02:51,794
and simply wrap the third-party

65
00:02:51,794 --> 00:02:53,361
component in your own.