git.r.bdr.sh - rbdr/forum/blob - 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 class="glyphicon" role="img" aria-label={$_('glyph.title')} title={$_('glyph.title')}>
   9         {#each getGlyphHash(uuid) as fragment}
  10                 <span class={fragment.glyph} style="color: {fragment.color} ">
  11                         {fragment.glyph}
  12                 </span>
  13         {/each}
  14 </div>
  15
  16 <style>
  17         .glyphicon {
  18                 border: 1px solid black;
  19                 display: inline-block;
  20                 font-size: 1.4rem;
  21                 height: 48px;
  22                 margin-top: 5px;
  23                 width: 48px;
  24                 background-color: white;
  25                 padding: 2px;
  26         }
  27
  28         span {
  29                 display: block;
  30                 float: left;
  31                 width: 24px;
  32                 height: 24px;
  33                 text-align: center;
  34                 line-height: 24px;
  35         }
  36
  37         .☽ {
  38                 font-size: 2rem;
  39                 line-height: 19px;
  40         }
  41 </style>