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

src/lib/components/SocialHyperlink.svelte

@@ -1,23 +1,32 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import { MediaQuery } from 'svelte/reactivity';
 	import HoverIcon from './HoverIcon.svelte';
 	import { isLinkLocal, tryGetIcon } from '$lib/util/LinkResolver';
 
-	export let href: string;
-	let className: string = '';
-	export { className as class };
-	export let customIcon: string | null = null;
+	let {
+		href,
+		class: klass = '',
+		customIcon = null,
+		children
+	}: { href: string; class?: string; customIcon?: string | null; children: Snippet } = $props();
+
+	const iconSrc = $derived(customIcon ?? tryGetIcon(href));
 
 	const sm = new MediaQuery('width >= 40rem', false);
 </script>
 
-<a {href} class="{className} group inline-block no-underline" target={isLinkLocal(href) ? '_self' : '_blank'}>
+<a
+	{href}
+	class="{klass} group inline-block no-underline"
+	target={isLinkLocal(href) ? '_self' : '_blank'}
+>
 	<span
 		class="inline-block size-6 rounded-sm bg-emerald-800 p-0.5 align-bottom transition-all group-hover:scale-110 sm:size-8 sm:rounded-xl sm:p-1"
 	>
-		<HoverIcon src={customIcon ?? tryGetIcon(href)} size={sm.current ? 24 : 20} />
+		<HoverIcon src={iconSrc} size={sm.current ? 24 : 20} />
 	</span>
 	<span class="text-emerald-900 underline">
-		<slot />
+		{@render children()}
 	</span>
-</a>
+</a>