You can integrate Font Awesome + React with other tools and frameworks. Here are some common integrations and how they work.
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>
)
}
}
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.
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.