Reference instance swap components by name (for web components)

[plasticmind]

• Code Connect CLI version 1.3.1
• Operating system: macOS 13.3
• Code Connect file, Figma design and/or relevant code snippet that could help us get more context

import figma, { html } from "@figma/code-connect/html";

figma.connect("<FIGMA_BUTTONS_BUTTON>", {
  props: {
    labelText: figma.string("Label Text"),
    size: figma.enum("Size", {
      sm: "sm",
      lg: "lg",
    }),
    variant: figma.enum("Variant", {
      outline: "outline",
      ghost: "ghost",
      text: "text",
    }),
    inverted: figma.boolean("Inverted"),
    disabled: figma.boolean("Disabled"),
    prefixIcon: figma.instance("Prefix Icon"),
    suffixIcon: figma.instance("Suffix Icon"),
  },
  example: (props) => html`
    Prefix Icon Shape: ${props.prefixIcon}\n
    Suffix Icon Shape: ${props.suffixIcon}\n
    <nys-button
      label="${props.labelText}"
      size="${props.size}"
      variant="${props.variant}"
      inverted="${props.inverted}"
      disabled="${props.disabled}"
    ></nys-button>
  `,
});

We're using the html version of Code Connect for our custom web component library. Everything here is working, except prefixIcon: figma.instance("Prefix Icon"), or "Suffix Icon" in this instance returns a blank.

Technically, the <nys-button> element expects a suffixIcon and/or prefixIcon attribute with the name of the icon shape, which gets passed to <nys-icon> inside the custom element. You can see, the Prefix Icon is an instance swap that has a prop called "shape" which can reference our library of icons.

This shape name is the name that we need to get to pass into the attribute:

When I tried to nested properties approach:

    prefixIcon: figma.nestedProps("Prefix Icon", {
      shape: figma.string("shape"),
    }),
    suffixIcon: figma.nestedProps("Suffix Icon", {
      shape: figma.string("shape"),
    }),

    ...

    Prefix Icon Shape: ${props.prefixIcon.shape}
    Suffix Icon Shape: ${props.suffixIcon.shape}

And output the value of "shape", I'm getting something that looks like an ID:

Is there any way I can capture the name here to pass as a string?

I came across this script for generating a full map of references for each icon, but in addition to this being really cumbersome and hard to maintain, it also seems to work only with React. Any recommendations for custom web components?

Thanks!