diff options
Diffstat (limited to 'frontend/src/lib/pills/AssociationPill.svelte')
| -rw-r--r-- | frontend/src/lib/pills/AssociationPill.svelte | 34 |
1 files changed, 15 insertions, 19 deletions
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> |