An icon of fontawesome doesn't apeear in react code-CodePudding

I try to assimilate an icon of fontawesome in react and the icon not apeear and I get an error in the console.

Here's the code:

import PropTypes from "prop-types";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const SearchBar = ({ handleChange }) => {
  return (
    <div className="field">
      <FontAwesomeIcon icon="fa-regular fa-magnifying-glass" />
      <input
        type="search"
        className="text-rtl form-control"
        placeholder="חפש מוצר"
        onInput={handleChange}
      />
    </div>
 
  );
};

SearchBar.propTypes = {
  handleChange: PropTypes.func.isRequired,
};

export default SearchBar;

And in the file of the index.html I worte the js code:

  <script
      src="https://kit.fontawesome.com/ab8447aa04.js"
      crossorigin="anonymous"
    ></script>

And I connected to the site of fontawesome. So Why there is a problem?

CodePudding user response：

You no need for react-fontawesome package, you have a Fontawesome CDN in index.html

<script
    src="https://kit.fontawesome.com/ab8447aa04.js"
    crossorigin="anonymous"
></script>

just add <i className="fa-regular fa-magnifying-glass"></i>

CodePudding user response：

I think your configuration is mixed up between react & non react usage. For react, you don't need to include the script in index.html.

For react there are three dependencies -

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

After that it is as simple as -

// import icon component
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
// import the icon
import { faCoffee } from "@fortawesome/free-solid-svg-icons";
// usage
<FontAwesomeIcon icon={faCoffee} />