React.js：如何发送Fontawsome图标作为道具？

问题描述

我将此对象用作React.js组件道具。但是发送后，FontAwsome无法找到通过的图标

 {
      key: 'editButton',title: 'Edit',icon: 'faEdit',function: null,type: 'default ',},{
      key: 'deleteButton',title: 'Delete',icon: 'faTrash',type: 'danger',

我的组件：

 <FontAwesomeIcon icon={item.icon} />

错误：

index.js:1 Could not find icon {prefix: "fas",iconName: "faEdit"}

解决方法

如果需要将其作为字符串值传递，则需要先对其进行预注册： https://fontawesome.com/how-to-use/javascript-api/methods/library-add

另请参见：Import all icons from Fontawesome

否则，您可以显式传递它们：

import { faEdit } from '@fortawesome/free-solid-svg-icons';

...
 {
     key: 'editButton',title: 'Edit',icon: faEdit,function: null,type: 'default ',},

,

我通过一个简单的条件解决了这个问题。 在这里调用组件使用

<componentName theIcon="faCrown" />

在渲染 componentName 时，我使用了

 <FontAwesomeIcon icon={props.theIcon=== "faCrown" ? faCrown: faLink} />

您还需要导入这些图标