Unable to Use icon via code-connect

[aditya-anant-zocdoc]

Code connect : 1.2.0 OS: Mac Somona 14.6.1

I have code connected my icon library. Here is the code snipit for Icons

figma.connect(
    IconPast,
    'https://figma.com/file/vuFujhehhBk3qpDDOFLbMM/?node-id=25270-7765',
    {
        props,
        example: ({ size }) => <IconPast size={size} />,
    }
);

The Icons master component looks like this and the code connect's code

When I try to use these icon for other component for ex Pill, here is the usage

import figma from '@figma/code-connect';
import React from 'react';
import Pill from './Pill';

figma.connect(
    Pill,
    'https://www.figma.com/design/vuFujhehhBk3qpDDOFLbMM/Mezzanine-Library?node-id=39674-1682&m=dev',
    {
      props: {
            disabled: figma.boolean('disabled'),
            isSelected: figma.enum('State', {
                Selected: true,
                Default: false,
            }),
            leftIcon: figma.boolean('leftIcon', {
                true: figma.instance('Icon'),
                false: undefined,
            }),
            children: figma.textContent('Label'),
        },
        example: ({
            disabled = false,
            isSelected,
            children = 'label',
            leftIcon,
        }) => (
            <Pill
                isSelected={isSelected}
                disabled={disabled}
                onClick={() => {}}
                LeftIcon={leftIcon}
            >
                {children}
            </Pill>
        ),
    }
);

However in figma I see the error when leftIcon bool is set to true.

Is there anything that I am doing wrong.

[rrabherufigma]

Hi @aditya-anant-zocdoc . Can you confirm whether this same issue occurs when you click on the variant in the file (not the playground) please?

[aditya-anant-zocdoc]

Hi @rrabherufigma Yes the same error is coming in variant as well here is the screenshot for ref.

[rrabherufigma]

Hi @aditya-anant-zocdoc . Thank you. Can you try with figma.nestedProps

I think it would be:

import figma from '@figma/code-connect';
import React from 'react';
import Pill from './Pill';

figma.connect(
    Pill,
    'https://www.figma.com/design/vuFujhehhBk3qpDDOFLbMM/Mezzanine-Library?node-id=39674-1682&m=dev',
    {
      props: {
            disabled: figma.boolean('disabled'),
            isSelected: figma.enum('State', {
                Selected: true,
                Default: false,
            }),
            leftIcon: figma.boolean('leftIcon', {
                true: figma.nestedProps('Icon', {
                    instance: figma.instance('Instance'),
                }),
                false: {instance: undefined},
            }),
            children: figma.textContent('Label'),
        },
        example: ({
            disabled = false,
            isSelected,
            children = 'label',
            leftIcon,
        }) => (
            <Pill
                isSelected={isSelected}
                disabled={disabled}
                onClick={() => {}}
                LeftIcon={leftIcon.instance}
            >
                {children}
            </Pill>
        ),
    }
);

[aditya-anant-zocdoc]

No luck, now it is showing can't load code connect example error

[rrabherufigma]

Hi @aditya-anant-zocdoc can you try the above code again please? The above code had an incorrect character which I have removed

[aditya-anant-zocdoc]

Hi @rrabherufigma Sorry for late reply, It is not working same error is coming

[rrabherufigma]

HI @aditya-anant-zocdoc . Would you be willing to share your file with us so we can investigate further ? If so, please contact via support at Figma support

[aditya-anant-zocdoc]

I have already raised the issue last week. Though didn't got the ticket number to track it. Here is the screen shot of the mail that I got. Maybe we can sync over call or something to better understand the root cause

[rrabherufigma]

HI @aditya-anant-zocdoc can you try

leftIcon: figma.boolean('leftIcon', {
                true: figma.nestedProps('Left Icon', {
                    instance: figma.instance('Instance'),
                }),
                false: {instance: undefined},
            }),

[aditya-anant-zocdoc]

Though this time it don't show error, but not showing icon as well. For the instance which should have icon in design

[rrabherufigma]

Hi @aditya-anant-zocdoc , can you share your full code connect file please

[aditya-anant-zocdoc]

i have attached file and link to figma is the support ticket : http://help.figma.com/hc/requests/1157416

[rrabherufigma]

Hi @aditya-anant-zocdoc Thank you. Please try changing LeftIcon={leftIcon} to LeftIcon={leftIcon.instance}

[aditya-anant-zocdoc]

Thank you for being so prompt on this issue. So it somewhat works. But it has some issue

1. The Icons should have come as React.ComponentType but it coming as React.Component

   <Pill onClick={() => {}} LeftIcon={<IconVideoCircle />}>
   Label
   </Pill>

   rather it should be

   <Pill onClick={() => {}} LeftIcon={IconVideoCircle}>
   Label
   </Pill>

2. On changing to other icons from drop down, it shows

   <Pill onClick={() => {}} LeftIcon={
   Icon Asset / Verified
   }>
   Label
   </Pill>

[rrabherufigma]

Hi @aditya-anant-zocdoc . To support icons, please refer to this section in the documentation https://github.com/figma/code-connect/blob/main/docs/react.md#icons-as-react-components