src/lib/components/HoverIcon.svelte

@@ -4,29 +4,35 @@
 	let className: string = '';
 	export { className as class };
 	export let src: string | null = null;
-	export let text: string;
+	export let alt: string | undefined = undefined;
 	export let size: number = 32;
 	export let black: boolean = false;
 
-	let isUrl;
+	function isUrl(src?: string) {
-	$: isUrl = src?.startsWith('/') || src?.startsWith('http');
+		return src?.startsWith('/') || src?.startsWith('http');
+	}
 </script>
 
-<div
+<span class="{className} {black ? 'fill-slate-950' : 'fill-slate-50'} hover-icon">
-	class="{className} {black
-		? 'fill-slate-950'
-		: 'fill-slate-50'} text-sm uppercase transition-all"
->
 	{#if src}
-		{#if isUrl}
+		{#if isUrl(src)}
-			<img {src} alt={text} width={size} height={size} />
+			<img {src} {alt} width={size} height={size} />
 		{:else}
 			<Icon width={size} height={size} icon={src} color={black ? '#020618' : '#f8fafc'} />
 		{/if}
 	{:else}
-		{text}
+		{alt ?? 'Без иконки'}
 	{/if}
-</div>
+</span>
 
 <style>
+	@import '$src/app.css';
+
+	.hover-icon {
+		@apply text-sm uppercase transition-all;
+
+		img {
+			margin: 0;
+		}
+	}
 </style>

src/lib/components/NavBar.svelte

@@ -20,7 +20,7 @@
 				<HoverIcon
 					src={route.icon}
 					class="text-sm uppercase"
-					text={route.href}
+					alt={route.label}
 					size={32}
 					black={!isActive(route.href)}
 				/>

src/lib/components/SocialButton.svelte

@@ -14,7 +14,7 @@
 	target={isLinkLocal(href) ? '_self' : '_blank'}
 >
 	<div class="shrink-0 rounded-l-xl bg-slate-800 p-2">
-		<HoverIcon src={customIcon ?? tryGetIcon(href)} class="text-sm uppercase" text={href} />
+		<HoverIcon src={customIcon ?? tryGetIcon(href)} class="text-sm uppercase" />
 	</div>
 	<div
 		class="flex shrink-0 grow flex-nowrap items-center justify-center rounded-r-xl bg-slate-100 p-2 text-2xl text-nowrap text-slate-950"

src/lib/components/SocialHyperlink.svelte

@@ -11,11 +11,11 @@
 	const sm = new MediaQuery('width >= 40rem', false);
 </script>
 
-<a {href} class="{className} group inline-block" target={isLinkLocal(href) ? '_self' : '_blank'}>
+<a {href} class="{className} 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)} text={href} size={sm.current ? 24 : 20} />
+		<HoverIcon src={customIcon ?? tryGetIcon(href)} size={sm.current ? 24 : 20} />
 	</span>
 	<span class="text-emerald-900 underline">
 		<slot />