Update / use typescript

[rbdr/forum] / src / lib / components / glyph / glyph.svelte

diff --git a/src/lib/components/glyph/glyph.svelte b/src/lib/components/glyph/glyph.svelte
new file mode 100644 (file)
index 0000000..0559b98
--- /dev/null
+++ b/src/lib/components/glyph/glyph.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+       import { _ } from 'svelte-i18n';
+       import { getGlyphHash } from '$lib/utils/glyph_hash';
+
+       export let uuid: string;
+</script>
+
+<div class="glyphicon" role="img" aria-label={$_('glyph.title')} title={$_('glyph.title')}>
+       {#each getGlyphHash(uuid) as fragment}
+               <span class={fragment.glyph} style="color: {fragment.color} ">
+                       {fragment.glyph}
+               </span>
+       {/each}
+</div>
+
+<style>
+       .glyphicon {
+               border: 1px solid black;
+               display: inline-block;
+               font-size: 1.4rem;
+               height: 48px;
+               margin-top: 5px;
+               width: 48px;
+               background-color: white;
+               padding: 2px;
+       }
+
+       span {
+               display: block;
+               float: left;
+               width: 24px;
+               height: 24px;
+               text-align: center;
+               line-height: 24px;
+       }
+
+       .☽ {
+               font-size: 2rem;
+               line-height: 19px;
+       }
+</style>