You can use the Font Awesome React component with Next.js or Typescript.
react-fontawesome component integrates well with Next.js but there is one caveat you need to solve.
Since Next.js manages CSS differently than most web projects if you just follow
the plain vanilla documentation to integrate
react-fontawesome into your
project you'll see huge icons because they are missing the accompanying CSS
that makes them behave.
Getting Font Awesome CSS to Work
Let's assume that you have a standard install and that
pages is in the root.
To do this you'll start by creating a
pages/_app.js. If you already have one,
you can modify it so that it includes the extra bits you need.
It's also a good idea to check the Next.js documentation on creating a custom
'App'(opens new window) . There's a chance
that something has changed with that project and the
export default ... part
needs to change.
Next.js allows you to import CSS directly in
.js files. It handles optimization
and all the necessary Webpack configuration to make this work.
You change this configuration value to
false so that the Font Awesome core SVG library
will not try and insert
<style> elements into the
<head> of the page. Next.js blocks
this from happening anyway so you might as well not even try.
Using the Icons in Pages
Now you can use an icon in a page like
Troubleshooting with Next.js
Failed to Import
Newer versions of Next.js may give you this error. A workaround is to change the way
the styles are imported.
Duotone Icons Aren't Working
If you attempt to use our duotone icons and they look more like our solid
icons, it probably means that the CSS for Font Awesome has not been installed.
Along with properly sizing icons, the CSS for Font Awesome is also responsible
for setting the opacity for the secondary layer which is how these icons work.
Typings are included in this package. However, most types are defined in the underlying API library,
Suppose that in one module, you add all
fas icons to the library:
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:
Several types, including
IconDefinition, appearing above, actually originate from the
@fortawesome/fontawesome-common-types package. They are re-exported from both
@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.