Version 6 Alpha Docs 1.0 Using with React

Use React with...

You can integrate Font Awesome + React with other tools and frameworks. Here are some common integrations and how they work.

# TypeScript

Typings are included in this package. However, most types are defined in the underlying API library, @fortawesome/fontawesome-svg-core.

Suppose that in one module, you add all fas icons to the library:

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'

library.add(fas)

// ...

Then suppose that in another module, you have some code that looks up one of the icons in the library. The import statement below imports two types and one function:

import {
  IconLookup,
  IconDefinition,
  findIconDefinition
} from '@fortawesome/fontawesome-svg-core'

const coffeeLookup: IconLookup = { prefix: 'fa-solid', iconName: 'fa-coffee' }
const coffeeIconDefinition: IconDefinition = findIconDefinition(coffeeLookup)

// ...

export class App extends React.Component {
  render() {
    return (
      <div className="App">
        <h1>
          <FontAwesomeIcon icon={coffeeIconDefinition} />
        </h1>
      </div>
    )
  }
}

For Demo Purposes Only

You wouldn't normally declare intermediate objects like coffeeLookup just to look up an icon. So this is cumbersome and needlessly verbose for such a simple example. The purpose here is just to show how you might import type definitions and use them in declarations when it does make sense to do so.

Several types, including IconLookup and IconDefinition, appearing above, actually originate from the @fortawesome/fontawesome-common-types package. They are re-exported from both @fortawesome/fontawesome-svg-core and @fortawesome/free-solid-svg-icons (and other icon packs). This is just to make importing more convenient in some cases. Refer to the index.d.ts in any module to see which types it exports.

# I need to use Font Awesome and React with...

Is there another tool or framework you want to use with React and Font Awesome? Give us a shout and we'll look into adding it.

Something on your mind? We're all ears!

New icons just what you wanted? New thin style all that? Docs missing something key? Drop us a line and tell us all the good, bad and the ugly so we can make it even more awesome.

Manufacturers Protocol dictates this alpha cannot be captured. It must self-destruct.