+<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>