CSGOWTF/csgowtf
3
2
Fork 1
Code Issues 18 Pull Requests Projects Releases 7 Wiki Activity

fix: Use svelte:component for dynamic icon rendering in ThemeToggle

Browse Source 
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:
vikingowl
2025-11-04 21:19:28 +01:00
parent 523136ffbc
commit e81be2cf68
1 changed files with 2 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/components/layout/ThemeToggle.svelte
View File

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