时间戳

首页 > 解决方案 > 在基于 React 的设计系统中使用 FontAwesome 图标库

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

问题描述

我正在尝试在基于 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)

标签： reactjsfont-awesomereact-font-awesome

解决方案

像下面这样拉入“FontAwesomeIcon”要容易得多。您在上面编写的代码不需要您每次都导入图标，但这可能会受益，具体取决于您尝试使用它的方式。

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

常量元素 =

ReactDOM.render（元素，document.body）

推荐阅读