Is possible to send a Fontawesome icon from one component to another component?-CodePudding

Basically what I'm trying to do is have a single component that builds several items. Items consist only of a title, a description, and the icon. I send the first two without problems, but I can't think of how to send the second one, because if I send it like the other two, it doesn't show up on the screen.

example:

These are the items I want to show:

<IndexComponent title ='Professional Assistance' text = 'We have a specialized pre-sales team and an engineering department for the most complex projects' icon = 'faPeopleGroup'/>
<IndexComponent title ='Training and follow-up' text = 'Training for channels and integrators, about the installation and start-up of our products, accompanying them in the post-sale process.' icon = 'faPeopleGroup'/>
<IndexComponent title ='Credit and Financing' text = 'We offer standard and special financing both for the distribution area, as well as for any type of project.' icon = 'faPeopleGroup'/>
<IndexComponent title ='Distribution Center' text = 'We have a warehouse in which our team is in charge of carrying out the logistics in a timely manner, accompanying the dynamism of the business' icon = 'faPeopleGroup'/>

And so I receive it in the component:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPeopleGroup } from '@fortawesome/free-solid-svg-icons';

const IndexComponent = (props) => {
    const title = props.title;
    const text = props.text;
    const icon = props.icon;


    return(
        <>
            <div className='component'>
                <h4>{title}</h4>
                <p>{text}</p>
                <FontAwesomeIcon icon={icon} color="#003a82"/>
            </div>
        </>
    );
}

The problem is that even if I import the icon or FontAwesome, I can't display it. Is this possible that I propose? Send an icon from one component to another?

CodePudding user response：

Instead of sending the "faPeopleGroup" string to the child component, you should send the icon faPeopleGroup import itself:

<IndexComponent title ='Professional Assistance' text = 'We have a specialized pre-sales team and an engineering department for the most complex projects' icon={faPeopleGroup}/>