Как да интегрираме FontAwesome 5 Pro с React? - реакция, шрифт-страхотно, шрифт-страхотно-5

Може ли някой да ме посъветва как да интегрирам FontAwesome 5 професионалист с React?

Знам, че има пакети @ fortawesome / react-fontawesome и например @ fortawesome / fontawesome-free-regular, но има ли начин как да се включи Pro версия на иконите?

Когато вляза в уебсайта на FontAwesome, мога да изтегля про-версията JS, но предполагам, че "няма полза в React.

Отговори:

Ръчното изтегляне на иконите и инсталирането им локално е анти-модел, а не начинът, по който екипът на Font Awesome очаква да използвате Font Awesome Pro с Node и NPM.

Достъпът до Pro пакетите изисква да конфигурирате обхвата @fortawesome, за да използвате регистъра на Font Awesome Pro NPM, като използвате вашия ЛЕКСЕМА които можете да намерите в настройките на вашия акаунт на Font Awesome.

1. Влезте, за да видите маркера си: https://fontawesome.com/account/services
2. Отворете този стъпка по стъпка урок след като влезете и той ще съдържа маркера ви във всички примери: https://fontawesome.com/how-to-use/use-with-node-js#pro
3. Инсталирайте реагиращ ефект и следвайте примерите за изобразяване на икони: https://github.com/FortAwesome/react-fontawesome

Забележка: Ако търсите да използвате Font Awesome Pro в Реагирайте Native, Разгледайте: реагират-роден-fontawesome-про

Мисля, че ще можете да ги използвате като добавите JS скрипта и подходящи CSS файлове към вашия index.html

Нека кажем, ако искате да използвате шрифта по подразбиране страхотно, без да имате инсталирани пакети, след което директно включете файла в index.html както е показано по-долу

<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>

Добре, аз сам го реших. Това, което направих, беше да внасям @fortawesome/react-fontawesome, Тогава ръчно изтеглих Pro пакета на FontAwesome и от папката /advanced-options/use-with-node-js/fontawesome-pro-light Копирах желаните икони (има JS файлове като faUsers.js) в папката ми с проект и включих и тези икони.

Така че в началото на файла имам нещо подобно

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

Тогава го използвах

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

Това е малко досадно, защото трябва ръчно да импортирам всяка икона, но не мога да мисля за по-добро решение.

Успях да го накарам да работи, без да се налага да импортирам всяка икона, с

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

И след това като използвате иконите като

<FontAwesomeIcon icon={solid.faPlusHexagon}/>