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

另请参见：Import all icons from 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} />

您还需要导入这些图标

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

2 个答案: