НачалоОсновыКомпонентыТексты
Обзор Цвет Типографика Отступы Скругления Глубина Фокус Движение Иконки Пропорции

Иконки

Один набор линейных иконок на сетке 16px: он поставляется шрифтом и ставится через tk-icon. Иконки берут цвет окружения и молчат для скринридеров, пока вы их не назовёте.

РуководствоТокены

Как поставить иконку

Add member 
<tk-button><tk-icon slot="icon-start" name="plus"></tk-icon>Add member</tk-button>
<tk-icon-button label="Search"><tk-icon name="search"></tk-icon></tk-icon-button>
<tk-icon name="calendar" size="20"></tk-icon>
  • Ничего подключать не нужно. thykes.js сам добавляет шрифт иконок на страницу.
  • В слоте компонента, например в icon-start кнопки, размер и цвет иконке задаёт компонент.
  • Отдельно выберите size и при необходимости tone. API — на странице Icon.
  • Иконки появляются, когда загрузится шрифт. До этого, и если загрузка не удалась, их не видно, заглушки нет. Поэтому иконка никогда не несёт смысл одна: рядом нужен текст или доступное имя.

Все иконки

Глифов: 43. Подпись под иконкой и есть значение атрибута name.

  • arrow-down
  • arrow-right
  • arrow-up
  • arrow-up-right
  • bookmark
  • bookmark-filled
  • calendar
  • check
  • check-circle
  • chevron-down
  • chevron-left
  • chevron-right
  • chevron-up
  • clock
  • close
  • copy
  • download
  • edit
  • error
  • external-link
  • figma
  • filter
  • github
  • image
  • info
  • link
  • mail
  • menu
  • minus
  • monitor
  • moon
  • more-horizontal
  • plus
  • search
  • settings
  • share
  • sort
  • star
  • sun
  • trash
  • user
  • warning
  • x-circle

Размер

Размер выбирают по тексту рядом с иконкой. size принимает ступень шкалы icon-size-*, и никакое другое число.

<tk-icon name="star" size="12"></tk-icon>
<tk-icon name="star"></tk-icon>
<tk-icon name="star" size="20"></tk-icon>
<tk-icon name="star" size="24"></tk-icon>
<tk-icon name="star" size="32"></tk-icon>
<tk-icon name="star" size="48"></tk-icon>
size Для чего
12 плотные места и статусы, рядом с мелким текстом
16 (по умолчанию) рядом с основным текстом, в меню и контролах
20 рядом с более крупным текстом, в баннерах и сообщениях
24 отдельно, навигация
32 заметное место
48 крупно, отдельно

size="inherit" делает иконку размером 1em, и она следует за текстом. Обводка растёт вместе с иконкой: 1.5px при 16, 3px при 32, 4.5px при 48.

Цвет

У иконки один цвет, и своего цвета у неё нет.

<tk-icon name="check-circle" tone="success" label="Done"></tk-icon>
<tk-icon name="warning" tone="warning" label="Warning"></tk-icon>
<tk-icon name="error" tone="error" label="Error"></tk-icon>
<tk-icon name="info" tone="info" label="Info"></tk-icon>
  • По умолчанию иконка берёт цвет текста родителя (currentColor). Внутри компонента её красят состояния компонента.
  • tone выбирает роль icon/*, когда иконка стоит отдельно: default, secondary, tertiary, disabled, inverse, on-fill, accent, success, warning, error, info. Значения по темам — в Color.
  • Состояние — у контейнера. Выбранная вкладка красит свою иконку; «выбранной» иконки нет.
  • Ни двух цветов, ни многоцветных. Иконки статусов различаются и формой, а не только цветом, так что смысл не держится на одном цвете.

Доступность

  • По умолчанию иконка декоративная. Если рядом текст говорит то же самое, иконка скрыта от скринридеров.
  • Назовите её, если она стоит одна: с label иконка становится изображением с этим именем.
  • Кликабельная иконка — это кнопка. Берите Icon button и называйте кнопку; иконка внутри остаётся декоративной. tk-icon фокус не принимает.
  • Контраст: не меньше 3:1 к фону.
  • Размер цели: увеличивайте контрол, а не глиф: иконка 16px в кнопке 32px.
  • Принудительные цвета: иконки берут системный цвет текста.

Имена

  • Строчными, через дефис, по смыслу: search, close, chevron-down. По действию, если оно есть (edit, а не pencil), иначе по предмету (calendar, mail).
  • У семейства общий префикс: chevron-…, arrow-….
  • Вариант — суффиксом: -filled для залитого двойника (bookmark-filled), -circle для формы в круге (check-circle).
  • Имена постоянны. Имя сохраняет смысл и никогда не переиспользуется.
  • По неизвестному имени ничего не рисуется, в консоли появляется предупреждение.

Свои иконки

  • Сначала поищите в наборе. Понятие может быть под именем по действию. И слово часто понятнее иконки.
  • Разовая форма: положите свой <svg> в слот иконки компонента. Чтобы он совпал с набором, рисуйте на сетке 16×16 обводкой 1.5px со скруглёнными концами и стыками и stroke="currentColor".
  • Форма, нужная многим продуктам: попросите добавить глиф в набор.

Чего не умеет шрифт

  • Один цвет на глиф: ни двух цветов, ни многоцветных.
  • Нет переключения контур/заливка: залитая форма — отдельный глиф.
  • Обводка растёт с размером, поэтому крупные иконки выглядят тяжелее.
  • Окно загрузки: пока шрифт не пришёл, иконок не видно.