Font Awesome 5 использует иконки социальных сетей и брендов в React

Question

Документация Font Awesome показывает только, как добавить обычные / сплошные шрифты в React.Как насчет социальных иконок?

Сначала я собрал пакеты:

  npm i --save @fortawesome/fontawesome-svg-core \
  npm i --save @fortawesome/free-brands-svg-icons \
  npm i --save @fortawesome/react-fontawesome

Примечание: я заменил npm i --save @fortawesome/free-solid-svg-icons \ на npm i --save @fortawesome/free-brands-svg-icons \

Затем в React:

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFacebookF } from '@fortawesome/free-brands-svg-icons' 

library.add(faFacebookF); 

И попытался использовать компонент:

<FontAwesomeIcon icon="fa-facebook-f" />

, даже попытался:

и продолжаю получать в консоли

Не удалось найти значок {префикс: "fas", iconName: "fa-facebook-f"}

Мне кажется, мне как-то нужно получить префикс fab для брендов.

Это значок, который я хочу использовать https://fontawesome.com/icons/facebook-f?style=brands

Answer 1

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faFacebook } from "@fortawesome/free-brands-svg-icons"

const icon = <FontAwesomeIcon icon={faFacebook} />

Я нашел орфографию / регистр символов бренда на FontAwesome's GitHub

Answer 2

Попробуйте:

<FontAwesomeIcon icon={['fab', 'facebook-f']} />

Обратите внимание, что шрифт awesome теперь имеет разные наборы иконок.Твердый набор (fas) используется по умолчанию.Значок facebook в наборе брендов (fab).