Avatar
Avatar по id стабильно выбирает персонажа и фон. С alt он значим, без alt — декоративен.
Статус: stable · в системе с 2026-06 · интерактивность: none (нет)
Когда использовать
- Визуальный якорь пользователя или аккаунта: списки, шапка, комментарии.
- Стабильная идентичность без загрузки фото — цвет и лицо считаются по
id. - Место пользователя, которого нет или он не назначен: особый персонаж (
special) вместо случайного лица.
Не использовать:
- Кодировать состояние сущности цветом аватара — цвет здесь идентичность, не смысл.
Альтернативы:
Размеры
<script>
import Avatar from "$lib/ui/Avatar.svelte";
</script>
<Avatar size="xs" id={0} />
<Avatar size="s" id={0} />
<Avatar size="m" id={0} />
<Avatar size="l" id={0} />
<Avatar size="xl" id={0} />
Бейдж уровня
Четыре уровня на m и s — единственных ступенях с бейджем.
<!--
🟢
Бейдж уровня — квадратная цветная метка в правом нижнем углу: bronze,
silver, gold, diamond. В ките он есть только у ступеней M (15px) и S (11.25px);
на остальных ступенях levelId игнорируется.
-->
<script>
import Avatar from "$lib/ui/Avatar.svelte";
const levels = [1, 2, 3, 4];
</script>
{#each levels as levelId (levelId)}
<Avatar size="m" id={levelId + 7} {levelId} />
{/each}
{#each levels as levelId (levelId)}
<Avatar size="s" id={levelId + 7} {levelId} />
{/each}
Особый персонаж
special — место неизвестного или неназначенного пользователя.
<!--
🟢
Особый персонаж (кит: type=special) — белый силуэт с розовым лицом на
голубом фоне вместо кота по id. Так показывают неизвестного или
неназначенного пользователя; ступени размеров те же.
-->
<script>
import Avatar from "$lib/ui/Avatar.svelte";
</script>
<Avatar size="xs" special />
<Avatar size="s" special />
<Avatar size="m" special />
<Avatar size="l" special />
<Avatar size="xl" special />
Палитра id
Лицо и фон выводятся из id детерминированно: один пользователь — один вид. Сорок id — полный цикл сочетаний: строка — одно лицо, столбец — один фон.
<!--
🟢
Палитра id: цвет лица берётся из последней цифры id, фон — из двух
последних, поэтому один и тот же пользователь выглядит одинаково в любом
списке. Пять лиц и восемь фонов сменяются с разным шагом, поэтому первые
сорок id — полный цикл сочетаний: дальше вид повторяется. Порядок здесь
не по id, а по цвету: строка — одно лицо, столбец — один фон.
-->
<script>
import Avatar from "$lib/ui/Avatar.svelte";
const FACES = 5;
const BACKGROUNDS = 8;
// Раскладка повторяет расчёт компонента: лицо — остаток id от пяти, фон —
// от восьми. На сорока id каждая пара встречается ровно раз, поэтому
// сортировка по этим остаткам даёт полную таблицу без пропусков.
const ids = Array.from({ length: FACES * BACKGROUNDS }, (_, index) => index).sort(
(a, b) => (a % FACES) - (b % FACES) || (a % BACKGROUNDS) - (b % BACKGROUNDS),
);
</script>
<div class="scroll">
<div class="palette">
{#each ids as id (id)}
<div class="cell">
<Avatar size="s" {id} />
<span>id {id}</span>
</div>
{/each}
</div>
</div>
<style>
/* Восемь столбцов держатся вместе: на узкой странице таблица уезжает
в прокрутку, а не рассыпается на строки другой длины */
.scroll {
overflow-x: auto;
width: 100%;
}
.palette {
display: grid;
grid-template-columns: repeat(8, minmax(max-content, 1fr));
gap: var(--sp-2) var(--sp-1);
width: 100%;
}
.cell {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-1);
color: var(--c-doc-fg);
font-size: var(--fs-xs);
}
</style>