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

问题描述

我正在尝试在基于React的设计系统中使用Fontawesome的Free实体图标的React模块。我想访问Fontawesome Icon作为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)

解决方法

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

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

const元素=

ReactDOM.render（element，document.body）