From 36f83e7ac47b34eec167be5f967b815eb4d329f0 Mon Sep 17 00:00:00 2001
From: Adrian Fennert <adrian.fennert@gmx.de>
Date: Tue, 10 Feb 2026 19:50:01 +0100
Subject: [PATCH] feat: add icon mapping for skills component

- remove console debug
---
 src/lib/components/SkillEntry.svelte   | 27 +++++++++++++++++---------
 src/lib/data/data.json                 | 22 ++++++++++-----------
 src/lib/mapping/icon-mapping.svelte.ts | 20 +++++++++++++++++++
 src/routes/+page.svelte                |  1 -
 4 files changed, 49 insertions(+), 21 deletions(-)
 create mode 100644 src/lib/mapping/icon-mapping.svelte.ts

diff --git a/src/lib/components/SkillEntry.svelte b/src/lib/components/SkillEntry.svelte
index c30c3fe..8b88bbc 100644
--- a/src/lib/components/SkillEntry.svelte
+++ b/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>
\ No newline at end of file
diff --git a/src/lib/data/data.json b/src/lib/data/data.json
index fcb9eb5..5bdc1f7 100644
--- a/src/lib/data/data.json
+++ b/src/lib/data/data.json
@@ -122,12 +122,12 @@
 		"entries": [
 			{
 				"title": "Programmiersprachen",
-				"icon": "language",
+				"icon": "code-xml",
 				"items": ["Java", "JavaScript", "TypeScript", "Visual Basic", "C#", "SQL", "HTML", "CSS"]
 			},
 			{
 				"title": "Frameworks",
-				"icon": "language",
+				"icon": "cpu",
 				"items": [
 					"Spring Boot",
 					"NodeJs",
@@ -140,47 +140,47 @@
 			},
 			{
 				"title": "Meta-Frameworks",
-				"icon": "language",
+				"icon": "layers",
 				"items": ["Next.JS", "SvelteKit", "Express", "Fastify", "Sap Composable Storefront"]
 			},
 			{
 				"title": "Datenbanken",
-				"icon": "language",
+				"icon": "database",
 				"items": ["PostgreSQL", "MariaDB", "MySQL", "SQLite", "MongoDB", "Oracle", "MS SQL"]
 			},
 			{
 				"title": "CMS",
-				"icon": "language",
+				"icon": "layout-template",
 				"items": ["Contentful", "Strapi", "Smartedit"]
 			},
 			{
 				"title": "Testing",
-				"icon": "language",
+				"icon": "test-tubes",
 				"items": ["JUnit", "Playwright", "Cypres"]
 			},
 			{
 				"title": "Sicherheitslösungen",
-				"icon": "language",
+				"icon": "shield-check",
 				"items": ["Keycloak", "JWT", "OAuth2"]
 			},
 			{
 				"title": "Entwicklungs Tools",
-				"icon": "language",
+				"icon": "wrench",
 				"items": ["Git", "Podman", "Docker", "WSL", "IntelliJ Idea", "Figma"]
 			},
 			{
 				"title": "Restful APIs und Dokumentation",
-				"icon": "language",
+				"icon": "file-braces-corner",
 				"items": ["OpenAPI", "Swagger", "Confluence"]
 			},
 			{
 				"title": "Methoden",
-				"icon": "language",
+				"icon": "clipboard-check",
 				"items": ["Scrum", "Kanban", "Jira"]
 			},
 			{
 				"title": "Sonstiges",
-				"icon": "language",
+				"icon": "sparkles",
 				"items": ["SEO", "Accessibility", "KI-basierte Tools"]
 			}
 		]
diff --git a/src/lib/mapping/icon-mapping.svelte.ts b/src/lib/mapping/icon-mapping.svelte.ts
new file mode 100644
index 0000000..6323879
--- /dev/null
+++ b/src/lib/mapping/icon-mapping.svelte.ts
@@ -0,0 +1,20 @@
+import type { LucideIconName } from '$lib/types/data';
+import type { Component } from 'svelte';
+
+export const iconComponentMapping: Partial<
+	/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+	Record<LucideIconName, Promise<{ default: Component<any> }>>
+> = {
+	Languages: import('@lucide/svelte/icons/languages'),
+	CodeXml: import('@lucide/svelte/icons/code-xml'),
+	Cpu: import('@lucide/svelte/icons/cpu'),
+	Layers: import('@lucide/svelte/icons/layers'),
+	Database: import('@lucide/svelte/icons/database'),
+	LayoutTemplate: import('@lucide/svelte/icons/layout-template'),
+	TestTubes: import('@lucide/svelte/icons/test-tubes'),
+	ShieldCheck: import('@lucide/svelte/icons/shield-check'),
+	Wrench: import('@lucide/svelte/icons/wrench'),
+	FileBracesCorner: import('@lucide/svelte/icons/file-braces-corner'),
+	ClipboardCheck: import('@lucide/svelte/icons/clipboard-check'),
+	Sparkles: import('@lucide/svelte/icons/sparkles')
+};
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c5ef0c0..b6e57be 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,7 +3,6 @@
 	import CmsComponent from '$lib/components/cms/CmsComponent.svelte';
 
 	let { data }: PageProps = $props();
-	console.debug(data)
 </script>
 
 {#each data.components as component, index (index)}