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:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user