CODEWITHSUNDEEP
reactjstypescriptfont-awesome
LTFoReal
LTFoReal

Reputation: 457

Font Awesome 6 What is the right way to use it in react

Dependencies

    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.1.18",
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "styled-components": "^5.3.5"

Problem

I'm trying to create a custom button that takes props selecting a font awesome fa-solid icon. The docs for React say I should be able to just do the following

<FontAwesomeIcon icon="fa-solid fa-camera-web" />

This however returns an error:

Could not find icon { prefix: 'fas', iconName: 'camera-web' }

If I do something simple like

<FontAwesomeIcon icon={"camera" as IconProp} /> // I'm using typescript

Then it works, but it's not the icon I'm trying to use, just a generic one.

Upvotes: 1

Views: 1232

Answers (1)

A_Wunder
A_Wunder

Reputation: 165

For me, what has worked (although sometimes it doesn't?):

I've got this in my parent file, App.js -

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

import { faBatteryHalf, faBatteryFull, faPrint } from "@fortawesome/free-solid-svg-icons";

library.add(faBatteryHalf, faBatteryFull, faPrint);

Then, where I use one of them -

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
.
.
.
return (
  <button
   className="print-report-btn"
   onClick={() => print()}
  >
   <FontAwesomeIcon icon="print" size="1x" /> 
   Print Report
  </button>
)

Upvotes: 1

Related Questions