

Instead, you can add them once in your React application and reference them in any component. You probably want to use our icons in more than one component in your project, right? Importing icons into each of your project's components can be really tedious and prone to display errors - especially over time. Here's a simple example.Īlso, for the above example, we're referencing the module, so make sure you've already installed that package in your project. You may be including files that won't be used and could impact performance.Īgain, with this method, you'll need to explicitly import icons into each component.

Individually import icons just once in an init module - there's no need to import the icons into each component once they’ve been added to the library. Only the icons you import are included in the bundle.Įxplicitly importing icons into each of many components in your project can become tedious. OptionĪllows icons to be subsetted, optimizing your final bundle. Here's a summary of both options as well as their benefits and possible drawbacks. Once you've installed all the packages you need for your project, there are two ways you can use Font Awesome 5 with React. If you're coming from Version 4, we also recommend learning more about upgrading to Font Awesome 5 in general. If you want to know the details, read up on fontwesome-svg-core. This implementation differs drastically from the classic Web Font-based one in Font Awesome 4 and earlier. This package, under the hood, uses SVG with JS and the library.
