svelte only renders component outside of if block

Okay, so this one had me pulling my hair for a while and I am sure there is something I am missing here:

<script lang="ts">
    import Social from './social.svelte';
    import GithubSolid from 'flowbite-svelte-icons/GithubSolid.svelte';
    import YoutubeSolid from 'flowbite-svelte-icons/YoutubeSolid.svelte';
    import { socialMediaLinks, type SocialMedias } from './index';

    let medias = Object.keys(socialMediaLinks) as SocialMedias[];
</script>

{#snippet rc(Comp)}
    <Comp size="10" />
{/snippet}

<div>
    <div class="flex flex-row justify-between">
        {#each medias as media}
            <Social hrefLink={socialMediaLinks[media]}>
                {#if media === 'youtube'}
                    <!-- <p>Youtube</p> -->
                    {@render rc(YoutubeSolid)}
                {:else if media === 'github'}
                    {@render rc(GithubSolid)}
                {/if}
            </Social>
        {/each}
    </div>
</div>

socialMediaLinks is an object with following properties:

export const socialMediaLinks = {
    github: 'https://github.com/saralio',
    youtube: 'https://youtube.com/@data_questin',
    linkedin: 'https://linkedin.com/in/saralio'
};

export type SocialMedias = keyof typeof socialMediaLinks;

And the Social component has following code:

<script lang="ts">
    import type { Snippet } from 'svelte';

    type Props = {
        hrefLink: string;
        children: Snippet;
    };

    let { hrefLink, children }: Props = $props();
</script>

<div>
    <a href={hrefLink} target="_blank" rel="noopener noreferrer">
        {@render children()}
    </a>
</div>

It's only showing the icons on the screen if I include something else (like the commented line in 'youtube' clause, <!-- <p>Youtube</p> -->). Without this, it doesn't show anything. If I include the YoutubeSolid (or GithubSolid) component outside the each block, it is able to render.

What am I missing here?

You probably have some styling that auto-sizes the icons and unless there is also text, the element will end up having a height of 0. A reproduction without any styling shows the icons (way oversized).

The flex styling alone is probably causing this. The icon only has a viewBox without explicit size. Also, according to the documentation the size only accepts specific keywords which in turn set certain Tailwind classes.

Example with keyword (size="md")