react-fontawesome importing all icons

If you would like to use whatever icon you want with the easiest configuration through the new Fontawesome React library, here how you could do:

import { library } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import * as Icons from '@fortawesome/free-solid-svg-icons'; const iconList = Object .keys(Icons) .filter(key => key !== "fas" && key !== "prefix" ) .map(icon => Icons[icon]) library.add(...iconList) 

(Tips: the (...iconList) is used here to add each object we have as an array as function parameters)

Then add into your code wherever you want

<FontAwesomeIcon icon="check" /> 

Now you can use all icons without having to import them all 🤙

Discussed this with the react-fa team and they advised that icons need to be explicitly imported with full paths:

import { faThumbsUp } from '@fortawesome/pro-regular-svg-icons/faThumbsUp'; 

This means that the remaining items will be removed during the 'tree-shaking' process by Webpack. There's no mention of this so I made a suggestion that this should be mentioned in the explicit import section of the docs.

Anyhoo - all working now so thanks to those guys over at FA.

The TypeScript version of @Wetteren Rémi's Answer

For the TypeScript version of the selected answer, you'll need to:

1. Type the array argument of the library.add() method as a union of the IconDefinition and IconPack types.
2. Type the import (Icons) as an interface where each key's value has the resulting union type from (1) and IconPrefix.

import { library } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import * as Icons from '@fortawesome/free-solid-svg-icons'; // Types import { IconDefinition, IconPrefix, IconPack } from "@fortawesome/free-solid-svg-icons"; // Type that `library.add()` expects. type IconDefinitionOrPack = IconDefinition | IconPack; interface ImportedIcons { [key: string]: IconPrefix | IconDefinitionOrPack; } // Type `Icons` as a interface containing keys whose values are // union of the resulting union type from above and `IconPrefix`. const iconList = Object .keys(Icons) .filter(key => key !== "fas" && key !== "prefix" ) .map(icon => (Icons as ImportedIcons)[icon]) library.add(...(iconList as IconDefinitionOrPack[])) 

Then you can use it in your components like this:

<FontAwesomeIcon icon="check" /> 

In our project we use this scss technique ([email protected]):

@import '~font-awesome/scss/font-awesome'; @mixin fa-icon($type) { @extend .fa; @extend .fa-#{$type}; } i { @include fa-icon('star'); margin-right: 0.2rem; } 

As result we have only icons we need in our css bundles.

UPDATE: Using react components with babel-plugin-react-css-modules we can reuse and apply any icon styles from font-awesome lib directly to our own classes:

.button { i { @include fa-icon('star'); } } 

If you think tree shaking is not working, You can find solutions in here. But most of the times this is solved by using deep imports:

import { faCoffee } from '@fortawesome/free-solid-svg-icons/faCoffee' // <-- note the extra faCoffee there 

But if you want to import all the icons at once, according to Importing Icons you can import all the icons in this way:

import { library } from '@fortawesome/fontawesome-svg-core' import { fas } from '@fortawesome/free-solid-svg-icons' import { far } from '@fortawesome/free-regular-svg-icons' import { fab } from '@fortawesome/free-brands-svg-icons' // Add all icons to the library so you can use it in your page library.add(fas, far, fab) 

And if the icon have many variations in a library, you can use it like this:

<FontAwesomeIcon icon={['fas', 'smile']} /> <FontAwesomeIcon icon={['far', 'smile']} /> 

Since all the icons are in the library now, there's no need to import them one by one.