code-connect
code-connect copied to clipboard
Icon instance type not being respected
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:
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