reactjs - 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-brands-svg-icons\替换了 npm i --save @fortawesome/free-solid-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" />

甚至尝试过:

并继续进入控制台

Could not find icon {prefix: "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上找到了品牌图标的拼写/大小写。