[HTML]How to use an instance in a tag's attribute in Figma Connect?

[Dang-xiaorui]

Please provide:

• Code Connect CLI version [use npx figma -V if using React, or figma -V otherwise, to get the version of your CLI]
• Operating system
• Code Connect file, Figma design and/or relevant code snippet that could help us get more context
  • If you prefer not to share those publicly please reach out via the Figma support

How to use an instance in a tag's attribute, typically refers to dynamically binding a component instance (such as an icon instance) to a property of an HTML tag in Figma Connect. We have code like this: iconValue:figma.children('*'), <Button class=${props.className} :icon=${props.iconValue} hasIcon=${props.icon}> <div slot="icon">${props.iconValue}</div> </Button>

However, that displays like this with the layer name:

How can I get the code like this:

[ptomas-figma]

Hi! There seems to be two things at play here:

• The "Code Connect Error" string. This seems like a bug on our side that we'll investigate and fix in a future version.
• Support for rendering the icon name in the example. This is is something we recently added support on the React API (here) but isn't not supported at the moment by the HTML one.

[Dang-xiaorui]

So, will you support for rendering the icon name on the HTML API in the future? When is it expected to be supported?

[slees-figma]

Hi @Dang-xiaorui, we don't have a timeline to share on icon support in the HTML API right now - as we've just released for React we'd like to review how this has been received before implementing it for other frameworks.

[george-apazidis]

I’m also running into this same issue on the HTML API side and would love to see a fix. It seems like the React API has already been patched—any updates on when this might be addressed for the HTML API as well?

[gponnath]

We are also wondering about this as well, we love Code Connect but haven't been able to implement it on components with icons yet.