Integrating FontAwesome within A React Project.
So, you made it, you got your first react component or project together, now you miss your lovely FontAwesome icons, let’s cover how we can integrate them in 4 easy steps.
1 — Get the needed dependency :
Using your favorite Terminal/Package Manager (in our case we will use Yarn) add the following command :
2 — Require/Import FontAwesome within your code :
Over your Application main file (file where you mainly do the application rendering and sticking it to a Div) add the following line of code :
what we’ve just done?
A — We’ve imported the library function and FontAwesomeIcon object from its respectful package.
B — The library function will help us, later on, specify the overall icons that we want to use within our application.
3 — Calling for the Icons :
Now to get the icons name is by simply heading to the FontAwsome website, and let’s suppose I want to get the “Adjust icon”
So now, the Variable name will simply be: “faAdjust”, now to get it simply import it like so :
To use it simply add it over the “library” function we imported early on like this :
PS : Put in mind that this will be our main index icon invocation, if you want to add any other icon, you should add it here before moving forward to adding it to your Component.
Now to use it simply go over your Component file and add the following import :
Now simply call for the icon like :
Easy enough no?
Bonus: What about Icon size?
If you ever used FontAwesome before you will be asking this question by now, how I can add the icon “size” 🤔 !
Well the answer is also easy, within the FontAwesomeIcon component you’ve two props, the icon, and size and for that, we have the following sizes :
We’re DONE 🎉🎉 !!
Conclusion :
Simply easy steps to follow if you want to add and incorporate FontAwesome icons within your React Project, Hope you like it 😊!
