Перенос рендера иконок на сторону сервера

src/lib/components/HoverIcon.svelte

@@ -1,12 +1,23 @@
 <script lang="ts">
-	import Icon from '@iconify/svelte';
+	import type { Component } from 'svelte';
 
-	let className: string = '';
-	export { className as class };
-	export let src: string | null = null;
-	export let alt: string = "";
-	export let size: number = 32;
-	export let black: boolean = false;
+	let {
+		class: klass = '',
+		src,
+		alt = '',
+		size = 32,
+		black = false
+	}: {
+		class?: string;
+		src?: Component | string;
+		alt?: string;
+		size?: number;
+		black?: boolean;
+	} = $props();
+
+	const IconComponent: Component | undefined = $derived(
+		typeof src === 'function' ? src : undefined
+	);
 
 	function isUrl(src?: string) {
 		return src?.startsWith('/') || src?.startsWith('http');
@@ -14,16 +25,14 @@
 </script>
 
 <span
-	class="{className} {black ? 'fill-slate-950' : 'fill-slate-50'} hover-icon"
+	class="{klass} {black ? 'fill-slate-950' : 'fill-slate-50'} hover-icon"
 	style:width="{size}px"
 	style:height="{size}px"
 >
-	{#if src}
-		{#if isUrl(src)}
-			<img {src} {alt} width={size} height={size} />
-		{:else}
-			<Icon width={size} height={size} icon={src} color={black ? '#020618' : '#f8fafc'} />
-		{/if}
+	{#if IconComponent}
+		<IconComponent width={size} height={size} color={black ? '#020618' : '#f8fafc'} />
+	{:else if typeof src === 'string' && isUrl(src)}
+		<img {src} {alt} width={size} height={size} />
 	{:else}
 		{alt ?? 'Без иконки'}
 	{/if}