Font Awesome icon in React

user_3352734 0
Viewed 1892

I was unable to get Font Awesome icon working when using string as value for icon parameter.

This working:

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

 <FontAwesomeIcon icon={faCoffee} />

However this does not:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

<FontAwesomeIcon icon="coffee" />

And according to this documentation it should. But I am new to React so may be missing something.

Using javascript. Project created with react cli.

Package.json:

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/free-brands-svg-icons": "^5.15.2",
    "@fortawesome/free-regular-svg-icons": "^5.15.2",
    "@fortawesome/free-solid-svg-icons": "^5.15.2",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.2",
    "font-awesome": "^4.7.0",
    "node-sass": "^4.14.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-metismenu": "^1.4.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "rsuite": "^4.8.8",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

By "not working" I mean that icon is not visible on the page and console have an error: "Could not find icon {prefix: "fas", iconName: "coffee"}"

font-awesome reactjs
1 Answers

You'll need to import library like this: import { library } from '@fortawesome/fontawesome-svg-core'

Then add the icon(s) you wish to use.

import { faCoffee } from '@fortawesome/free-solid-svg-icons'

library.add(faCoffee /*, faCheckSquare, etc*/)

After this, you should be able to use the icon as "coffee". If you are not adding the icons to the library, they will not be included in the bundle, hence the error.

user_43172970
Related