Svelte 5: svg not visible when using lucide-svelte

[amit13k]

Describe the bug

For some reason, lucide-svelte is not working properly with Svelte 5,

Example code,

<script lang="ts">
import { Loader2 } from 'lucide-svelte';

let visible = $state(true);
</script>

<button on:click={() => visible = !visible}>Toggle</button>

{#if visible}
	<Loader2 />
{/if}

The svg is only displayed at the beginning and after clicking on toggle doesn't appear again.

This issue doesn't occur with Svelte 4. Not sure if this is a Svelte 5 issue.

Reproduction

SvelteLab Svelte 5 Example
SvelteLab Svelte 4 Example

Logs

No response

System Info

System:
    OS: macOS 14.2
    CPU: (12) arm64 Apple M2 Pro
    Memory: 213.45 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.2.0 - /opt/homebrew/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 6.14.16 - /opt/homebrew/bin/npm
    pnpm: 8.10.5 - /opt/homebrew/bin/pnpm
    bun: 1.0.3 - ~/.bun/bin/bun
  Browsers:
    Chrome: 119.0.6045.159
    Chrome Canary: 121.0.6145.0
    Safari: 17.2

Severity

blocking an upgrade

[brunnerh]

In SvelteKit it first shows because of server-side rendering, which is correct.
The client-side issue can also be observed in a plain REPL, where it will not be visible from the start as everything is created on the client.

Inspecting the result, the problem appears to be that the path element in the icon is not being constructed with the correct namespace which ought to be inherited from the svg element. It becomes an unusable HTMLUnknownElement rather than an SVGPathElement.

The icons are created via a generic Icon which contains the svg and generates the contents from a property via svelte:element. Simplified reproduction:

<script>
	const iconNode = [["path", { "d": "M21 12a9 9 0 1 1-6.219-8.56" }]];
</script>
<svg xmlns="http://www.w3.org/2000/svg"
	width="24" height="24"
	viewBox="0 0 24 24"
	fill="none"
	stroke="currentColor" stroke-width="2">
	{#each iconNode as [tag, attrs]}
		<svelte:element this={tag} {...attrs}/>
	{/each}
</svg>

[Rich-Harris]

Simpler repro still: https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE4VQy27CMBD8le1ybYSp2osbkOA3cA_gLKmF40S2ExpF-feuHdoj3GbWOw_vhBdjKaA8TuhODaHEfdfhK8axSyQMZCMxD23vdZqUYahhMHQ7tD9bhQIEvAkBGyEU7pRTsXwpCqg9kQNtvLYEJrAgmDPDolh27i86WXywEvT4hzyD9wS4mWWcrZius_I_wVP1wH_pLclSQy5C_DZhOylcBArnJXnzJJoz7sHlmr-drF0Z4mgpp6RLTLlUPJ_0tfZt7yoJKyL6TOM56_I6X7BpK3MxVKGMvqf5a_4FxukjU3wBAAA=

[ericfennis]

I noticed this issue as well when testing PR: lucide-icons/lucide#1748. I've tested this with the regular Svelte (so no SSR). The HTML of SVG is present and visible in Devtools, but nothing is visible in the client. Same in Safari. Also checked for applied CSS that maybe hide the SVG, but this is not the case.

[eEQK]

The HTML of SVG is present and visible in Devtools, but nothing is visible in the client. Same in Safari. Also checked for applied CSS that maybe hide the SVG, but this is not the case.

@ericfennis FYI this happens because the namespace is not set correctly

---

My PR will fix issues that happen when using Lucide, however passing svg elements as a slot or snippet will still not work. To do that correctly I think we'd have to determine the namespace at runtime, which is what this TODO is saying:
3-transform/client/visitors/template.js:973

// TODO would be great to do this at runtime instead. Svelte 4 also can't handle cases today
// where it's not statically determinable whether the component is used in a svg or html context

[StevenStavrakis]

Am I to understand #10027 was supposed to fix this?

If so, I'm still having issues getting SVGs to render when they are used inside an {#if} block. Can anyone confirm if this fix is working for them?

[luisfontes]

I think this is the one that will fix this issue: #10006