如何解决在基于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)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。