0
118
VistasAn icon of fontawesome doesn't apeear in react code
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?
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
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>
·
Juan Pablo Isaza
Denunciar
0
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} />
·
Juan Pablo Isaza
Denunciar
Responde la pregunta