DEV Community

loading...
Cover image for Using Font Awesome 5 🏳️ in React

Using Font Awesome 5 🏳️ in React

adyasha8105 profile image Adyasha Mohanty ・3 min read

The Font Awesome 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

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
Enter fullscreen mode Exit fullscreen mode

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 for additional installation and setup directions._

image

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.

//App.js

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

library.add( faCheckSquare, faMugHot);

//...
Enter fullscreen mode Exit fullscreen mode

All icons can be found in Font Awesome’s icon library.

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:

// 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>
)
Enter fullscreen mode Exit fullscreen mode

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

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 :

<FontAwesomeIcon icon="check-square" />{' '}
Drink: <FontAwesomeIcon icon="mug-hot" color="pink" size="2x" />
Enter fullscreen mode Exit fullscreen mode

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

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👀.
This post is also posted on my blog page.

Discussion (2)

pic
Editor guide
Collapse
swagwik profile image
Sattwik Sahu

Wow this is actually AWESOME
I was looking for something like this!

Thank you so much 😁😁😁

Collapse
adyasha8105 profile image
Adyasha Mohanty Author

Hope this will help you, Thanks :D