svelte-sonner slots

[Carlos-err406]

Describe the feature

the original svelte-sonner provides slots for modifying the default iconst of the toast see this section of the svelte-sonner readme

my request is to add those slots to the installed component to make it more extendable, and so users dont have to modify the /ui/sonner.svelte component just to add them

[Carlos-err406]

also i would be glad to work on this, and if needed update the docs

[huntabyte]

That would be great @Carlos-err406 !

[Carlos-err406]

@huntabyte Do you think it's sane to copy and paste the Icon and Loader components from svelte-sonner, to use as default values of the slots, or is it better to get a quick PR on svelte-sonner to export the Icon component (and Loader) to the index? i dont know their stand on that though

or maybe is preferable to just use lucide-svelte icons and forget about the defaults of svelte-sonner?

[Carlos-err406]

tried the lucide icons approach, i think it came out pretty nice

[oliverdowling]

EDIT: Apologies, Svelte 5 did not give a warning/error for my example and because it doesn't work, it used a cached version and I commented a bit prematurely, before I realised.

For posterity, this is what I tried adding to sonner.svelte:

{#if $$slots["loading-icon"]}<slot slot="loading-icon" name="loading-icon" />{/if}
{#if $$slots["success-icon"]}<slot slot="success-icon" name="success-icon" />{/if}
{#if $$slots["error-icon"]}<slot slot="error-icon" name="error-icon" />{/if}
{#if $$slots["warning-icon"]}<slot slot="warning-icon" name="warning-icon" />{/if}
{#if $$slots["info-icon"]}<slot slot="info-icon" name="info-icon" />{/if}

I started trying to write a wrapper but I still couldn't easily get it to work as desired, even with Svelte 5's snippets, so I think it's easiest to use the changes in the PR if anyone needs the functionality.

[huntabyte]

With snippets coming up in svelte-sonner@next (not yet published) this issue will no longer be relevant.