在基于 React 的设计系统中使用 FontAwesome 图标库答案

【问题标题】：Using FontAwesome Icon Library in React based design system在基于 React 的设计系统中使用 FontAwesome 图标库
【发布时间】：2020-12-20 08:42:47
【问题描述】：

我正在尝试在基于 React 的设计系统中使用 Fontawesome 的免费实体图标的 React 模块。我想以 FontAwesomeIcon 组件呈现的字符串形式访问 FontAwesomeIcon

例如：

<FontAwesomeIcon icon="coffee"/>

或

<FontAwesomeIcon icon={['fas', iconProp]}

如果这发生在 React 组件中，比如 Button 组件，这是一个命名导出，我应该在设计系统的每个其他组件中导入图标库 (import './fontAwesomeLibrary.js') 吗？

库文件：

// fontAwesomeLibrary.js

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
   
library.add(fas)

【问题讨论】：

标签： reactjs font-awesome react-font-awesome

【解决方案1】：

更容易拉入“FontAwesomeIcon”，如下所示。您在上面编写的代码不需要您每次都导入图标，但这可能会有所帮助，具体取决于您尝试使用它的方式。

从 'react-dom' 导入 ReactDOM 从“@fortawesome/react-fontawesome”导入 { FontAwesomeIcon } 从“@fortawesome/free-solid-svg-icons”导入 { faCoffee }

常量元素 =

ReactDOM.render(element, document.body)

【讨论】：