40 lines
1.2 KiB
Svelte
40 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { getInstrumentIcon } from '$lib/instruments';
|
|
|
|
let {
|
|
code,
|
|
title = '',
|
|
size = 'w-12 h-12'
|
|
}: { code: string; title?: string; size?: string } = $props();
|
|
|
|
const icon = $derived(getInstrumentIcon(code));
|
|
</script>
|
|
|
|
{#if icon}
|
|
<img src={icon} alt={title} class="{size} mx-auto object-contain" />
|
|
{:else}
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="{size} mx-auto text-ohmj-primary"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="1.6"
|
|
aria-hidden="true"
|
|
>
|
|
{#if code === 'dir'}
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m3 21 9-9M15 4V2M15 16v-2M8 9h2M20 9h2M17.8 11.8 19 13M17.8 6.2 19 5" />
|
|
{:else if code === 'pia'}
|
|
<rect x="3" y="4" width="18" height="16" rx="2" />
|
|
<path stroke-linecap="round" d="M8 4v7M12 4v7M16 4v7M3 11h18" />
|
|
{:else if code === 'sup' || code === 'par'}
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M14 2v6h6M8 13h8M8 17h5" />
|
|
{:else}
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 18V5l12-2v13" />
|
|
<circle cx="6" cy="18" r="3" />
|
|
<circle cx="18" cy="16" r="3" />
|
|
{/if}
|
|
</svg>
|
|
{/if}
|