| <script lang="ts"> |
| import Icon from './Icon.svelte'; |
|
|
| interface Props { |
| glyph?: string; |
| accent?: string; |
| size?: number; |
| spin?: boolean; |
| } |
| let { glyph = 'star', accent = 'var(--amber)', size = 132, spin = true }: Props = $props(); |
| </script> |
|
|
| <div class="stamp {spin ? 'stamp--spin' : ''}" style="width:{size}px;height:{size}px"> |
| <svg class="stamp__ring" viewBox="0 0 132 132" width={size} height={size}> |
| <circle cx="66" cy="66" r="63" fill={accent} /> |
| <circle |
| cx="66" |
| cy="66" |
| r="63" |
| fill="none" |
| stroke="var(--ink)" |
| stroke-width="2.5" |
| stroke-dasharray="2.5 6" |
| stroke-linecap="round" |
| opacity="0.9" |
| /> |
| <circle cx="66" cy="66" r="50" fill="none" stroke="var(--paper)" stroke-width="1.5" opacity="0.85" /> |
| </svg> |
| <div class="stamp__face"> |
| <Icon name={glyph} size={size * 0.34} stroke="var(--paper)" sw={1.7} /> |
| </div> |
| </div> |
|
|
