icon from url

Author: wec

src/lib/components/dashboard.svelte

@@ -5,7 +5,7 @@
 	import { flip } from 'svelte/animate';
 	import { fade } from 'svelte/transition';
 	import ActionButtons from './actionButtons.svelte';
-	import { getIds, hasField } from '$lib/helpers';
+	import { getIds, hasField, isUrlString } from '$lib/helpers';
 	import EmptyItem from './emptyItem.svelte';
 	import EmptyGroup from './emptyGroup.svelte';
 	import { newGroup, newItem } from '$lib/factory';
@@ -200,7 +200,15 @@
 						<div class="flex items-center gap-2">
 							{#if item.icon}
 								<div class="h-14 w-14">
-									<Icon color="gray" icon={item.icon} height={56} />
+									{#if isUrlString(item.icon)}
+										<img
+											src={item.icon}
+											alt={item.title}
+											class="h-full w-full rounded-full object-cover"
+										/>
+									{:else}
+										<Icon color="gray" icon={item.icon} height={56} />
+									{/if}
 								</div>
 							{/if}
 							<div>

src/lib/components/modalFormItem.svelte

@@ -35,9 +35,9 @@
 		</Label>
 		<Label class="space-y-2">
 			<span>Icon</span>
-			<Input bind:value={form.icon} type="text" name="icon" placeholder="Icon name" />
+			<Input bind:value={form.icon} type="text" name="icon" placeholder="URL or Icon name" />
 			<Helper class="text-sm">
-				Icon name from <a
+				URL or Icon name from <a
 					target="_blank"
 					href="https://icon-sets.iconify.design/"
 					class="text-primary-600 dark:text-primary-500 font-medium hover:underline">iconify</a

src/lib/helpers.ts

@@ -28,3 +28,11 @@ export const generateRandomString = (length: number) => {
 		.toString(36)
 		.substring(2, 2 + length);
 };
+
+export const isUrlString = (str: string): boolean => {
+	if (!str) {
+		return false;
+	}
+	const urlRegex = /^(ftp|http|https):\/\/[^ "]+$/;
+	return urlRegex.test(str);
+};