src/lib/components/ServiceCard.svelte

@@ -1,18 +1,54 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-	import { OpenInNewWindow } from 'radix-icons-svelte';
-	import { quintInOut } from 'svelte/easing';
-	import { slide } from 'svelte/transition';
-	import type { Service } from '$lib/types/data-types';
+	import {OpenInNewWindow} from 'radix-icons-svelte';
+	import {quintInOut} from 'svelte/easing';
+	import {slide} from 'svelte/transition';
+	import {IconType, type Service} from '$lib/types/data-types';
+	import {onMount} from "svelte";
+	import {Skeleton} from "$lib/components/ui/skeleton";
 
-	let { service }: { service: Service } = $props();
+	let { service, icons } = $props<{ service: Service, icons: Array<string> }>();
 
 	let hover = $state({
 		title: false,
 		link: false,
 		ext: false
 	});
+
+	let img_source: string = $state("");
+
+	function checkForImage(service: Service) {
+		const rootSplit = service.icon.split('/');
+		const root = rootSplit[rootSplit.length - 1]
+
+		if (icons.includes(`${root}.${service.iconType}`)) {
+			img_source = `${service.icon}.${service.iconType}`
+		}
+		else {
+			img_source = ""
+		}
+	}
+
+	$effect(() => {
+		if (icons.length != 0) {
+			const rootSplit = service.icon.split('/');
+			const root = rootSplit[rootSplit.length - 1]
+
+			if (service.iconType === IconType.SVG) {
+				checkForImage(service)
+			}
+			else {
+				if (icons.includes(`${root}-36.${service.iconType}`)) {
+					img_source = `${service.icon}-36.${service.iconType}`
+				}
+				else {
+					checkForImage(service)
+				}
+			}
+		}
+	});
+
 </script>
 
 <div
@@ -25,13 +61,19 @@
 			on:mouseleave={() => (hover.title = false)}
 		>
 			{#if service.icon}
+				{#if img_source != ""}
 					<img
 							width="24px"
 							class="h-6 w-6 cursor-pointer"
-					src={service.icon}
+							src={img_source}
 							alt="{service.name} Logo"
 					/>
-			{:else}{/if}
+				{:else}
+					<Skeleton class="h-6 w-6 rounded-full" />
+				{/if}
+			{:else}
+
+			{/if}
 			<a
 				href={service.href}
 				class="font-bold text-accent {hover.title ? 'text-primary' : 'text-secondary'}"