Иконки

Контракт

Пять требований. Нарушение любого видно сразу — иконка либо съезжает по базовой линии, либо перестаёт менять цвет вместе с текстом.

Класс .inst-icon объявляет это плюс flex: none — иначе иконка сжимается первой, когда подпись рядом не помещается.

.inst-icon {
  flex: none;
  inline-size: var(--icon-size, var(--size-icon));
  block-size: var(--icon-size, var(--size-icon));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

Разметка

Доступность

Устройство

Спрайт объявляется один раз на документ, до первого <use>. Сам он невидим и скрыт от скринридера.

<svg class="inst-sprite" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
  <symbol id="i-refresh" viewBox="0 0 16 16">…</symbol>
</svg>

Использование:

<svg class="inst-icon" aria-hidden="true"><use href="#i-refresh"/></svg>

У <svg> в месте использования нет собственного viewBox: он приходит из <symbol>. Собственный viewBox на внешнем элементе перебивает символьный и обрезает часть глифов.

Доступные id

Набор намеренно маленький: иконка заводится под задачу, а не «на всякий случай». Список печатается из самого спрайта — набранный руками он уже однажды разошёлся с библиотекой на четыре символа.

Плюс 103 символов страниц справочника (i-p-*) — они принадлежат сайту, а не киту.

Размеры

Какой размер берёт шеврон

--size-chevron — это 10px против 18 у --size-icon, и одно другим не заменяется: токен отвечает на три разные задачи, и только две из них его собственные.

Третья строка — та, где ошибиться легче всего. .inst-cascader-item носится вместе с .inst-menu-item, у которого отметка выбора — --size-icon; десять против восемнадцати в одной колонке читаются как два словаря, а не как один список.

Шеврон, который сам является целью нажатия, — отдельный вопрос, и ответ на него не мельче глиф, а крупнее бокс. .inst-tab-close это и формулирует: квадрат из яруса контролов, а служебный глиф внутри, — потому что крестик в 10px это цель в 10px и заливка ховера размером со знак. Там, где цель настоящая, ставится настоящая inst-btn--xs: псевдоэлемент, нарисованный под кнопку, — обещание, которого разметка не держит.

| --icon-size: var(--size-icon-sm) | 14px | --size-icon-sm | Показание в строке состояния: там кегль --text-2xs | | --icon-size: var(--size-icon-lg) | 24px | --size-icon-lg | Значок в рельсе, где подписи нет вовсе |

Все четыре — одна мера с разными опорами. Значок рядом с подписью меряется против ЕЁ прописной, поэтому у одиннадцатого кегля значок свой; значок без подписи меряется против цели нажатия, потому что сравнивать не с чем. Проверяет cmd/proportion, полосы там же.

Иконка крупнее этих четырёх — либо иллюстрация (её место в пустом состоянии), либо ошибка иерархии: иконка обслуживает данные и обязана быть тише их.

Размеры не реагируют на плотность намеренно — см. плотность: иконка носитель значения, и на 12px обводка 1.5 превращается в кляксу.

Композиции

<div class="inst-menu" role="menu">
  <button class="inst-menu-item" type="button" role="menuitem">
    <svg class="inst-icon" aria-hidden="true"><use href="#i-refresh"/></svg>Перезапустить
  </button>
  <button class="inst-menu-item" type="button" role="menuitem">
    <svg class="inst-icon" aria-hidden="true"><use href="#i-copy"/></svg>Скопировать id
  </button>
</div>

Иконочная кнопка квадратная: ширина берётся из той же высоты контрола, поэтому квадрат сохраняется во всех трёх размерах и во всех плотностях.

Правила

Что брать, а что нет

Настройка

1. Нарисуйте на сетке 16×16, только обводкой.
2. Уберите fill, stroke, stroke-width из самих путей — они придут из .inst-icon.
3. Скруглите концы и стыки не в файле, а классом: stroke-linecap и stroke-linejoin уже там.
4. Положите в спрайт как <symbol id="i-…" viewBox="0 0 16 16">.
5. Проверьте на тёмной теме: обводка на 1.5 в тёмной теме оптически тоньше, и слишком мелкая деталь исчезает.

API

Связанное

Ритм и форма Цвет Кнопка Поповер и меню Пустое состояние