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

Question

I using this object as React.js component props. but after sent it, FontAwsome could not find passed icon

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

my component:

 <FontAwesomeIcon icon={item.icon} />

error:

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

score 1 · Accepted Answer · answered Aug 25 '20 at 09:13

If you need to pass it as a string value, then you'll need to pre-register them first: https://fontawesome.com/how-to-use/javascript-api/methods/library-add

See this also: Import all icons from Fontawesome

Otherwise, you can explicitly pass them:

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

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

score 1 · Answer 2 · answered Apr 19 '21 at 09:53

I solved this problem by a simple condition. calling components here using

<componentName theIcon="faCrown" />

and while rendering componentName , i used

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

You need to import those icons as well

score 0 · Answer 3 · answered Dec 27 '22 at 07:46

Here is how I passed an icon as prop in a custom input

// custom Input with Tailwind Css and formik
import { FaUser } from 'react-icons/fa';

// inside Input component  

<label 
     htmlFor={name} 
     className='block 
     text-sm font-medium 
     text-gray-900 
     dark:text-white'>
 Full Name
</label>

<div className='relative'>
   {icon && (
            <div className='flex 
                   absolute inset-y-0 
                   left-0 pl-3 items-center 
                   pointer-events-none'>
               {icon} // <== displaying the passed icon into Input
            </div>
  )}
  <input type='text' {...field} {...props} /> //<-- formik
</div>

// You call it where you want it as follow
<Input 
      type='text'
      name='name'
      label='Full Name'
      // Passing icon below as prop
      icon={<FaUser className={iconCls} fill='currentColor' />} 
/>

Result

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

3 Answers3