Passing an icon component to another component in ReactJS - reactjs

Question

Lets say I have this CardHeader component and I want to receive a titleIcon props (which is a react component) like this:
export default function CardHeader({ title, cardContent, titleIcon }) {
return (
<S.MiddleContainer>
<div className="white-card">
<div className="campaign-title p-1">
<div className="d-flex justify-content-center align-items-center pt-1">
{titleIcon}
<span id="title">{title}</span>
</div>
<div className="pr-2">
<MdInfo color="#969FAA" size={28} />
</div>
</div>
<p id="border" />
<div className="campaign-information">
{cardContent}
</div>
</div>
</S.MiddleContainer>
This is where I pass the icon prop
import { MdInfo } from 'react-icons/md'
<Col md={3}>
<S.ProductContainer>
<CardHeader
title="Sponsors Channel"
icon="<MdInfo color="#969FAA" size={28} />"/>
<Card title="Mobile notification boost" />
</S.ProductContainer>
</Col>
What is the best way to approach this?

Answer 1

you can pass your icon as a React.Node (not as a string), like so :
<Col md={3}>
<S.ProductContainer>
<CardHeader
title="Sponsors Channel"
icon={<MdInfo color="#969FAA" size={28} />} />
<Card title="Mobile notification boost" />
</S.ProductContainer>
</Col>
And you will have access to it via props in CardHeader :
export default function CardHeader({ title, cardContent, icon }) {
return (
<S.MiddleContainer>
<div className="white-card">
<div className="campaign-title p-1">
<div className="d-flex justify-content-center align-items-center pt-1">
{icon}
<span id="title">{title}</span>
</div>
<div className="pr-2">
<MdInfo color="#969FAA" size={28} />
</div>
</div>
<p id="border" />
<div className="campaign-information">
{cardContent}
</div>
</div>

Answer 2

Here you are:
<CardHeader
title="Sponsors Channel"
titleIcon={<MdInfo color="#969FAA" size={28} />}
/>