Using Font Awesome 5 🏳️ in React
Tags: react, fontawesome, javascript, beginners
Published: 2021-02-16 09:53:27

The [Font Awesome](https://fontawesome.com/how-to-use/on-the-web/using-with/react) went all out with new version 5 adding a wide variety of SVG icons and providing users with new features🤩.

If you’ve worked with Font Awesome in the past, something like `fa-profile` might look familiar. Font Awesome introduced icon styles like `fas` for Font Awesome solid, `fal` for Font Awesome Light, etc. This adds a great deal of flexibility for UI/UX design.

![image](https://user-images.githubusercontent.com/54095539/108038643-1916df00-7061-11eb-8c97-698af453e2d8.PNG)

Moreover, there are Font Awesome packages (like the one we're going to use!) for *React*, Angular, and Vue 😮.

## Installation

To get started, we’re going to install `react-fontawesome` along with their libraries. 

```
// If you are using npm:
$ npm install @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

// or, using Yarn:
$ yarn add @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
```

*_The packages we're introducing just contain the free version 🆓. If you’re looking to utilize new _pro icons_ and styles, look at their [site](https://fontawesome.com/how-to-use/on-the-web/using-with/react) for additional installation and setup directions._*

![image](https://user-images.githubusercontent.com/54095539/108038981-7f9bfd00-7061-11eb-8995-8ab1feb3642d.PNG) 

## Implementation

Let's move forward to implement these beautiful icons 👌 throughout our app.

*_There are numerous approaches to utilize these symbols however we will going to focus on building a library to effortlessly get to all symbols._*

The following code to add icons to the library can be done at a root level of our application i.e `App.js`. We’ll start by importing the required files and calling `fontawesome-svg-core`’s `library.add` to pull our icons.

```javascript
//App.js

import { library } from "@fortawesome/fontawesome-svg-core";
import { faCheckSquare, faMugHot } from "@fortawesome/free-solid-svg-icons";

library.add( faCheckSquare, faMugHot);

//...
```

> All icons can be found in [Font Awesome’s icon library](https://fontawesome.com/icons?d=gallery&m=free).

We have successfully added the icons we need. Now it's time to implement it in our component 👍.
Imagine that we have a component called `Icon.js`. Since they are already been added to our library in `App.js` we just need to import this:

```javascript
// Icon.js

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export const Drink = () => (
    <div className="App">
      <div>
       <FontAwesomeIcon icon="check-square" />
       Drink: <FontAwesomeIcon icon="mug-hot" />
      </div>
    </div>
)
```
By adding `faCheckSquare` and `faMugHot` to the library, we can refer to them throughout the app using their icon string names `check-square` and `mug-hot` (in lowercase letters).

![image](https://user-images.githubusercontent.com/54095539/108039796-955df200-7062-11eb-83cc-cd1379795466.PNG)

Wait 🤔, I think our icons and text are a little squished and, might I venture to say, boring, so let’s add a space between the icon and the text and change the icon’s color and size :

```javascript
<FontAwesomeIcon icon="check-square" />{' '}
Drink: <FontAwesomeIcon icon="mug-hot" color="pink" size="2x" />
```
As you can see, the _FontAwesomeIcon_ component can take a few different props to change the icon style. Here we used the `color` and `size` props. The size prop expects a string value like `xs`, `lg`, `2x`, `3x` and so on 😃. 
There are quite a few more props that can be passed-in. Notably, the `rotation` and `pulse` boolean props will have the icon rotate on itself.

![image](https://user-images.githubusercontent.com/54095539/108039940-bb839200-7062-11eb-8e03-a6d38e23e11a.PNG)

*_Note: Don't use the CDN link of FontAwesome in your `index.html` file. It will decrease the performance of your site._* 

## Conclusion

That's all. Hurray🎉, you did it. The process is pretty straight-forward but you can easily implement this in your app. Do give it a try, you will definitely love it 😍. 
 
Thanks for Reading! Have a great day :)

Find me on Twitter  [@Adyasha8105](https://twitter.com/Adyasha8105)👀.
This post is also posted on my [blog](https://www.adyablogs.tech/blogs/Using-Font-Awesome-5-in-React) page.