@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 React component using SVG with JS

• Documentation
• How to Help
• Contributors
• Releasing this project (only project owners can do this)

Documentation

react-fontawesome now supports forwardRef for version 0.2.x or above. This was a breaking change so if you are using React older than version 16.3.0 choose the 0.1.x version of this component.

Compatibility

React version	react-fontawesome version
< 16.3.0	0.1.x
>= 16.3.0	0.2.x

Official documentation is hosted at fontawesome.com:

Check it out here

How to Help

Review the following docs before diving in:

• CONTRIBUTING.md
• CODE_OF_CONDUCT.md

And then:

1. Check the existing issue and see if you can help!

Contributors

The following contributors have either helped to start this project, have contributed code, are actively maintaining it (including documentation), or in other ways being awesome contributors to this project. We'd like to take a moment to recognize them.

Name	GitHub
Nate Radebaugh	@NateRadebaugh
Kirk Ross	@kirkbross
Prateek Goel	@prateekgoel
Naor Torgeman	@naortor
Matthew Hand	@mmhand123
calvinf	@calvinf
Bill Parrott	@chimericdream
Mike Lynch	@baelec
Lukáš Rod	@rodlukas
Proudust	@proudust
Tiago Sousa	@TiagoPortfolio
Alexey Victorov	@AliMamed
Calum Smith	@cpmsmith
squiaios	@squiaios
WyvernDrexx	@WyvernDrexx
Font Awesome Team	@FortAwesome

If we've missed someone (which is quite likely) submit a Pull Request to us and we'll get it resolved.

Releasing this project (only project owners can do this)

See DEVELOPMENT.md

Changelog

0.2.2 - 2024-05-22

Fixed

• Props with nullable/undefined values no longer throw an error #562 #560

---