From 1421152a9356c7def86143dfb31a3586d5491d55 Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Fri, 14 Feb 2025 11:57:03 +0100
Subject: frontend: Migrate to Tailwind 4.0

---
 frontend/src/lib/pills/AssociationPill.svelte | 34 ++++++++++++---------------
 1 file changed, 15 insertions(+), 19 deletions(-)

(limited to 'frontend/src/lib/pills/AssociationPill.svelte')

diff --git a/frontend/src/lib/pills/AssociationPill.svelte b/frontend/src/lib/pills/AssociationPill.svelte
index ffbc8c4..fec59b8 100644
--- a/frontend/src/lib/pills/AssociationPill.svelte
+++ b/frontend/src/lib/pills/AssociationPill.svelte
@@ -1,31 +1,27 @@
 <script lang="ts">
+	import Artist from '$lib/icons/Artist.svelte';
+	import Character from '$lib/icons/Character.svelte';
+	import Circle from '$lib/icons/Circle.svelte';
+	import World from '$lib/icons/World.svelte';
+	import type { Component } from 'svelte';
 	import Pill from './Pill.svelte';
 
 	type Association = 'artist' | 'circle' | 'world' | 'character';
 
 	let { name, type }: { name: string; type: Association } = $props();
+
+	const icons: Record<Association, Component> = {
+		artist: Artist,
+		character: Character,
+		circle: Circle,
+		world: World
+	};
+
+	const Icon = icons[type];
 </script>
 
 <Pill {name}>
 	{#snippet icon()}
-		<span class={`${type} icon-xs`}></span>
+		<Icon />
 	{/snippet}
 </Pill>
-
-<style lang="postcss">
-	.artist {
-		@apply icon-[material-symbols--person] -mx-px;
-	}
-
-	.character {
-		@apply icon-[material-symbols--face];
-	}
-
-	.circle {
-		@apply icon-[material-symbols--group] mx-px;
-	}
-
-	.world {
-		@apply icon-[material-symbols--public];
-	}
-</style>
-- 
cgit v1.2.3-2-gb3c3