Astro Icon + SolidJS + Named Slots (Bug?)

[strange heron]

Hi everyone,

I have trouble using astro-icon with a solid-js framework component and named slots. You can find the example on Stackblitz

On a prerendered Page I got the framework component HeaderSolid as client:only to display buttons after a delay of 3 seconds:

<HeaderSolid client:only="solid-js">
  <div slot="fallback" class="flex gap-4 justify-start items-center" > 
      <div class="flex gap-2 justify-center items-center bg-green-600 p-2">
          <Icon class="size-6" name="login"/>                                            
          <span>Login (Astro)</span>
      </div>
  
      <div class="flex gap-2 justify-center items-center bg-green-600 p-2">
          <Icon class="size-6" name="register"/>
          <span>Register (Astro)</span>
      </div>
  </div>
  <Icon class="size-6" name="login" slot="loginicon"/>
  <Icon class="size-6" name="register2" slot="registericon"/>
</HeaderSolid>        

I am using the fallback-slot to pass the fallback content and named-slots to pass the icons to the framework components as follows:

So with this code, the login.svg icon will not be displayed properly in the framework component (as it is used in the fallback-slot before), whereas the register2.svg icon will (as it is not being used in the fallback-slot).
Does anyone has a clue what I am doing wrong here?

Cheers,
Aleks

[strange heron]

Just saw that the "symbol" node with the actual svg data seems to be missing when the icon is used twice

[hollow turret]

So the "fallback" slot name has a special meaning in one particular case in astro, which is for server islands. Even though this isn't a server island, I wonder if the compiler still treats this slot differently. I've changed some slot names around and now the red buttons Icons work, but not the green buttons 😅 https://stackblitz.com/edit/astroiconbug-2kfzyq-zoxmcv?file=src%2Fpages%2Findex.astro

[strange heron]

Ah nice try, haven't thought about just using a custom slot for the fallback part 😛

So are named slots in general a server island feature or only the fallback slot?

At the moment i am just duplicating the items needed in the client island, jst want to make sure im not doing something wrong here

[hollow turret]

No only the slot with the name "fallback" https://github.com/withastro/roadmap/issues/945

slots in general are the way to pass children to components

[strange heron]

Alright, so this seems to be a bug, doesnt it ?

[hollow turret]

Not in astro. If anything this would be a bug in astro-icon. So you're right that symbol is missing in one of the icons, but that is an optimisation that astro-icon does and has nothing to do with Astro itself https://www.astroicon.dev/guides/components/#automatically-optimized-sprites I believe what's happening here is that the Icon component is used multiple times on the same page so astro-icon packages optimises this by only including the symbol portion in one of the icons. However, you're now using client side javascript in your solid component to swap the components, which means you end up with only one of them working, because they are never in the DOM at the same page and only one of them has the actual SVG code

I was faced with a similar conundrum when I wanted to figure out how to use the same icons in my svelte components. I came to the conclusion that a slot based solution ends up with pretty complicated code and I opted to use unplugin-icon for both Svelte and Astro. You might be better off using a separate library to get icons in your solid component, for example, iconify recommends to use web components https://iconify.design/docs/iconify-icon/solid.html

@tepid jacinth do you have any ideas? Is my diagnosis correct?

[strange heron]

Okay, will have a look at it, thanks mate!

For now i will stay with duplicating the icons i think, as i only got a handful on my site

[hollow turret]

There might still be an astro-icon bug here somewhere. Even if I include both icons in the Layout, the login icon doesn't get a symbol. Honestly I could be completely wrong here, but it's my best guess 😅 Maybe Nate (who created astro-icon) has an idea

[steady knot]

I had a similar issue using react a while ago. For me icons seemed to disappear when the same icon was used in a conditionally rendered component elsewhere. I thought it was a bug in astro-icon, but I had no idea where to begin to debug this