As a final touch on the Share link feature,
we're going to add an icon to this button.
For this we'll use a library called "Heroicons",
that's made by the same people
behind Tailwind CSS.
If we search all the icons for "link",
there is a nice icon here,
that's perfect for our "Share link" button.
So, first of all let's go and install
that icon library into our project.
It comes with a React support package,
that we can add to our dependencies,
by running "npm install @heroicons/react".
That package will include all the icons.
Right now we only need the "link" one,
but maybe later on we'll need
some other icons as well,
all with a consistent design.
Anyway, we can use an icon by importing
it from the package we just installed,
but this contains a few folders,
with different variants for each icon set.
For our example we'll use the 20x20 "solid" icons.
This module provides all the available icons.
The one we want is "LinkIcon".
And we can use it just like
any other React component:
by adding it to our JSX elements.
Now, the advantage of this library is that
we can style each icon using
Tailwind utility classes.
Typically we want to set at least the dimensions,
and I'll use "h" and "w-4",
which is effectively 16px.
We want to keep it small since
it's inside the button.
I'll need to reload the page,
because I just restarted the dev server.
But you can see the icon displayed
inside the button.
Now, we want it to be in the same row as the text,
so let's change the button to use flexbox.
That's an improvement,
but we need some gap between
the icon and the text.
And we should also align them vertically,
with "items-center".
Ok, the button looks pretty good now.
Let me just split this long string,
so you can see the full code.
But that's it.
This is all that's needed to use an icon.
It's also a simple example of
how to use a third-party component in our app.
Now, icons only contain SVG elements,
so you can use them in either
Server or Client Components.
But if you import a third-party widget
that also uses client-side functionality,
you'll only be able to use
it in a Client Component.
If you don't have a Client Component already,
you can always create one,
and simply wrap the third-party
component in your own.