Replace inline SVGs with svelte-heros named imports

- Replace all inline SVG icons with named imports from svelte-heros
- Use direct file imports (e.g. import Plus from 'svelte-heros/Plus.svelte')
  for optimal tree-shaking and faster compilation
- Icons replaced: Home, GlobeAlt, Users, Mail, Refresh, DocumentText,
  MenuAlt4, ArrowLeft, Plus, Eye, EyeOff, CheckCircle
This commit is contained in:
Christoph Haas 2026-03-29 15:22:27 +02:00
parent 46d9ff26dd
commit caa0d580a0
7 changed files with 34 additions and 46 deletions

View file

@ -3,6 +3,13 @@
import { goto } from '$app/navigation';
import { onMount } from 'svelte';
import { decodeJWT, isTokenValid } from '$lib/auth';
import DocumentText from 'svelte-heros/DocumentText.svelte';
import GlobeAlt from 'svelte-heros/GlobeAlt.svelte';
import Home from 'svelte-heros/Home.svelte';
import Mail from 'svelte-heros/Mail.svelte';
import MenuAlt4 from 'svelte-heros/MenuAlt4.svelte';
import Refresh from 'svelte-heros/Refresh.svelte';
import Users from 'svelte-heros/Users.svelte';
import '../app.css';
let { children } = $props();
@ -84,9 +91,7 @@
<header class="navbar bg-base-100 shadow-sm">
<div class="flex-none lg:hidden">
<label for="nav-drawer" class="btn btn-square btn-ghost">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
</svg>
<MenuAlt4 class="h-5 w-5" />
</label>
</div>
@ -133,41 +138,29 @@
<span class="text-sm font-semibold uppercase opacity-60">Navigation</span>
</li>
<li><a href="/" class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
<Home class="h-5 w-5" />
Dashboard
</a></li>
<li><a href="/domains" class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
</svg>
<GlobeAlt class="h-5 w-5" />
Domains
</a></li>
{#if selectedDomain}
<li><a href={usersLink} class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
<Users class="h-5 w-5" />
Users
</a></li>
<li><a href={aliasesLink} class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<Mail class="h-5 w-5" />
Aliases
</a></li>
{/if}
<li><a href="/queue" class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
<Refresh class="h-5 w-5" />
Mail Queue
</a></li>
<li><a href="/logs" class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
<DocumentText class="h-5 w-5" />
Logs
</a></li>
</ul>

View file

@ -1,4 +1,6 @@
<script lang="ts">
import CheckCircle from 'svelte-heros/CheckCircle.svelte';
let oldPassword = $state('');
let newPassword = $state('');
let confirmPassword = $state('');
@ -64,9 +66,7 @@
{#if success}
<div class="alert alert-success mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" 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" />
</svg>
<CheckCircle class="h-6 w-6" />
<span>Password changed successfully!</span>
</div>
{/if}

View file

@ -1,5 +1,6 @@
<script lang="ts">
import { decodeJWT } from '$lib/auth';
import Plus from 'svelte-heros/Plus.svelte';
interface Domain {
id: number;
@ -92,9 +93,7 @@
<h2 class="text-2xl font-bold">Domains</h2>
{#if isAdmin}
<button class="btn btn-primary" onclick={openModal}>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
</svg>
<Plus class="h-5 w-5" />
Add Domain
</button>
{/if}

View file

@ -1,5 +1,6 @@
<script lang="ts">
import { page } from '$app/stores';
import ArrowLeft from 'svelte-heros/ArrowLeft.svelte';
interface DomainDetail {
id: number;
@ -40,9 +41,7 @@
<div class="space-y-6">
<div class="flex items-center gap-4">
<a href="/domains" class="btn btn-ghost btn-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
</svg>
<ArrowLeft class="h-5 w-5" />
Back to Domains
</a>
{#if domain}

View file

@ -1,5 +1,7 @@
<script lang="ts">
import { page } from '$app/stores';
import ArrowLeft from 'svelte-heros/ArrowLeft.svelte';
import Plus from 'svelte-heros/Plus.svelte';
interface Alias {
id: number;
@ -96,17 +98,13 @@
<div class="flex justify-between items-center">
<div class="flex items-center gap-4">
<a href="/domains/{domainName}" class="btn btn-ghost btn-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<ArrowLeft class="h-5 w-5" />
Back
</a>
<h2 class="text-2xl font-bold">Aliases - {domainName}</h2>
</div>
<button class="btn btn-primary" onclick={openModal}>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
</svg>
<Plus class="h-5 w-5" />
Add Alias
</button>
</div>

View file

@ -1,6 +1,9 @@
<script lang="ts">
import { page } from '$app/stores';
import { Eye, EyeOff } from 'svelte-heros';
import ArrowLeft from 'svelte-heros/ArrowLeft.svelte';
import Eye from 'svelte-heros/Eye.svelte';
import EyeOff from 'svelte-heros/EyeOff.svelte';
import Plus from 'svelte-heros/Plus.svelte';
interface User {
id: number;
@ -136,17 +139,13 @@
<div class="flex justify-between items-center">
<div class="flex items-center gap-4">
<a href="/domains/{domainName}" class="btn btn-ghost btn-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<ArrowLeft class="h-5 w-5" />
Back
</a>
<h2 class="text-2xl font-bold">Users - {domainName}</h2>
</div>
<button class="btn btn-primary" onclick={openModal}>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
</svg>
<Plus class="h-5 w-5" />
Add User
</button>
</div>

View file

@ -1,4 +1,6 @@
<script lang="ts">
import Refresh from 'svelte-heros/Refresh.svelte';
interface QueueEntry {
id: string;
sender: string;
@ -74,9 +76,7 @@
<div class="flex justify-between items-center">
<h2 class="text-2xl font-bold">Mail Queue</h2>
<button class="btn btn-primary" onclick={loadQueue}>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
</svg>
<Refresh class="h-5 w-5" />
Refresh
</button>
</div>