Bug: Defining icons from strings in React works, but there is always the 'Could not find icon' error message

[Stephcraft]

Bug description

When you do this for example:

<Icon icon={['fas', 'gamepad']}/>

and I even add every icon to the font awesome react library object. I've tried two different ways, same outcome:

import { library  } from "../../node_modules/@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'

library.add(fab)
library.add(fas)
library.add(far)

import { library  } from "../../node_modules/@fortawesome/fontawesome-svg-core"
import * as FontAwesomeSolidIcons from '@fortawesome/free-solid-svg-icons'
import * as FontAwesomeRegularIcons from '@fortawesome/free-regular-svg-icons'
import * as FontAwesomeBrandsIcons from '@fortawesome/free-brands-svg-icons'

const geticonList = (module) => Object
    .keys(module)
    .filter(key => key !== "fas" && key !== "far" && key !== "fab" && key !== "prefix" )
    .map(icon => module[icon])

library.add(...[
    ...geticonList(FontAwesomeRegularIcons), 
    ...geticonList(FontAwesomeSolidIcons),
    ...geticonList(FontAwesomeBrandsIcons)
])

The icons do display, but the error message is still present:

Could not find icon { prefix: 'fas', iconName: 'gamepad' }

Reproducible test case

No response

Screenshots

No response

Font Awesome version

v6.0.0

Serving

Other (as specified in the bug description)

Implementation

SVG+JS, Other (as specified in the bug description)

Browser and Operating System

• Chrome on Windows 10
• Visual Studio Code
• Node package manager

Web bug report checklist

• I have included a test case because my odds go way up that the team can fix this when I do
• I have searched for existing issues and to the best of my knowledge this is not a duplicate

[tm1000]

I have this same issue in NextJS and notice it more now with React 18 since the SSR portion gets Could not find icon but the Client version gets the icon. This makes the rendering wrong between server and client

[rmachado-studocu]

Hey @tm1000 and @Stephcraft !

What happens if you change the code to this:

import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

const { library  } = require("../../node_modules/@fortawesome/fontawesome-svg-core")

library.add(fab)
library.add(fas)
library.add(far)

(Yes I know I'm using require, but bear with me on that one 😉 )

(And here's a codesandbox to play around with: https://codesandbox.io/s/zen-chihiro-ku0do2?file=/pages/index.js)

[tagliala]

Sorry, I do not know NextJS. As far as I can tell, it is a framework based on React

If this is the case, then the react-fontawesome component component is required to make font awesome work

So I'm asking if there is there, by any chance, an answer to this issue on the react-fontawesome repository at https://github.com/FortAwesome/react-fontawesome/ or if this issue belongs to there

[robmadole]

My guess is that the Library singleton is not working correctly with SSR.

We'd need to involve the Next.js folks in order to figure this out probably.

I'd recommend the workaround of avoiding the Library altogether. Import the icon directly and use it like this:

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

export default function Home() {
  return <>
    <FontAwesomeIcon icon={faBars} fixedWidth color="black" />
  </>;
}

[Stephcraft]

I found the solution:

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'

library.add(fab)
library.add(fas)
library.add(far)

Make sure all these packages are up to date, you can do so with npm update <package> --save or npm update --save to update every package in your package.json
Source: https://stackoverflow.com/questions/16525430/npm-check-and-update-package-if-needed

@fortawesome/fontawesome-svg-core
@fortawesome/free-solid-svg-icons
@fortawesome/free-regular-svg-icons
@fortawesome/free-brands-svg-icons

My problem I believe was that I did not have the @fortawesome/fontawesome-svg-core package, or at least part of it. Or perhaps the mistake was fixed during the time being and updating fixed it. One thing is for sure, before I could not do this directly:

import { library } from '@fortawesome/fontawesome-svg-core'

I had to do like this:

import { library  } from "../../node_modules/@fortawesome/fontawesome-svg-core"

Updating all the packages to the latest solved the annoying error message, allowed me to import the 'proper' way and gave me access to the latest icons available (sometimes icons did not appear because they did not exist with the version I had)

@robmadole in my case, the reason I need to specify icons by string is so that I can define them in some sort of external file (json, yml, txt) so it can be deserialized and displayed.

[jeroenpelgrims]

Is it possible to reopen this issue?
Updating the packages does not help.
SSR in NextJS still has an issue using icons dynamically and causes hydration errors since the SSR and client rendered html have a mismatch.

This reply works as a workaround for static icons, but doesn't help if you need to reference the icons dynamically by their string name.

Apparently there's a related issue already open. #19348