Вот как интегрировать Font Awesome 5 Pro с React (2018):

1. Приобретите лицензию Pro на странице цен на Font Awesome
2. В случае успеха игнорируйте страницы успеха. Вы должны войти в Font Awesome. В состоянии входа перейдите к этому руководству: Руководство по установке Font Awesome.
3. Если вы вошли в систему и имеете действующий лицензионный ключ в своей учетной записи, каждый фрагмент кода в этом руководстве будет использовать ваш токен доступа.
4. Теперь вы можете установить лицензионный ключ глобально через (A) npm config set ... или локально для каждого проекта через (B) .npmrc. Я рекомендую (B), чтобы другие товарищи по команде также могли установить профессиональный пакет.

5. Для (B) перейдите в каталог package.json и создайте файл .npmrc. В этот файл вставьте фрагмент кода из руководства. Это должно выглядеть примерно так:

   // .npmrc
   @fortawesome:registry=https://npm.fontawesome.com/
   //npm.fontawesome.com/:_authToken=<MY_AUTH_TOKEN_FROM_FONT_AWESOME>
   

6. После этого вы сможете установить профессиональные пакеты. Они соответствуют официальному адаптеру реакции react-fontawesome, доступному в виде следующих пакетов npm:

   • @fortawesome/pro-solid-svg-icons
   • @ fortawesome / pro-regular-svg-icons
   • @ fortawesome / pro-light-svg-icons
7. Итак, теперь выполните npm install @fortawesome/pro-<MY_ICON_WEIGHT>-svg-icons, чтобы установить выбранный вами профессиональный пакет.

8. После этого продолжайте использование, как это предусмотрено пакетом react-fontawesome. Что должно выглядеть примерно так в вашем коде реакции, если вы установили облегченную версию и использовали 'Библиотека' от react-fontawesome:

   // app.js
   import { library, config } from '@fortawesome/fontawesome-svg-core'
   import { fal } from '@fortawesome/pro-light-svg-icons'
   
   library.add(fal)
   

9. Наконец, использование в файле компонента (доступно как в JS, так и в TS) выглядит примерно так:

   // Foo.jsx
   import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
   
   const Foo = () => {
     return (
       <FontAwesomeIcon icon={['fal', 'utensils']} />
     )
   }
   
   export default Foo
   

   И если вы работаете в Typescript:

   // Foo.tsx
   import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
   import { IconLookup } from '@fortawesome/fontawesome-svg-core'
   
   const Foo = () => {
     const icon: IconLookup = { prefix: 'fal', iconName: 'utensils' }
     return (
       <FontAwesomeIcon icon={icon} />
     )
   }
   
   export default Foo
   

Вы должны использовать ТОКЕН для доступа к Font Awesome Pro через NPM.

Ручная загрузка значков и их локальная установка - это анти-шаблон, а не то, как команда Font Awesome ожидает от вас использования Font Awesome Pro с Node и NPM.

Для доступа к пакетам Pro необходимо настроить область @fortawesome для использования реестра Font Awesome Pro NPM с помощью вашего TOKEN, который можно найти в настройках вашей учетной записи Font Awesome.

1. Войдите, чтобы увидеть свой токен: https://fontawesome.com/account/services
2. Перейдите к этому пошаговому руководству после входа в систему, и он будет содержать ваш токен во всех примерах: https://fontawesome.com/how-to-use/on-the-web/setup/using-package-Manager#install-pro
3. Установите response-fontawesome и следуйте примерам для отображения значков: https://github.com/FortAwesome/react-fontawesome

Примечание. Если вы хотите использовать Font Awesome Pro в React Native, посетите: react-native-fontawesome-pro

tldr; Используйте пакеты @fortawesome/pro-light-svg-icons, @fortawesome/pro-regular-svg-icons NPM.

Сегодня я столкнулся с этой проблемой, и я думаю, что основной вопрос о том, как использовать Pro версию иконок, не решен. Официальные документы не особо помогают. Вот что мне пришлось сделать для использования значка faFilePlus, облегченной версии:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faFilePlus } from '@fortawesome/pro-light-svg-icons/faFilePlus';

а потом:

<FontAwesomeIcon icon={faFilePlus} />

Обратите внимание на использование пакета @fortawesome/pro-light-svg-icons NPM. Это недокументировано нигде в официальных документах FA, и мне пришлось рыться в нескольких местах, чтобы прийти к этому решению. В официальных документах говорится только об использовании «бесплатных» значков, но не говорится, где найти эквивалентный пакет NPM для легких, обычных и т. Д.

Также обратите внимание, что для этого требуется, чтобы NPM был аутентифицирован, как указано в одном из ответов.

ОК, я сам решил. Я импортировал @fortawesome/react-fontawesome. Затем я вручную загрузил профессиональный пакет 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} />
         ...
    );
}

Это немного раздражает, потому что мне нужно вручную импортировать каждый значок, но я не мог придумать лучшего решения.

Я думаю, вы сможете использовать их, добавив скрипт JS и соответствующие файлы CSS в свой index.html.

Скажем, если вы хотите использовать шрифт по умолчанию awesome без установленных пакетов, включите файл напрямую в 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>

Мне удалось заставить его работать, не импортируя каждый значок, с

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