Is there an easier way to render children using snippets?

[recsater]

Currently, I'm rendering children through snippets with the following code:

{#snippet hourGlass()}
    <HourGlass />
{/snippet}

{#snippet badge(icon, text)}
    <span
        class="inline-flex items-center gap-x-1 rounded-full bg-gray-100 px-1.5 py-1 text-xs font-medium text-gray-800 dark:bg-gray-500/10 dark:text-gray-500"
    >
        {@render icon()}
        {text}
    </span>
{/snippet}

{@render badge(hourGlass, 'Waiting')}

This approach feels overly complex, because I have to keep creating new snippets for each icon I want to use. I know using a component would simplify things, but sometimes I don’t want to create a new file.

Is there an easier way to handle this?

[brunnerh]

You should be able to pass the component directly.

- {#snippet hourGlass()}
-    <HourGlass />
- {/snippet}

- {#snippet badge(icon, text)}
+ {#snippet badge(Icon, text)}
    <span
        class="inline-flex items-center gap-x-1 ..."
    >
-       {@render icon()}
+       <Icon />

        {text}
    </span>
{/snippet}

- {@render badge(hourGlass, 'Waiting')}
+ {@render badge(HourGlass, 'Waiting')}

[recsater]

It seems I gave the wrong example.

How do you pass it if it's not a component?

{#snippet my_button(children, onclick)}
<button class="btn btn-circle h-8 w-8" {onclick}>
    {@render children()}
</button>
{/snippet}

{@render my_button(<span>click me</span><MyIcon />, () => {})  <!-- impossible -->

[brunnerh]

Well, that is not possible unless you turn the button snippet into a component or the content into a snippet.