Upgrade to v7 with React
Wondering how to upgrade your Font Awesome React component from v6 to v7 and use all the new fancy family styles? We got you covered.
Before You Get Started
Make sure you have the following in place:
A project using React 16.3 or later Access configured to use Font Awesome packages (for Pro/Pro+ Icons) An active Pro+ Plan and a v7 Kit with Package Installation enabled to use Pro+ icons
1. Remove Older Versions
Remove any entries of react-fontawesome and fontawesome-svg-core packages from your package.json or yarn.lock file:
// these need to be removed "@fortawesome/react-fontawesome" "@fortawesome/fontawesome-svg-core"
Clean Install Tip
To help ensure a clean install of the new react-fontawesome and fontawesome-svg-core packages, consider removing any existing
entries for @fortawesome/fontawesome-svg-core and @fortawesome/react-fontawesome from your node_modules directory and your
lock file (package-lock.json if using npm, or yarn.lock if using Yarn) before reinstalling.
2. Ready for Reinstallation
Next, head over to the Set Up with React guide. Take a moment to decide whether you'd like to install using a Kit Package (recommended) or SVG Icon Packages, and just follow the steps for the option that works best for you.
Optional: Updating v6 Pro Icon Packages
All v6 icon packages are still compatible with the new react-fontawesome and fontawesome-svg-core packages.
However, if you'd like to upgrade to the latest v7 icon packages, simply follow the same steps as above: remove the existing icon packages from your package.json (and yarn.lock if applicable), then reinstall the Icon Packages.