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 { auth } from '$lib/stores/auth.svelte';
|
||||
import Icon from './Icon.svelte';
|
||||
import type { Photo } from '$lib/types';
|
||||
|
||||
interface Props {
|
||||
@@ -96,13 +97,15 @@
|
||||
class="hidden"
|
||||
onchange={onChange}
|
||||
/>
|
||||
<Icon name="cloud_upload" class="text-text-subtle mx-auto mb-3 size-10" />
|
||||
<p class="text-text mb-3 text-sm">Перетащите фото сюда или</p>
|
||||
<button
|
||||
type="button"
|
||||
onclick={pick}
|
||||
disabled={busy}
|
||||
class="bg-primary text-primary-fg rounded-lg px-4 py-2 text-sm font-medium disabled:opacity-50"
|
||||
class="bg-primary text-primary-fg inline-flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium disabled:opacity-50"
|
||||
>
|
||||
<Icon name="add_photo_alternate" class="size-4" />
|
||||
{busy ? 'Загрузка…' : 'Выбрать файлы'}
|
||||
</button>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user