Uncaught ReferenceError: FontAwesomeIcon is not defined in ReactJs

Question

I was trying to use Font Awesome Icons in my react project (using vite), but my console throws me this error: Uncaught ReferenceError: FontAwesomeIcon is not defined

import React from "react";
function Skills() {
  return (
    <>
      <section className="skills">
        <div className="card">
          <div className="content">
            <FontAwesomeIcon icon="fa-brands fa-html5" />
          </div>
        </div>
      </section>
    </>
  );
}

export default Skills;

I got my kit code from font awesome and I pasted it in my index.html below my main.js.

I was trying to use Font Awesome Icons but it didn't work, I tried importing it using import (from another stackoverflow suggetion.) so I removed the import fontawesome! But I couldn't get it working... Please help.

Answer 1

npm i --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free-solid-svg-icons npm install --save @fortawesome/react-fontawesome

install all this packages and import the icon in your responsive Skills.js file