@atul -- I still need review. here. ty

If we're setting name to React.Node, then it seems like the parent component can just pass in <><SWMansionIcon size={24} icon={icon} />Name</>, which arguably is cleaner.

(I'd probably rename it from name to header to encapsulate that it contains more than just text.)

@benschac, @palys-swm, @atul – what do you think?

In D3615#103707, @ashoat wrote:

If we're setting name to React.Node, then it seems like the parent component can just pass in <><SWMansionIcon size={24} icon={icon} />Name</>, which arguably is cleaner.

Yeah, that makes sense. I do think having separate props is the better solution here. IE. icon name and content are passed as props separately. Why

• All headers either have the icon & text or just text in the header. Just two different options. If we had a third option in the modal header I think that would be a different story. If we have a prop that can take any component that's not really enforcing anything.
• Auto-complete for icon names is a super nice feature that makes the dev experience better.
• If you're reading the code props, Like

<Modal icon="warning" name="This is the title"

It's just a lot easier to understand than passing in custom JSX each time.

(I'd probably rename it from name to header to encapsulate that it contains more than just text.)

• That makes sense if we make the change above.

I won't insist