Can i edit parameters on a react component given in props?

Question

I have a component ( /components/Containers/WishListCard.tsx ), which has the following props:

• icon (a tabler-icons-react icon where the parameter size should be set to 50)
• largeIcon (a tabler-icons-react icon where the parameter size should be set to 80)

And some other parameters which are irrelevant.

I know this is not optimal, so I want to just use one prop for the icons as they're the same just in different sizes, but I don't know how to change the size parameter on the icon prop either.

This is (simplified) my code:

 import Card from './Card'; const WishListCard = ({ icon, largeIcon }) => { return ( <Card> {icon} {/* LargeIcon is used when the user is on Desktop */} {largeIcon} </Card> ); };

I already tried it using icon.size = 50 , but that gives me the error Cannot add property size, object is not extensible

Is there a better option to get that done? Or how do I change the icon sizing?

Greetings, PixelPage

Answer 1

You could just pass the component type instead of a node.

import { Activity } from 'tabler-icons-react';
import WishListCard from './WishListCard';

const Example = ({ Icon }) => {
    return (
        <WishListCard Icon={Activity} />
    );
};

import Card from './Card';

const WishListCard = ({ Icon }) => {
    return (
        <Card>
            <Icon size={50} />
            {/* LargeIcon is used when the user is on Desktop */}
            <Icon size={80} />
        </Card>
    );
};