时间戳

首页 > 解决方案 > React.js：如何将 Fontawsome 图标作为道具发送？

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

问题描述

我使用这个对象作为 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"}

标签： reactjsfont-awesomereact-font-awesome

解决方案

如果您需要将其作为字符串值传递，那么您需要先预先注册它们： 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 ',
 },

推荐阅读