feat(frontend): replace emoji with inline Material Symbols icon system

Add a self-contained icon system: vendored Material Symbols registry, an
<Icon> component that references a single <symbol> sprite via <use>, plus
IconButton/IconSprite. Replace every emoji/Unicode glyph (logo, theme
switcher, cover placeholder, like/comment counts, lightbox controls, back
links) and add leading icons to key controls. Decorative icons are
aria-hidden; icon-only buttons get labels; theme toggles expose
aria-pressed; counters get accessible names.

Recorded in openspec change material-icons-ui (all tasks complete).
This commit is contained in:
iu
2026-10-10 13:19:29 +03:00
parent 84ce4d1930
commit 997ec5e6c1
21 changed files with 582 additions and 69 deletions
+14 -4
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import { api } from '$lib/api';
import Icon from './Icon.svelte';
import { auth } from '$lib/stores/auth.svelte';
import type { Comment } from '$lib/types';
@@ -61,9 +62,14 @@
{#if auth.user?.id === comment.user_id}
<button
type="button"
class="text-text-subtle hover:text-danger text-xs"
onclick={() => remove(comment.id)}>удалить</button
class="text-text-subtle hover:text-danger inline-flex shrink-0 items-center gap-0.5 text-xs"
aria-label="Удалить комментарий"
title="Удалить комментарий"
onclick={() => remove(comment.id)}
>
<Icon name="delete" class="size-3.5" />
удалить
</button>
{/if}
</div>
{/each}
@@ -75,9 +81,13 @@
placeholder="Комментарий…"
class="border-border bg-bg text-text flex-1 rounded-lg border px-3 py-1.5 text-sm"
/>
<button class="bg-primary text-primary-fg rounded-lg px-3 py-1.5 text-sm" type="submit"
>Отправить</button
<button
class="bg-primary text-primary-fg inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm"
type="submit"
>
<Icon name="send" class="size-4" />
Отправить
</button>
</form>
{/if}
{#if error}