We'll start off with building it out so we can test how we can have the delete icon and then we'll populate it and add some icons for a spot such as the sign out button up here. So, to start this off, open up Visual Studio Code and open up the terminal, cause we're gonna have to install some dependencies in order to get this working properly.

So I'm gonna type in npm i, and then I'm gonna paste in a few commands. And I'm pasting them in just because it would be pretty long to actually type all of these out. But we're going to install three different libraries, and I'll provide these in the show notes, so you can paste these in as well.

npm i @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

And each one of these is FontAwesome, which gives you the ability to have icons in your application. So I'm gonna shrink this a little bit, just so that you can see. So it's going to install using npm, FortAwesome, which is the parent library for all of these, FontAwesome SVG core, free solid svg icons, and then react FontAwesome. So we're going to install these.

And so it's going to go to npm, grab each one of those dependencies, and then pull them down so that we can actually use them in the application. Now we do have a little bit of setup we're gonna have to do in order to get this working properly. We're gonna have to tell the app component which components that we wanna work with, which icons we want to import.

And then once we have that, then we can go and we can actually pull in the icons into the page. So I'm gonna start off by opening up the app component here and near the top, so I'm gonna put this right below axios, we're gonna pull in some imports.

So I'm gonna say import and inside the curly brackets I'm gonna pull in the library and then say from, and this one's a little bit longer, I'm gonna say at fortawesome, make sure you spell out fortawesome exactly like that, slash fontawesome, dash svg, dash core. That's gonna be the first one, so that's gonna pull in the full FortAwesome library so that we have access to it.

Then we're gonna have to pull in the actual component. And you know let me actually just duplicate this, cause it's very similar. So, inside the curly bracket, I'll say FortAwesome, that is what we're pulling in FortAwesomeIcon, and this is gonna be pulled in at FortAwesome, slash and then react FortAwesome. So, just like this, so we'll say react, dash, FontAwesome actually, just like that, and then now we have to pull in the actual icons that we want to use.

So I'm gonna start off just by pulling in, we'll just go with say a couple of them, we'll pull in the faTrash and then faSignOutAlt and then that's gonna be from, and once again this is gonna be from at FortAwesome, slash, free, dash, solid, dash, svg, dash, icons.

app.js

import { library } from "@fortawesome/fontawesome-svg-core";
import { FortAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTrash, faSignOutAlt } from "@fortawesome/free-solid-svg-icons";

Now I don't want you to be intimidated and think "how in the world would I know how to pull "all of these in." I wouldn't know how to do that either, it's just in the documentation so inside of the FortAwesome documentation they would tell you exactly which components to pull in and how to set those up. So that's where I'm pulling that, I simply brought those in and then added that. So now that we have those imported, what we have to do is actually add them into the library.

So we need to connect this library component and tell it which one of the components that we're going to be pulling in, or which icons that we're gonna be pulling in. So, inside, and let me just put this below say the NoMatch component here, I'm going to call the library, so that's the same library that we brought in from the FortAwesome, and say "library add" and then I'm just going to list out the two icons that we wanted to pull in.

So faTrash and faSignOutAlt, and we'll probably add some more later on, but for right now this will just test it out to make sure that everything is working. So we've now added these two icons to the library and that's all that we need to do inside of our app component.

Now let's go to the sidebar list and actually test this out to see if it's working. So I'm going to come to the delete section here, but instead of saying delete, I'm going to actually pull in FontAwesome icons. So here I can call FontAwesomeIcon and then you need to pass in as a prop the name of the icon.

Now, this is where it got a little bit tricky the first time that I used this. Because you may think, and this is what I thought, is I would type in say faTrash, just like this, but that is not actually the way the component works. It looks for just the plain name. So here we're just pulling in trash and so that's all that we need, and we also have to import this at the very top, which we can go back to our app to get the exact half.

So I'm gonna pull in FortAwesomeIcon component here at the top, hit save, and now instead of delete, we should have a trash icon if everything is working. So let's test this out, I'm gonna come to Google Chrome and it looks like, oh it looks like we have an error. Let's check it out and see what the issue is.

Okay if I come back up it says "FontAwesomeIcon is not defined" inside of app js.

Okay, let's take a look at that and see exactly where it's saying that error is. So, let's see if I can stretch this out a little bit. Okay, inside of portfolio-manager. Okay, here we go, so inside of createElement, this is where the error is occurring. So FontAwesomeIcon is not being brought in even though we know that we brought in... Oh, you know what it is, I brought in the FortAwesomeIcon and this actually I believe should be FontAwesomeIcon. Let's test this out really quick.

Yes. I type, fort should be font and then let's also change that inside of the app, there you go. FontAwesomeIcon and then coming down, yeah so I called it properly here, but I typed FortAwesome because the naming is a little bit confusing. Okay let's see if that's working now.

And, yes, now we actually have our nice little trash icon, you can see right here.

And if I click this, then it deleted the item and now we are left with the correct set of components and the correct elements, so all of this is working properly. Now it's ugly, it's kind of hard to see. But don't worry, we're gonna see how we can style our icons exactly like how we'd style any text in the next few guides. And we'll also populate our sign out link so we no longer have this ugly text here, but we actually have a link that allows us to sign out and it uses an icon.

So great job if you went through that. I know that can be a little bit confusing, the main reason for that is because we're using an outside library. And because of that, we have to follow the rules that they set out. That means that we have to import the specific set of components and libraries that they created and that they said you need to use, and then you need to follow their conventions. You need to bring in their components and work with them that way.

Hopefully, you can kind of see a little bit more of the power of react though when you do this. Because if you notice right here this FontAwesomeIcon, this is just a component, it's just like a component like our PortfolioSidebarList, or anything like that.

Someone wrote some Javascript react code, they said "this is this component, you can pass props "such as the name and then it will render the icon," so hopefully that is starting to make more sense and it's part of the reason why I wanted to bring this library in, so you could practice using third party components as well.

So great job, if you went through that you now know how to integrate FontAwesome into a react application.

Resources

• Source code