How to add custom icon to Menu/ComboBox?

[valikron]

Maybe I'm just missing something but I wanted to create a simple language selector with world flags, but when I put my custom svg Icon into an <Item />, it is always misaligned. I've tryed to wrap it into a View and Flex too, but still couldn't get it right. I then figured out that Items are slotted components, but couldn't figure out how to assign a slot to my custom icon. So I woul like to ask you for help. Is it even possible? I couldn't find anything regarding custom Icons in the docs.

[snowystinger]

Hey, thanks for your interest! So right now slots are only enabled on some elements that are commonly used across different components. In your case, you're looking for something to go in the 'icon' named slot. Our Icon component does this by default, and all of our icons are wrapped in this component, which is why you can just throw them in. If you wrap your icon in our Icon component, that should solve the positioning issue for you. https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/icon/src/Icon.tsx
There may be an issue with color though, so please let me know if you run into any other issues after doing this.

[valikron]

Thank you. It works perfectly as follows:

<Item key="german">
  <Icon><Flag code="de" /></Icon>
  <Text alignSelf="center">German</Text>
</Item>

and I don't have any color issues so far, but will let you know if I see something

[valikron]

@snowystinger I've run into another issue. Whe I use SVG-Icons it works fine, but when the icon is an image it gets tricky because the icon gets stretched to the full height. My first thought was that I can simply apply some styling on my icon, something like:

.my-img-icon {
  display: block;
  width: 100%;
  height: auto;
  alignSelf: center;
}

but the <Icon /> component seems to extract just the src attribute and everithing else gets lost. So I need to apply this styles to the <Icon /> component and this makes my icon kinda less reusable. Beside that, what value for the size or width property should I choose? I can't set it just to 100%, because it would break out of the slot. And SVG-Icons do scale when you change the <Provider /> scale property, but the image icons don't, because I can't use relative units. I hope I could make the point. But to make it more clear, here is what I'm trying to build:

    <MenuTrigger>
      <ActionButton onPress={() => {}} aria-label="Toggle Language" isQuiet>
        <Icon>
          <ES />
        </Icon>
      </ActionButton>
      <Menu onAction={(key) => alert(key)}>
        <Item key="de" textValue="Deutsch">
          <Icon>
            <DE />
          </Icon>
          <Text alignSelf="center">Deutsch</Text>
        </Item>
        <Item key="es" textValue="Español">
          <Icon width="100%" height="auto" alignSelf="center">
            <ES />
          </Icon>
          <Text alignSelf="center">Español</Text>
        </Item>
      </Menu>
    </MenuTrigger>

The <De /> icon is an svg, but spanish icon is an image because it's more complex.

[snowystinger]

Hey again, so this slot was specifically intended for Spectrum icons, which are all svg's. We hadn't come across an img usecase, so they are currently unsupported. I'll bring it up with Design. In the meantime, you could potentially put your img icons inside the element and handle all the styling yourself.

[valikron]

Thanks for a quick response. It's not a big issue and probably a rare case anyway, but I though I should mantion it. In my case I simplified the spanish flag, so I can continue using it as svg.