]> git.r.bdr.sh - rbdr/forum/blob - src/lib/components/glyph/glyph.svelte
89bc10c9735cfd856755f3b7115c2c3ad97d8535
[rbdr/forum] / src / lib / components / glyph / glyph.svelte
1 <script lang="ts">
2 import { _ } from 'svelte-i18n';
3 import { getGlyphHash } from '$lib/utils/glyph_hash';
4
5 export let uuid: string;
6 </script>
7
8 <div
9 class="inline-block w-12 h-12 mt-1 bg-white border border-black border-solid p-0.5 box-content glyphicon"
10 role="img"
11 aria-label={$_('glyph.title')}
12 title={$_('glyph.title')}
13 >
14 {#each getGlyphHash(uuid) as fragment}
15 <span
16 class="block text-2xl float-left w-6 h-6 text-center leading-6 {fragment.glyph}"
17 style="color: {fragment.color} "
18 >
19 {fragment.glyph}
20 </span>
21 {/each}
22 </div>
23
24 <style>
25 .glyphicon {
26 border: 1px solid black;
27 }
28
29 .☽ {
30 font-size: 2rem;
31 line-height: 19px;
32 }
33 </style>