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

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

CodePudding user response：

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>
    );
};