0

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.

Isabella
  • 21
  • 2
  • Hello and welcome to Stackoverflow, it would be nice if you share the errors you faced during test, so we can help you with the right answer – sohaieb azaiez May 13 '23 at 20:41
  • @sohaiebazaiez Thanks, I added the error I was seeing, it didn't seem helpful hopefully it means something to someone though. – Isabella May 13 '23 at 21:21
  • Did you try without `fas` as FontAwesome defaults to solid ? like `` ? also, good idea to try with other icons like `` Or try to import indivitual icon like ` import { faCoffee } from '@fortawesome/free-solid-svg-icons'` and use it `` – Mihai T May 13 '23 at 21:42
  • I am able to import individual icons like `` but `` produces the same console error `Could not find icon {prefix: 'fas', iconName: 'coffee'}` – Isabella May 14 '23 at 02:57

2 Answers2

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.

Isabella
  • 21
  • 2
0

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

the.marolie
  • 1,032
  • 2
  • 7
  • 14
  • You said import but the npm commands you posted are to install, I have installed all the libraries and am still receiving the "Can not find icon... " error. Did you mean import, should I import the libraries elsewhere? – Isabella May 13 '23 at 21:20
  • Sorry, my bad. You need to install and then import the libraries in your file. I have updated my answer with the updated code. – the.marolie May 14 '23 at 11:02