Переработал HoverIcon, чтобы его можно было использовать в <p>

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;
-	$: isUrl = src?.startsWith('/') || src?.startsWith('http');
+	function isUrl(src?: string) {
+		return src?.startsWith('/') || src?.startsWith('http');
+	}
 </script>
 
-<div
-	class="{className} {black
-		? 'fill-slate-950'
-		: 'fill-slate-50'} text-sm uppercase transition-all"
->
+<span class="{className} {black ? 'fill-slate-950' : 'fill-slate-50'} hover-icon">
 	{#if src}
-		{#if isUrl}
-			<img {src} alt={text} width={size} height={size} />
+		{#if isUrl(src)}
+			<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>