From e81be2cf689a5e63d153b1ea43708d2b44a6fee5 Mon Sep 17 00:00:00 2001
From: vikingowl <christian@nachtigall.dev>
Date: Tue, 4 Nov 2025 21:19:28 +0100
Subject: [PATCH] fix: Use svelte:component for dynamic icon rendering in
 ThemeToggle

Replace invalid {@const} usage with proper <svelte:component this={...}> syntax.
The {@const} tag must be an immediate child of specific block structures,
not directly inside regular HTML elements.
---
 src/lib/components/layout/ThemeToggle.svelte | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/layout/ThemeToggle.svelte b/src/lib/components/layout/ThemeToggle.svelte
index 1bbdfab..ff630d6 100644
--- a/src/lib/components/layout/ThemeToggle.svelte
+++ b/src/lib/components/layout/ThemeToggle.svelte
@@ -51,18 +51,16 @@
 <!-- Theme Toggle Dropdown -->
 <div class="dropdown dropdown-end">
 	<button tabindex="0" class="btn btn-ghost btn-circle" aria-label="Theme">
-		{@const IconComponent = currentIcon}
-		<IconComponent class="h-5 w-5" />
+		<svelte:component this={currentIcon} class="h-5 w-5" />
 	</button>
 	<ul class="menu dropdown-content z-[1] mt-3 w-52 rounded-box bg-base-100 p-2 shadow-lg">
 		{#each themes as { value, label, icon }}
-			{@const IconComponent = icon}
 			<li>
 				<button
 					class:active={$preferences.theme === value}
 					onclick={() => handleThemeChange(value)}
 				>
-					<IconComponent class="h-4 w-4" />
+					<svelte:component this={icon} class="h-4 w-4" />
 					{label}
 					{#if value === 'auto'}
 						<span class="text-xs text-base-content/60">(System)</span>