Help: using fontawesome with React in codepen?

JavaScript
3

I find the Font Awesome React docs a bit confusing.

This seems to work for me on Codepen:

Imports:

import { FontAwesomeIcon } from "https://cdn.skypack.dev/@fortawesome/react-fontawesome"
import { faTwitter } from "https://cdn.skypack.dev/@fortawesome/free-brands-svg-icons@5.15.3";

Component usage:

<FontAwesomeIcon icon={faTwitter}/>

If you want to use the {['fab', 'twitter']} syntax I think you have to use the loader.

Imports:

import { FontAwesomeIcon } from "https://cdn.skypack.dev/@fortawesome/react-fontawesome"
import { fab } from "https://cdn.skypack.dev/@fortawesome/free-brands-svg-icons@5.15.3";
import { library } from "https://cdn.skypack.dev/@fortawesome/fontawesome-svg-core";

library.add(fab);

Component usage:

<FontAwesomeIcon icon={['fab', 'twitter']}/>

Edit: Here is a CodeSandbox as well with your code and your dependencies, just in case. You can fork it by creating an account and saving it.

1 Like