Skip to content

Commit db44f2b

Browse files
HardMax71HardMax71
committed
icons lib instead of hardcoded svgs
1 parent d13a257 commit db44f2b

File tree

12 files changed

+196
-237
lines changed

12 files changed

+196
-237
lines changed

‎frontend/src/components/ErrorDisplay.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<script lang="ts">
2+
import { AlertTriangle } from '@lucide/svelte';
3+
24
let { error, title = 'Application Error' }: {
35
error: Error | string;
46
title?: string;
@@ -33,9 +35,7 @@
3335
<!-- Error Icon -->
3436
<div class="flex justify-center mb-6">
3537
<div class="h-16 w-16 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
36-
<svg class="h-8 w-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
37-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
38-
</svg>
38+
<AlertTriangle class="h-8 w-8 text-red-600 dark:text-red-400" />
3939
</div>
4040
</div>
4141

‎frontend/src/components/Footer.svelte‎

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
<script>
2-
// Simple SVG Icons (Keep as before)
3-
const telegramIcon = `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg>`;
4-
const githubIcon = `<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"/></svg>`;
2+
import { Github, Send } from '@lucide/svelte';
53
</script>
64

75
<footer class="relative z-30 mt-8 pt-8 pb-6 bg-bg-alt dark:bg-dark-bg-alt border-t border-border-default dark:border-dark-border-default">
@@ -53,21 +51,17 @@
5351
© {new Date().getFullYear()} Integr8sCode. Built by Max Azatian. All rights reserved.
5452
</p>
5553
<div class="flex space-x-5">
56-
{#if telegramIcon}
57-
<a href="https://t.me/MaxAzatian" target="_blank" rel="noopener noreferrer" title="Telegram"
58-
class="text-fg-muted dark:text-dark-fg-muted hover:text-primary dark:hover:text-primary-light transition-colors duration-200">
59-
<span class="sr-only">Telegram</span>
60-
{@html telegramIcon}
61-
</a>
62-
{/if}
63-
{#if githubIcon}
64-
<a href="https://github.com/HardMax71/Integr8sCode" target="_blank" rel="noopener noreferrer"
65-
title="GitHub"
66-
class="text-fg-muted dark:text-dark-fg-muted hover:text-primary dark:hover:text-primary-light transition-colors duration-200">
67-
<span class="sr-only">GitHub</span>
68-
{@html githubIcon}
69-
</a>
70-
{/if}
54+
<a href="https://t.me/MaxAzatian" target="_blank" rel="noopener noreferrer" title="Telegram"
55+
class="text-fg-muted dark:text-dark-fg-muted hover:text-primary dark:hover:text-primary-light transition-colors duration-200">
56+
<span class="sr-only">Telegram</span>
57+
<Send size={20} />
58+
</a>
59+
<a href="https://github.com/HardMax71/Integr8sCode" target="_blank" rel="noopener noreferrer"
60+
title="GitHub"
61+
class="text-fg-muted dark:text-dark-fg-muted hover:text-primary dark:hover:text-primary-light transition-colors duration-200">
62+
<span class="sr-only">GitHub</span>
63+
<Github size={20} />
64+
</a>
7165
</div>
7266
</div>
7367
</div>

‎frontend/src/components/Header.svelte‎

Lines changed: 15 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,13 @@
55
import { fade } from 'svelte/transition';
66
import { onMount, onDestroy } from 'svelte';
77
import NotificationCenter from './NotificationCenter.svelte';
8+
import { Sun, Moon, MonitorCog, Menu, X, LogIn, UserPlus, LogOut, User, ChevronDown, Settings } from '@lucide/svelte';
89
910
let isMenuActive = $state(false);
1011
let isMobile = $state(false);
1112
let resizeListener: (() => void) | null = null;
1213
let showUserDropdown = $state(false);
13-
14-
const sunIcon = `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>`;
15-
const moonIcon = `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>`;
16-
const autoIcon = `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg>`;
17-
const menuIcon = `<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>`;
18-
const closeIcon = `<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>`;
1914
let logoImgClass = "h-8 max-h-8 w-auto transition-all duration-200 group-hover:scale-110";
20-
const loginIcon = `<svg class="w-5 h-5 mr-2 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path></svg>`;
21-
const registerIcon = `<svg class="w-5 h-5 mr-2 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path></svg>`;
22-
const logoutIcon = `<svg class="w-5 h-5 mr-2 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>`;
23-
const userIcon = `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>`;
24-
const chevronDownIcon = `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>`;
25-
const adminIcon = `<svg class="w-5 h-5 mr-2 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>`;
2615
2716
2817
function toggleMenu() {
@@ -107,11 +96,11 @@
10796
<div class="flex items-center space-x-3">
10897
<button onclick={toggleTheme} title="Toggle theme" class="btn btn-ghost btn-icon text-fg-muted dark:text-dark-fg-muted hover:text-fg-default dark:hover:text-dark-fg-default">
10998
{#if $theme === 'light'}
110-
{@html sunIcon}
99+
<Sun class="w-5 h-5" />
111100
{:else if $theme === 'dark'}
112-
{@html moonIcon}
101+
<Moon class="w-5 h-5" />
113102
{:else}
114-
{@html autoIcon}
103+
<MonitorCog class="w-5 h-5" />
115104
{/if}
116105
</button>
117106

@@ -125,10 +114,10 @@
125114
class="flex items-center space-x-2 btn btn-ghost btn-sm"
126115
>
127116
<div class="flex items-center space-x-2">
128-
{@html userIcon}
117+
<User class="w-5 h-5" />
129118
<span class="hidden xl:inline font-medium">{$username}</span>
130119
<span class="transition-transform duration-200" class:rotate-180={showUserDropdown}>
131-
{@html chevronDownIcon}
120+
<ChevronDown class="w-4 h-4" />
132121
</span>
133122
</div>
134123
</button>
@@ -200,7 +189,11 @@
200189

201190
<div class="block lg:hidden">
202191
<button onclick={toggleMenu} class="btn btn-ghost btn-icon text-fg-muted dark:text-dark-fg-muted hover:text-fg-default dark:hover:text-dark-fg-default">
203-
{@html isMenuActive ? closeIcon : menuIcon}
192+
{#if isMenuActive}
193+
<X class="h-5 w-5" />
194+
{:else}
195+
<Menu class="h-5 w-5" />
196+
{/if}
204197
</button>
205198
</div>
206199
</div>
@@ -226,21 +219,21 @@
226219
</div>
227220
{#if $userRole === 'admin'}
228221
<a href="/admin/events" use:route onclick={closeMenu} class="block px-3 py-2 rounded-md text-base font-medium text-fg-default dark:text-dark-fg-default hover:bg-neutral-100 dark:hover:bg-neutral-700 flex items-center">
229-
{@html adminIcon} Admin Panel
222+
<Settings class="w-5 h-5 mr-2 -ml-1" /> Admin Panel
230223
</a>
231224
{/if}
232225
<a href="/settings" use:route onclick={closeMenu} class="block px-3 py-2 rounded-md text-base font-medium text-fg-default dark:text-dark-fg-default hover:bg-neutral-100 dark:hover:bg-neutral-700">
233226
Settings
234227
</a>
235228
<button onclick={handleLogout} class="w-full text-left block px-3 py-2 rounded-md text-base font-medium text-red-700 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 hover:text-red-800 dark:hover:text-red-300 flex items-center">
236-
{@html logoutIcon} Logout
229+
<LogOut class="w-5 h-5 mr-2 -ml-1" /> Logout
237230
</button>
238231
{:else}
239232
<a href="/login" use:route onclick={closeMenu} class="block px-3 py-2 rounded-md text-base font-medium text-fg-default dark:text-dark-fg-default hover:bg-neutral-100 dark:hover:bg-neutral-700 flex items-center">
240-
{@html loginIcon} Login
233+
<LogIn class="w-5 h-5 mr-2 -ml-1" /> Login
241234
</a>
242235
<a href="/register" use:route onclick={closeMenu} class="block px-3 py-2 rounded-md text-base font-medium text-fg-default dark:text-dark-fg-default hover:bg-neutral-100 dark:hover:bg-neutral-700 flex items-center">
243-
{@html registerIcon} Register
236+
<UserPlus class="w-5 h-5 mr-2 -ml-1" /> Register
244237
</a>
245238
{/if}
246239
</div>

‎frontend/src/components/NotificationCenter.svelte‎

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
<script lang="ts">
2-
import { onMount, onDestroy } from 'svelte';
2+
import { onMount, onDestroy, type Component } from 'svelte';
33
import { fade, fly } from 'svelte/transition';
44
import { isAuthenticated, username, userId } from '../stores/auth';
55
import { get } from 'svelte/store';
66
import { goto } from '@mateothegreat/svelte5-router';
77
import { notificationStore, notifications, unreadCount, loading } from '../stores/notificationStore';
88
import type { NotificationResponse } from '../lib/api';
9+
import { Bell, AlertCircle, AlertTriangle, CircleCheck, Info } from '@lucide/svelte';
910
1011
let showDropdown = $state(false);
1112
// EventSource and reconnect state - not displayed in template, no $state needed
@@ -14,19 +15,13 @@
1415
const maxReconnectAttempts = 3;
1516
let reconnectTimeout: ReturnType<typeof setTimeout> | null = null;
1617
let hasLoadedInitialData = false;
17-
18-
const bellIcon = `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>`;
19-
const errorIcon = `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>`;
20-
const warningIcon = `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>`;
21-
const checkCircleIcon = `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>`;
22-
const infoIcon = `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M12 2a10 10 0 100 20 10 10 0 000-20z"></path></svg>`;
2318
24-
function getNotificationIcon(tags: string[] = []): string {
19+
function getNotificationIcon(tags: string[] = []): Component {
2520
const set = new Set(tags || []);
26-
if (set.has('failed') || set.has('error') || set.has('security')) return errorIcon;
27-
if (set.has('timeout') || set.has('warning')) return warningIcon;
28-
if (set.has('completed') || set.has('success')) return checkCircleIcon;
29-
return infoIcon;
21+
if (set.has('failed') || set.has('error') || set.has('security')) return AlertCircle;
22+
if (set.has('timeout') || set.has('warning')) return AlertTriangle;
23+
if (set.has('completed') || set.has('success')) return CircleCheck;
24+
return Info;
3025
}
3126
3227
const priorityColors = {
@@ -225,7 +220,7 @@
225220
class="btn btn-ghost btn-icon relative"
226221
aria-label="Notifications"
227222
>
228-
{@html bellIcon}
223+
<Bell class="w-5 h-5" />
229224
{#if $unreadCount > 0}
230225
<span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
231226
{$unreadCount > 9 ? '9+' : $unreadCount}
@@ -255,9 +250,7 @@
255250
onclick={requestNotificationPermission}
256251
class="mt-2 w-full text-xs text-fg-muted dark:text-dark-fg-muted hover:text-blue-600 dark:hover:text-blue-400 flex items-center justify-center gap-1"
257252
>
258-
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
259-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
260-
</svg>
253+
<Bell class="w-3 h-3" />
261254
Enable desktop notifications
262255
</button>
263256
{/if}
@@ -309,7 +302,7 @@
309302
>
310303
<div class="flex items-start space-x-3">
311304
<div class={`mt-1 ${priorityColors[notification.severity || 'medium']}`}>
312-
{@html getNotificationIcon(notification.tags)}
305+
<svelte:component this={getNotificationIcon(notification.tags)} class="w-5 h-5" />
313306
</div>
314307
<div class="flex-1 min-w-0">
315308
<p class="font-medium text-sm">

‎frontend/src/components/ToastContainer.svelte‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,7 @@
22
import { onDestroy } from 'svelte';
33
import { toasts, removeToast, TOAST_DURATION, type Toast, type ToastType } from "../stores/toastStore";
44
import { fly } from "svelte/transition";
5-
6-
const checkCircleIcon = `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>`;
7-
const errorIcon = `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" /></svg>`;
8-
const warningIcon = `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" /></svg>`;
9-
const infoIcon = `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" /></svg>`;
10-
const closeIcon = `<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>`;
5+
import { CircleCheck, CircleX, AlertTriangle, Info, X } from '@lucide/svelte';
116
127
let timers: Record<string, ReturnType<typeof setInterval>> = {};
138
@@ -123,10 +118,10 @@
123118
onmouseleave={() => startTimer(toast)}
124119
>
125120
<div class={getIconClasses(toast.type)}>
126-
{#if toast.type === 'success'} {@html checkCircleIcon}
127-
{:else if toast.type === 'error'} {@html errorIcon}
128-
{:else if toast.type === 'warning'} {@html warningIcon}
129-
{:else} {@html infoIcon} {/if}
121+
{#if toast.type === 'success'} <CircleCheck class="w-5 h-5" />
122+
{:else if toast.type === 'error'} <CircleX class="w-5 h-5" />
123+
{:else if toast.type === 'warning'} <AlertTriangle class="w-5 h-5" />
124+
{:else} <Info class="w-5 h-5" /> {/if}
130125
</div>
131126

132127
<div class="flex-grow text-sm font-medium">
@@ -138,7 +133,7 @@
138133
onclick={() => { clearTimer(toast); removeToast(toast.id); }}
139134
aria-label="Close toast"
140135
>
141-
{@html closeIcon}
136+
<X class="h-4 w-4" />
142137
</button>
143138

144139
{#if toast.progress > 0}

0 commit comments

Comments
 (0)