Christian Helms“What do ya know … I guess every once in a while both suns shine on a womp rat’s tail!”
Well, well, well. The stars have aligned. Lucky you, Font Awesome now has an official React component (or RFA, as the kids call it these days) which makes for a friction-less way to use our icons in all your React applications.
What we’ll learn
In this blog we’ll show you how to build a small project in React using RFA, with the goal of getting acquainted with how React Font Awesome works. This will be a partial copy of the RFA global example.
If it seems complicated, don’t worry. I will help you. I have spoken.
Installation
First, you need to install the node packages using either NPM (node package manager) or Yarn.
In your project’s root folder:
Using NPM:
$ npm i –save @fortawesome/fontawesome-svg-core
$ npm i –save @fortawesome/free-solid-svg-icons
$ npm i –save @fortawesome/react-fontawesome
Or using Yarn:
$ yarn add @fortawesome/fontawesome-svg-core
$ yarn add @fortawesome/free-solid-svg-icons
$ yarn add @fortawesome/react-fontawesome
(I’ll be using NPM in this tutorial, but feel free to use Yarn if you prefer it!)
What Are These Packages?
fontawesome-svg-core
This package loads Font Awesome’s SVG with the JavaScript framework and it’s the engine that the Font Awesome React component uses to render the icons.
(If you’re curious about everything you can do with the framework, check out our blog on the Font Awesome API.)
free-solid-svg-icons
This package loads the Free Solid icon set you’ll import into your project. You can also use Pro icons by importing one of the packages listed below. It all depends on which styles you’re looking for. And don’t worry. We’ve got stylez for milez.
There’s a metric butt-ton of styles to choose from with FA. Here are all the free and pro icon sets you can use in your projects!
Free
- @fortawesome/free-solid-svg-icons
- @fortawesome/free-regular-svg-icons
- @fortawesome/free-brands-svg-icons
Pro
- @fortawesome/pro-solid-svg-icons
- @fortawesome/pro-regular-svg-icons
- @fortawesome/pro-light-svg-icons
- @fortawesome/pro-duotone-svg-icons
- @fortawesome/pro-brand-svg-icons
You can find all the different icons and their styles at https://fontawesome.com/icons.
react-fontawesome
This package ties it all together to get Font Awesome icons into your React project.
React / Font Awesome Usage
Now we’ll build our little project in React using RFA. This will be a partial copy of the RFA global example.
There are two ways to use icons with React Font Awesome. We will use the global library method, which is by far the most popular of the two methods. The other method is individual usage, and you can read more about it in our React Font Awesome docs.
So now’s the time to pull on our big kid swimsuits and tread water in the deep end of the React pool. Ready to learn more about how libraries work in Font Awesome? Come on in. The water’s fine!
Before We Get Down To Business
We used React’s Create React App function to generate the boilerplate for my project. Running this command will procedurally generate a new React app for you. It creates the App.js (.css & .test files also), index.js, package.json, and can be customized to add more. It’s a quick and easy way to get your project up and running in no time. If you don’t want to use this CLI solution, then consider copying from the github example repo to get caught up manually.
Our finished project for this tutorial will render an icon in our localhost browser. And just for shits and giggles, we’ll also change the color and make the icon bigger.
Getting Down To Business
If all goes well in this tutorial, this is what you should see at the end!
Blamo! Now our components directory is housing our project. Here’s a quick rundown of what every file is doing in this project currently.
App.js – This imports RFA into our project globally. It also manages the other components in the project, such as Nav.js and Cards.js.
Cards.js – This is the file that displays our individual icons in our project. We do this with one import since our other RFA imports live in App.js. That’s the beauty of using the global system with RFA.
Nav.js – is optional for this tutorial. It’s mentioned because it is in the example repos. In the examples below, you can see it’s used to illustrate further how global use works with React Font Awesome.
App.css – Used for basic styling.
index.js – Left mostly how it came when I generated this project from scratch. I only added the bootstrap web framework and App.css for styling.
package.json – This is where we store our third-party plugins. You shouldn’t need any of these other than the ones for RFA, which we mentioned previously. If you want to experiment with more, use the RFA example repos as a guide.
You can fork these React Font Awesome example repos to see how we do things! Use the README.md file to boot up those example projects.
App.js Setup
Let’s get everything set up in our App.js file first; then, we’ll get to the cards.js file.
Your App function area stays pretty dull, for the most part. All we are going to do is add a component to it and then bring Font Awesome into your project here.
Set your app function up like this picture shows.
Feel free to skip the TopBar component if you want. We won’t go into it in this tutorial, but the example projects do.
Next, make sure React imports at the top of your file.
Then also import your cards.js file.
Now let’s get our project ready for some icons!
Do you remember those three-node packages we installed a second ago? Well, it’s time to import them and put them to use.
Order matters when importing these three packages, so keep that in mind while we move forward.
First, we’re going to import the library from the SVG Core we installed:
This allows us to import a whole set of icons and make them available to the entire project. We can import individual icons we want to use, but we will use the “global” approach for this tutorial.
Next, let’s import an icon set to add to our library:
This line means that you’re collecting all of the free solid SVG icons from FA and bringing them into this project. The only thing left to do is add them to our library:
(Hopefully not too bad so far. If you do need help, remember that Pro subscribers have access to our awesome customer support. Hit us up if you need anything!)
It is possible to add two sets to your library at the same time. If you’re interested in doing multiple icon sets in your library, check out the RFA documentation.
And with that, now you can use all those beautiful icons into the rest of your React project.
Here’s what my full App.js file looks like right now.
Now it’s time to use an icon!
Cards.js Setup
(This section won’t match the example repos, but feel free to add the missing code and try it for yourself.)
Finally, we can import the React component so we can get those icons to show up on your website.
Now all that’s left is to add our icon using a Font Awesome component like this.
All we’re doing here is calling the FontAwesomeIcon component that’s already been created and set up for us by the package. This is possible because FontAwesomeIcon is a React component, so it renders the icon for us. How neat is that?
Then we tell it what we want. In this case, we want an icon from the fas (Font Awesome solid) icon set. We are also saying which icon we want precisely, which is “coffee.”
After adding this to your code, save and check the browser in which you’re running your project. A small coffee cup in the top left-hand corner should now be greeting you! Mmm, can you smell it? Yup, that’s the smell of awesomeness.
Hmm…let’s change that coffee up just a smidge.
Go back to your code.
Let’s hugeify our coffee cup and make it red (careful. Contents in cup may be hot!) First, while still inside the component, add the following.
size=”10x”
and
color=”red”
You can make the color anything you’d like it to be and the same for the size. If you think a 1000x icon is a good fit for you (and you really need the caffeine), go for it!
Once you’ve done that, save it and refresh your browser!
This time, a steaming-hot large red cup should be looking back at you.
What Now?
Well, if you feel like you’ve got a good understanding of how to use React Font Awesome, then mission accomplished.
We expected a person of your skill would make short work of this.
Additional Resources
Hungry to learn more? Check out those example repos. Get more icons, astonishing services, and real human technical support with a Font Awesome Pro subscription.
