Display Imports for both the icon file and the generic component

[plbabin]

In our react design system, we do have a generic Icon component that gets an icon svg file as a prop:

import PlusSmall from `hsds/icons/plus-small`
import Icon from `hsds/components/icon`

<Icon icon={PlusSmall} />

In figma, we do not have that generic Icon component. That being said, I was able to map all our icons. this is a simplified version of our icons.figma.tsx file looks like:

import figma from '@figma/code-connect'

import Icon from 'hsds/components/Icon'
import PlusSmall from 'hsds/icons/plus-small'

figma.connect(
  ArrowLeft,
  '<link_to_figma_file>',
  {
    example: () => <Icon icon={PlusSmall} />,
  }
)

It works in code connect with our Button component. My question is about the import list, is there a way (or workaround) to have both the generic component import AND the svg file import in our button code connect?

[jyyang0]

Hey plbabin thanks for the question -- Since in this case the icons themselves aren't being picked up, I would recommend using custom imports in your icons.figma.tsx file.

You can override the generated import statements for a connected component by passing an array of imports. In this example, you might write something like

figma.connect(
  ArrowLeft,
  '<link_to_figma_file>',
  {
    imports: ["import Icon from `hsds/components/icon`"]
    example: () => <Icon icon={PlusSmall} />,
  }
)

Then, whenever this icon is being used the nested import should also be added to your file. Let me know if that works for you.

[plbabin]

that was exactly what I needed, thank you!!