@fortawesome/react-fontawesome

What is @fortawesome/react-fontawesome?

The @fortawesome/react-fontawesome package is a React component for using Font Awesome icons in React applications. It provides a convenient way to include Font Awesome icons in your project and supports various features such as sizing, coloring, animations, and more.

What are @fortawesome/react-fontawesome's main functionalities?

Displaying icons

This feature allows you to display Font Awesome icons by importing the FontAwesomeIcon component and the specific icon you want to use from the free or pro libraries.

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

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

Styling icons

You can style icons by passing props such as 'size' for the icon size and 'color' for the icon color.

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

function App() {
  return (
    <div>
      <FontAwesomeIcon icon={faCoffee} size='lg' color='blue' />
    </div>
  );
}"}

Animating icons

This feature allows you to animate icons, such as adding a spinning effect to icons by using the 'spin' prop.

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

function App() {
  return (
    <div>
      <FontAwesomeIcon icon={faSpinner} spin />
    </div>
  );
}"}

Layering and transforming icons

You can layer multiple icons on top of each other and apply transformations such as shrinking, rotating, or moving the icon.

{"import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCircle, faCheck } from '@fortawesome/free-solid-svg-icons';

function App() {
  return (
    <span className='fa-layers fa-fw'>
      <FontAwesomeIcon icon={faCircle} color='green' />
      <FontAwesomeIcon icon={faCheck} inverse transform='shrink-6' />
    </span>
  );
}"}

Other packages similar to @fortawesome/react-fontawesome

react-icons

React-icons is a package that includes a large set of icons from various icon libraries (such as Font Awesome, Material Design, and Ionicons). It is similar to @fortawesome/react-fontawesome but provides access to multiple libraries in one package, which can be more convenient if you need icons from different sources.

README

react-fontawesome

Font Awesome 5 React component

This API is in early alpha stages and is likely to change

Installation

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome

or

$ yarn add @fortawesome/fontawesome
$ yarn add @fortawesome/react-fontawesome

Usage

The basics

The icon property of the FontAwesomeIcon component can be used in the following way:

Shorthand that assumes a prefix of fas:

<FontAwesomeIcon icon="spinner" />

Explicit prefix (note the Vue bind shorthand because this uses an array):

<FontAwesomeIcon icon={['far', 'spinner']} />

Explicit icon definition (this is pseudo-code, see examples below for more detail):

import { faCoffee } from '@fortawesome/fontawesome-free-solid'

<FontAwesomeIcon icon={faCoffee} />

Using it with React

Using an explicit icon offers the advantage of only bundling the icons that you use in your final bundled file. This allows us to subset Font Awesome's thousands of icons to just the small number that are normally used.

Import the specific icons that you need:

import ReactDOM from 'react-dom';
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/fontawesome-free-solid'

const element = (
  <FontAwesomeIcon icon={faCoffee} />
)

ReactDOM.render(element, document.body)

It can be tedious to always import the icons individually so a library can be configured and shorthand can be used when rendering the icon.

Define a library that can be used without explicit imports:

App.js

import ReactDOM from 'react-dom';
import fontawesome from '@fortawesome/fontawesome'
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import brands from '@fortawesome/fontawesome-free-brands'
import { faSpinner } from '@fortawesome/fontawesome-free-solid'

fontawesome.library.add(brands, faSpinner)

const element = (
  <div id="app">
    <!-- If you are using the "Solid" style you can simply use the icon name -->
    <FontAwesomeIcon icon="spinner" />
    <!-- Using another style needs a prefix in the following array format -->
    <FontAwesomeIcon icon={['fab', 'font-awesome']} />
  </div>
)

Features

Basic

Spin and pulse animation:

<FontAwesomeIcon icon="spinner" spin />
<FontAwesomeIcon icon="spinner" pulse />

Fixed width:

<FontAwesomeIcon icon="spinner" fixed-width />

Border:

<FontAwesomeIcon icon="spinner" border />

List items:

<FontAwesomeIcon icon="spinner" list-item />

Flip horizontally, vertically, or both:

<FontAwesomeIcon icon="spinner" flip="horizontal" />
<FontAwesomeIcon icon="spinner" flip="vertical" />
<FontAwesomeIcon icon="spinner" flip="both" />

Size:

<FontAwesomeIcon icon="spinner" size="xs" />
<FontAwesomeIcon icon="spinner" size="lg" />
<FontAwesomeIcon icon="spinner" size="6x" />

Rotate:

<FontAwesomeIcon icon="spinner" rotate={90} />
<FontAwesomeIcon icon="spinner" rotate={180} />
<FontAwesomeIcon icon="spinner" rotate={270} />

Pull left or right:

<FontAwesomeIcon icon="spinner" pull="left" />
<FontAwesomeIcon icon="spinner" pull="right" />

Your own class names:

<FontAwesomeIcon icon="spinner" className="highlight" />

Advanced

Power Transforms:

<FontAwesomeIcon icon="spinner" transform="shrink-6 left-4" />
<FontAwesomeIcon icon="spinner" transform={{ rotate: 42 }} />

Composition:

<FontAwesomeIcon icon="coffee" mask={['far', 'circle']} />

Symbols:

<FontAwesomeIcon icon="edit" symbol />
<FontAwesomeIcon icon="edit" symbol="edit-icon" />