active season/icon highlighted insteas of using text

src/lib/components/IconLayout.svelte

@@ -3,6 +3,7 @@
     import Recipes from '$lib/components/Recipes.svelte';
     import Search from './Search.svelte';
     export let icons
+    export let active_icon
 </script>
 
 <style>
@@ -15,10 +16,12 @@
     		box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2);
 	}
 	a:hover,
-	a:focus-visible
+	a:focus-visible,
+	.active
 	{
 		--angle: 15deg;
 		animation: shake 0.5s ease forwards;
+		background-color: var(--nord2);
 	}
 	.flex{
 		display:flex;
@@ -61,11 +64,10 @@
   }
 
 </style>
-<slot name="test"></slot>
 
 <div class=flex>
-{#each icons as icon}
-	<a href="/rezepte/icon/{icon}">{icon}</a>
+{#each icons as icon, i}
+	<a class:active={active_icon == icon} href="/rezepte/icon/{icon}">{icon}</a>
 {/each}
 </div>
 <section>