Aby użyć Font Awesome w projekcie React, musisz najpierw zainstalować bibliotekę @fortawesome/react-fontawesome oraz niezbędne pakiety ikon. Oto kroki, które należy wykonać:
- Zainstaluj bibliotekę
@fortawesome/react-fontawesomeoraz potrzebne pakiety ikon. W konsoli, wpisz:
npm install --save @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons
- W pliku komponentu, w którym chcesz użyć ikon Font Awesome, zaimportuj odpowiednie pakiety:
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
- Teraz możesz użyć komponentu
FontAwesomeIconw swoim kodzie JSX, przekazując mu ikonę jako atrybuticon:
function MyComponent() {
return (
<div>
<h1>Witaj w mojej aplikacji!</h1>
<FontAwesomeIcon icon={faCoffee} />
</div>
);
}
W powyższym przykładzie, ikona kawy zostanie wyświetlona w komponencie.
Jeśli chciałbyś użyć ikon z innych zestawów, takich jak ikony z pakietu free-brands-svg-icons czy free-regular-svg-icons, wystarczy zaimportować odpowiednią ikonę z odpowiedniego pakietu i użyć jej w komponencie FontAwesomeIcon.