diff options
| author | Ruben Beltran del Rio <ruben@unlimited.pizza> | 2022-05-01 00:56:06 +0200 |
|---|---|---|
| committer | Ruben Beltran del Rio <ruben@unlimited.pizza> | 2022-05-01 00:56:06 +0200 |
| commit | a7cf03c192470cbab13edeb1aec99e0c66dede10 (patch) | |
| tree | 581b4430d1de958dcb666bae80a7678332134602 /src/lib/components/glyph/glyph.svelte | |
| parent | 010f307346e525ac2e4239a0549d2c1a4d6d102b (diff) | |
Update / use typescript
Diffstat (limited to 'src/lib/components/glyph/glyph.svelte')
| -rw-r--r-- | src/lib/components/glyph/glyph.svelte | 41 |
1 files changed, 41 insertions, 0 deletions
diff --git a/src/lib/components/glyph/glyph.svelte b/src/lib/components/glyph/glyph.svelte new file mode 100644 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> |