Simplified: Implementing fontawesome (free version) into a React Project
Paul C. Ishaili
Posted on February 21, 2022
Copy and paste the code in your IDE teminal to run and install the necessary dependencies:
npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons
Create a fontawesome.js file in the React project src folder
Add the following line of code to fontawesome.js file to import the whole fontwawesome brand library to project:
import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';
library.add(fab);Import fontawesome.js file into index.js in the parect directory of the React project.
Go to file component where fontawesome icon is to be used, and add this line of code among the top level:
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
Use Fontwasome icon in the project.
<FontAwesomeIcon icon={['fab', 'facebook']} />
Do drop your thoughts and feedback for more collaborative updates on this and many more. ✌
Posted on February 21, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
February 21, 2022