feat: add icon mapping for skills component

- remove console debug

src/lib/components/SkillEntry.svelte

@@ -1,19 +1,28 @@
 <script lang="ts">
-	import type { SkillEntry } from '$lib/types/data';
+	import type { LucideIconName, SkillEntry } from '$lib/types/data';
 	import { Languages } from '@lucide/svelte';
+	import { iconComponentMapping } from '$lib/mapping/icon-mapping.svelte';
 
 	let { icon, title, items }: SkillEntry = $props();
 
 	let subtitle = $derived.by(() => {
 		return `${items.length} Einräge`;
 	});
+
+	let component = iconComponentMapping[icon as LucideIconName];
 </script>
 
 <article>
 	<div class="header">
 		<div class="header-icon">
 			<span class="icon">
-				<Languages class="icon" />
+				{#if component}
+					{#await component then { default: Component }}
+						<Component class="icon" />
+					{/await}
+				{:else}
+					<Languages class="icon" />
+				{/if}
 			</span>
 		</div>
 		<div class="headline">
@@ -34,9 +43,9 @@
 
 <style>
     article {
-				grid-row: span 2;
-				display: grid;
-				grid-template-rows: subgrid;
+        grid-row: span 2;
+        display: grid;
+        grid-template-rows: subgrid;
         gap: 1.5rem;
 
         padding: 1.5rem;
@@ -108,7 +117,7 @@
     .item-tags {
         display: grid;
         grid-template-columns: 1fr 1fr;
-				align-content: start;
+        align-content: start;
         justify-items: stretch;
         align-items: center;
         gap: 0.5rem;
@@ -126,7 +135,7 @@
         background-color: var(--color-skill-card-item-background);
 
         font-size: 0.875rem;
-				font-weight: bold;
+        font-weight: bold;
         text-align: center;
         color: white;
 
@@ -134,7 +143,7 @@
 
         @media (min-width: 786px) {
             padding: 0.75rem 1rem;
-						font-size: 1rem;
+            font-size: 1rem;
         }
 
         &:hover {
@@ -148,7 +157,7 @@
         transition: scale ease-in-out 0.2s;
     }
 
-		.item-tags-tag:hover div {
+    .item-tags-tag:hover div {
         scale: 1.05;
     }
 </style>