From 52ca2c24f4cddf46c84b884c0ac8e58719ff6364 Mon Sep 17 00:00:00 2001
From: rehlert <post@rehlert.de>
Date: Tue, 16 Jun 2026 18:46:11 +0200
Subject: [PATCH] adds icons to buttons

---
 src/lib/components/icons/IconSettings.svelte |   8 ++
 src/lib/components/ui/button.svelte          | 143 ++++++++++---------
 2 files changed, 85 insertions(+), 66 deletions(-)
 create mode 100644 src/lib/components/icons/IconSettings.svelte

diff --git a/src/lib/components/icons/IconSettings.svelte b/src/lib/components/icons/IconSettings.svelte
new file mode 100644
index 0000000..df94283
--- /dev/null
+++ b/src/lib/components/icons/IconSettings.svelte
@@ -0,0 +1,8 @@
+<svg class="w-fit h-fit" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M21 17.5834C21.5523 17.5834 22 18.0311 22 18.5834V19.5834H1C0.447716 19.5834 0 19.1357 0 18.5834C0 18.0311 0.447715 17.5834 1 17.5834H21Z" fill="#122F62"/>
+    <path d="M21 10.5834C21.5523 10.5834 22 11.0311 22 11.5834V12.5834H1C0.447716 12.5834 0 12.1357 0 11.5834C0 11.0311 0.447715 10.5834 1 10.5834H21Z" fill="#122F62"/>
+    <path d="M21 3.08337C21.5523 3.08337 22 3.53109 22 4.08337V5.08337H1C0.447716 5.08337 0 4.63566 0 4.08337C0 3.53109 0.447715 3.08337 1 3.08337H21Z" fill="#122F62"/>
+    <circle cx="6.5" cy="3.75" r="2.75" fill="white" stroke="#122F62" stroke-width="2"/>
+    <circle cx="15.5835" cy="11.0834" r="2.75" fill="white" stroke="#122F62" stroke-width="2"/>
+    <circle cx="6.5" cy="18.4167" r="2.75" fill="white" stroke="#122F62" stroke-width="2"/>
+</svg>
diff --git a/src/lib/components/ui/button.svelte b/src/lib/components/ui/button.svelte
index 1d5e7e7..1cad705 100644
--- a/src/lib/components/ui/button.svelte
+++ b/src/lib/components/ui/button.svelte
@@ -1,78 +1,89 @@
 <script lang="ts" module>
-	import { ripple } from "$lib/actions/ripple";
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
-	import { type VariantProps, tv } from "tailwind-variants";
+    import {ripple} from "$lib/actions/ripple";
+    import {cn, type WithElementRef} from "$lib/utils.js";
+    import type {HTMLAnchorAttributes, HTMLButtonAttributes} from "svelte/elements";
+    import {type VariantProps, tv} from "tailwind-variants";
+    import type {Component} from "svelte";
 
-	export const buttonVariants = tv({
-		base: "relative overflow-hidden font-bold w-fit hover:not-disabled:cursor-pointer disabled:bg-[#E6E7EA] disabled:text-[#0B1F4366]",
-		variants: {
-			variant: {
-				primary: "bg-primary text-primary-foreground",
-				secondary: "bg-linear-to-r from-secondary to-[#FF6F6D] text-primary-foreground",
-				bordered: "text-primary border-[#E6E7EA] border-2 bg-white hover:bg-[#122F621A]",
-				tertiary: "text-primary hover:bg-[#122F621A]",
-				success: "text-white bg-[#0FAD80]"
-			},
-			size: {
-				standard: "px-6 h-8 rounded-[16px]",
-				large: "px-8 h-12 rounded-[24px]"
-			},
-		},
-		defaultVariants: {
-			variant: "primary",
-			size: "standard",
-		},
-	});
+    export const buttonVariants = tv({
+        base: "relative overflow-hidden font-bold w-fit min-w-28 hover:not-disabled:cursor-pointer disabled:bg-[#E6E7EA] disabled:text-[#0B1F4366] inline-flex items-center justify-center gap-4",
+        variants: {
+            variant: {
+                primary: "bg-primary text-primary-foreground",
+                secondary: "bg-linear-to-r from-secondary to-[#FF6F6D] text-primary-foreground",
+                bordered: "text-primary border-[#E6E7EA] border-2 bg-white hover:bg-[#122F621A]",
+                tertiary: "text-primary hover:bg-[#122F621A]",
+                success: "text-white bg-[#0FAD80]"
+            },
+            size: {
+                standard: "px-6 h-8 rounded-[16px]",
+                large: "px-8 h-12 rounded-[24px]"
+            },
+        },
+        defaultVariants: {
+            variant: "primary",
+            size: "standard",
+        },
+    });
 
-	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
-	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+    export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+    export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
 
-	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
-			WithElementRef<HTMLAnchorAttributes> & {
-		variant?: ButtonVariant;
-		size?: ButtonSize;
-	};
+    export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+        WithElementRef<HTMLAnchorAttributes> & {
+        variant?: ButtonVariant;
+        size?: ButtonSize;
+        end?: Component;
+    };
 </script>
 
 <script lang="ts">
-	let {
-		class: className,
-		variant = "primary",
-		size = "standard",
-		ref = $bindable(null),
-		href = undefined,
-		type = "button",
-		disabled,
-		children,
-		...restProps
-	}: ButtonProps = $props();
+    let {
+        class: className,
+        variant = "primary",
+        size = "standard",
+        end,
+        ref = $bindable(null),
+        href = undefined,
+        type = "button",
+        disabled,
+        children,
+        ...restProps
+    }: ButtonProps = $props();
 </script>
 
 {#if href}
-	<a
-			use:ripple
-			bind:this={ref}
-			data-slot="button"
-			class={cn(buttonVariants({ variant, size }), className)}
-			href={disabled ? undefined : href}
-			aria-disabled={disabled}
-			role={disabled ? "link" : undefined}
-			tabindex={disabled ? -1 : undefined}
-			{...restProps}
-	>
-		{@render children?.()}
-	</a>
+    <a
+            use:ripple
+            bind:this={ref}
+            data-slot="button"
+            class={cn("", buttonVariants({ variant, size }), className)}
+            href={disabled ? undefined : href}
+            aria-disabled={disabled}
+            role={disabled ? "link" : undefined}
+            tabindex={disabled ? -1 : undefined}
+            {...restProps}
+    >
+        {@render children?.()}
+        {#if end}
+            {@const Icon = end}
+            <Icon/>
+        {/if}
+    </a>
 {:else}
-	<button
-			use:ripple
-			bind:this={ref}
-			data-slot="button"
-			class={" " + cn(buttonVariants({ variant, size }), className)}
-			{type}
-			{disabled}
-			{...restProps}
-	>
-		{@render children?.()}
-	</button>
+    <button
+            use:ripple
+            bind:this={ref}
+            data-slot="button"
+            class={cn("inline-flex items-center justify-center gap-4", buttonVariants({ variant, size }), className)}
+            {type}
+            {disabled}
+            {...restProps}
+    >
+        {@render children?.()}
+        {#if end}
+            {@const Icon = end}
+            <Icon/>
+        {/if}
+    </button>
 {/if}