Jak zintegrować FontAwesome 5 Pro z React? - reactjs, font-awesome, font-awesome-5

Czy ktoś mógłby mi doradzić, jak zintegrować FontAwesome 5 Zawodowiec z React?

Wiem, że istnieją pakiety @ fortawesome / reaguj-fontawesome i na przykład @ fortawesome / fontawesome-free-regular, ale czy istnieje sposób, aby dołączyć wersja pro ikon?

Kiedy loguję się na stronie FontAwesome, mogę pobrać wersję Pro JS, ale wydaje mi się, że nie ma to zastosowania w React.

Odpowiedzi:

Ręczne pobieranie ikon i instalowanie ich lokalnie jest anty-wzorcem, a zespół Font Awesome nie spodziewa się, że będziesz używać Font Awesome Pro z Node i NPM.

Dostęp do pakietów Pro wymaga skonfigurowania zakresu @fortawesome do korzystania z rejestru Font Awesome Pro NPM przy użyciu twojego ZNAK które można znaleźć w ustawieniach konta Font Awesome.

1. Zaloguj się, aby zobaczyć swój token: https://fontawesome.com/account/services
2. Przejdź do tego samouczka krok po kroku po zalogowaniu będzie zawierał twój token we wszystkich przykładach: https://fontawesome.com/how-to-use/use-with-node-js#pro
3. Zainstaluj React-Fontawesome i postępuj zgodnie z przykładami, aby renderować ikony: https://github.com/FortAwesome/react-fontawesome

Uwaga: Jeśli chcesz użyć Font Awesome Pro w React Native, sprawdzić: Reakcja-natywna-fontawesome-pro

Myślę, że będziesz w stanie ich użyć, dodając skrypt JS i odpowiednie pliki CSS do swojego index.html

Powiedzmy, że jeśli chcesz używać niesamowitej czcionki domyślnej bez instalowania żadnych pakietów, dołącz bezpośrednio plik index.html jak pokazano niżej

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js" integrity="sha384-+Ga2s7YBbhOD6nie0DzrZpJes+b2K1xkpKxTFFcx59QmVPaSA8c7pycsNaFwUK6l" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js" integrity="sha384-7ox8Q2yzO/uWircfojVuCQOZl+ZZBg2D2J5nkpLqzH1HY0C1dHlTKIbpRz/LG23c" crossorigin="anonymous"></script>

OK, sam to rozwiązałem. To, co zrobiłem, to zaimportować @fortawesome/react-fontawesome. Następnie ręcznie pobrałem pakiet pro FontAwesome i z folderu /advanced-options/use-with-node-js/fontawesome-pro-light Skopiowałem żądane ikony (istnieją pliki JS, takie jak faUsers.js) do mojego folderu projektu i również te ikony.

Na początku pliku mam coś takiego

import FontAwesomeIcon from "@fortawesome/react-fontawesome";
import faUser from "../font-awesome/faUser";

Potem użyłem tego

render() {
return() (
...
<FontAwesomeIcon icon={faUser} />
...
);
}

Jest to trochę denerwujące, ponieważ muszę ręcznie zaimportować każdą ikonę, ale nie mogłem wymyślić lepszego rozwiązania.

Udało mi się sprawić, że to działa bez konieczności importowania każdej ikony

import FontAwesomeIcon from "@fortawesome/react-fontawesome";
import fontawesome from "@fortawesome/fontawesome"
import solid from "@fortawesome/fontawesome-pro-solid"
fontawesome.library.add(solid)

A następnie używając ikon jako

<FontAwesomeIcon icon={solid.faPlusHexagon}/>