Support images in the Card icon prop type

[ghost]

Images are already rendered correctly but the types need to be updated.

For reference: Images will only render correctly on Mintlify if the file paths are absolute. Relative file paths are not resolved correctly in production. We are working on that MDX parsing problem in the mint repo.

[handotdev]

@tobias-mintlify is this a duplicate of #57

[ghost]

Reopening, this is a separate issue to allow an image as an icon. This issue is super small and is only about updating the type definition of the component.

57 is about allowing a big image at the top of the card.

[sboy99]

@tobias-mintlify correct me if I'm wrong. In this updation the icon will accept a href of an image. And the card component will conditionally check is it a image(string) or a svg, right, and based of the condition it will render img and svg respectively.

[ghost]

Yes exactly. String input gets passed to the image src property. SVGs will still be passed as components.

[sboy99]

Then excited to contribute. Assign me, I will give it a try 😸

[sboy99]

Is it looking good? or it need some modification. If so mention please.

[sboy99]

How can I update this so that icon prop accepts a string as well ??

[ghost]

That's looking good. If you update the type definition of the component Storybook should automatically start accepting strings too. You can try something like icon?: string | ReactNode.

[sboy99]

That's looking good. If you update the type definition of the component Storybook should automatically start accepting strings too. You can try something like icon?: string | ReactNode.

This is happening although I specified string | ReactNode

Possible reason is ReactNode has string property as literal type

[sboy99]

Its working if we pass a JSON string