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.
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user