code-connect icon indicating copy to clipboard operation
code-connect copied to clipboard

Icon instance type not being respected

Open k-nd opened this issue 5 months ago • 0 comments

Hello,

I've setup my icon's example code to be react components. In the majority of my connections when icon's are being used in a prop it shows correctly as a react component but when its a child of a component it shows as a JSX element. I need it to always show as a react component not jsx.

Icon:

figma.connect(
    'https://www.figma.com/design/OMITTED/%E2%9D%96-00-Assets?node-id=OMITTED',
    {
        variant: {
            size: 'medium-24px',
            direction: '← left',
        },
        example: () => ArrowLeftMedium,
    }
);

Component connection:

figma.connect(
    IconButton,
    'https://www.figma.com/design/OMITTED/%E2%9D%96-02-Elements?node-id=OMITTED,
    {
        props: {
            ...other code,
            children: figma.nestedProps('icon-label-icon', {
                IconPrefix: figma.boolean('show-icon-L', {
                    true: figma.instance<React.FunctionComponent>('icon-left'),
                    false: undefined,
                }),
                IconSuffix: figma.boolean('show-icon-R', {
                    true: figma.instance<React.FunctionComponent>('icon-right'),
                    false: undefined,
                }),
            }),
        },
        example: ({ children, ...props }) => (
            <IconButton {...props}>
                {children.IconPrefix}
                {children.IconSuffix}
            </IconButton>
        ),
    }
);

In the code connect preview window:

Image

What I would like to be shown based on this example is the icon as {ArrowRightMedium} not <ArrowRightMedium />

Could I be directed on how to correct this? Thank you

k-nd avatar Sep 12 '25 10:09 k-nd