React.js:如何将Font Awesome图标作为道具发送？

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

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

另见：

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

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:如何将Font Awesome图标作为道具发送？

React.js:How to send Fontawsome icon as props?

font-awesome

reactjs

react-font-awesome