How to use font awesome icons in React

There is no doubt that font awesome become quite popular from last few years. Whenever its comes to using the icons in a project font awesome icons are always the number no one choice for most developers. In this article we will gonna learn how to use font awesome icons in React.

What is font awesome icons ?

Font awesome is a big brand which provides vector icons for your projects. It deals with both free as well as paid icons. It categories icon based on the group. For example they have a separate set for covid icons, space icons etc.

They have thousands of different icons and all icons are pixel perfect.

Use font awesome with React

Font awesome has provided official packages for the React. You can use them by installing followings packages:-

Installation

npm i --save @fortawesome/fontawesome-svg-core  @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

Usage

You can use font awesome icons by below way.

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCoffee } from "@fortawesome/free-solid-svg-icons";

export default function App() {
  return (
    <div className="App">
      <FontAwesomeIcon icon={faCoffee} />
    </div>
  );
}

If you don’t want to import every icon in your components then you can also pass icon name as string. It includes this extra step.

Let’s assume we want to use faCoffee in our app in multiple places. Then we need to add them to the library.

In your index file write.

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

library.add(faCoffee);

And you can use icons anywhere like this.

<FontAwesomeIcon icon="coffee" />

Notice icon prop is a string now and we don’t need to import the faCoffee again.

Edit 3zlce

How to store encrypted password in backend

Categories: Reactjs

2 Comments

How to do authentication using JWT - Blog React · July 8, 2020 at 3:48 am

[…] How to use font awesome icons in React Categories: JavaScript Tags: BackendJavaScript […]

How to add youtube videos to your React app - Blog React · July 14, 2020 at 3:31 am

[…] How to use font awesome icons in React […]

Comments are closed.