How do I pull in all icons from FontAwesome 5 for a React/Typescript app?

Question

I know that there is a font awesome cheat sheet that lists all the icons, however pulling in by class name fails for me. Something like the below is producing a console error that it cannot find the icon.

<FontAwesomeIcon icon={findIconDefinition({ prefix: 'fas', iconName: 'camera' })} /> and

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

The following is the error I received.

client.js:1 Could not find icon {prefix: 'fas', iconName: 'camera'}
console.error @ client.js:1
window.console.error @ next-dev.js:24
log @ index.es.js:278
eval @ index.es.js:352
renderWithHooks @ react-dom.development.js:16305
updateForwardRef @ react-dom.development.js:19233
beginWork @ react-dom.development.js:21636
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26201
scheduleRefresh @ react-dom.development.js:27795
eval @ react-refresh-runtime.development.js:265
performReactRefresh @ react-refresh-runtime.development.js:254
applyUpdate @ helpers.js:123
statusHandler @ helpers.js:140
setStatus @ webpack.js?ts=1684012466139:520
(anonymous) @ webpack.js?ts=1684012466139:691
Promise.then (async)
internalApply @ webpack.js?ts=1684012466139:674
hotApply @ webpack.js?ts=1684012466139:622
eval @ hot-dev-client.js:317
Promise.then (async)
tryApplyUpdates @ hot-dev-client.js:308
handleSuccess @ hot-dev-client.js:84
processMessage @ hot-dev-client.js:217
eval @ hot-dev-client.js:50
eval @ websocket.js:53
handleMessage @ websocket.js:52

The goal is to make an icon picker.

I've tried to use this icon picker and repurpose it reddit post but it failed.

Answer 1

You need to import the libraries first:

  npm i --save @fortawesome/fontawesome-svg-core
  npm install --save @fortawesome/free-solid-svg-icons
  npm install --save @fortawesome/react-fontawesome

And then use it like this -

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'

return (
 <FontAwesomeIcon icon={faEnvelope} />
)

In this case, you have to import each icon separately. There are other alternative ways to import all icons globally but that may increase your bundle size. You can read more about that here

Source

Answer 2

I figured this out last night so wanted to post my solution.

The main issue was the Could not find icon... error. Font Awesome is more intended for importing individual icons directly, and it will only recognize a text input, like the following, if you have added it your FontAwesome library.

<FontAwesomeIcon icon="coffee" />

To fix/test the Could not find icon... for the above code I had to add the following lines of code.

import { library } from '@fortawesome/fontawesome-svg-core'; 
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
library.add(faCoffee)

No more error then the icon lookup by text worked. To solve my original problem of wanting to import all of the font awesome icons. I changed those lines of code to the following:

import { library } from '@fortawesome/fontawesome-svg-core'; 
import { fas } from '@fortawesome/free-solid-svg-icons';
library.add(fas)

Then I was able to iterate through the list of icon class names from the cheatsheet and all the icons displayed.