Intento asimilar un icono de fontawesome en react y el icono no aparece y me da error en la consola.
Aquí está el código:
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;Y en el archivo del index.html escribí el código js:
<script src="https://kit.fontawesome.com/ab8447aa04.js" crossorigin="anonymous" ></script>Y me conecté al sitio de fontawesome. Entonces, ¿por qué hay un problema?
No necesita el paquete react-fontawesome , tiene un CDN de Fontawesome en index.html
<script src="https://kit.fontawesome.com/ab8447aa04.js" crossorigin="anonymous" ></script> simplemente agregue <i className="fa-regular fa-magnifying-glass"></i>
Creo que su configuración está mezclada entre el uso de reacción y no reacción. Para reaccionar, no necesita incluir el script en index.html .
Para reaccionar hay tres dependencias:
npm i --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free-solid-svg-icons npm install --save @fortawesome/react-fontawesomeDespués de eso, es tan simple como:
// import icon component import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; // import the icon import { faCoffee } from "@fortawesome/free-solid-svg-icons"; // usage <FontAwesomeIcon icon={faCoffee} />