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

Question

我使用这个对象作为 React.js 组件道具。但发送后，FontAwsome 找不到通过的图标

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

我的组件：

 <FontAwesomeIcon icon={item.icon} />

错误：

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

Answer 1

如果您需要将其作为字符串值传递，那么您需要先预先注册它们： https ://fontawesome.com/how-to-use/javascript-api/methods/library-add

另请参阅：从 Fontawesome 导入所有图标

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

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

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

Answer 2

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

<componentName theIcon="faCrown" />

在渲染componentName时，我使用了

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

您还需要导入这些图标