enhancement: defaulting to info icon

greymass · Oct 25, 2024 · 2538499 · 2538499
1 parent 5ca6d58
commit 2538499
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/src/lib/components/tooltip/tooltip.svelte b/src/lib/components/tooltip/tooltip.svelte
@@ -2,7 +2,7 @@
 	import { createTooltip, melt } from '@melt-ui/svelte';
 	import { fade } from 'svelte/transition';
 	import { type Snippet } from 'svelte';
-	import type { Icon } from 'lucide-svelte';
+	import { Info, type Icon } from 'lucide-svelte';
 
 	interface Props {
 		content: string;
@@ -16,7 +16,7 @@
 	const {
 		content,
 		children,
-		icon,
+		icon = Info,
 		fadeDuration = 50,
 		openDelay = 300,
 		closeDelay = 300

diff --git a/src/routes/[network]/(dev)/debug/components/sections/tooltips.svelte b/src/routes/[network]/(dev)/debug/components/sections/tooltips.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Info } from 'lucide-svelte';
+	import { ShieldQuestion, Info } from 'lucide-svelte';
 	import { Stack } from '$lib/components/layout';
 	import Tooltip from '$lib/components/tooltip/tooltip.svelte';
 </script>
@@ -35,9 +35,9 @@
 	<div>
 		<Tooltip
 			content="This is a long tooltip with an icon. Icons can be used to provide visual cues about the type of information being presented. For example, this icon might indicate that the tooltip contains important or critical information that the user should pay attention to."
-			icon={Info}
+			icon={ShieldQuestion}
 		>
-			<span class="cursor-help underline">Tooltip with icon</span>
+			<span class="cursor-help underline">Tooltip with custom icon</span>
 		</Tooltip>
 	</div>