Иконка
Иконка рисует один знак из иконочного шрифта Thykes: размер берётся из шкалы иконок, цвет — от текста вокруг.
<tk-icon name="star"></tk-icon> <tk-icon name="mail"></tk-icon> <tk-icon name="settings"></tk-icon>
thykes.js сам загружает иконочный шрифт, больше ничего подключать не нужно.
Анатомия
| Часть | Что это |
|---|---|
tk-icon |
квадрат размером size; скрыт от скринридеров, если нет label |
part glyph |
сам рисунок: символ иконочного шрифта цвета элемента |
Размеры
<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 |
12px | рядом с мелким текстом, плотные статусы |
16 (по умолчанию) |
16px | рядом с основным текстом, в меню и контролах |
20 |
20px | рядом с крупным текстом |
24 |
24px | отдельно, навигация |
32 |
32px | заметное место |
48 |
48px | крупно и отдельно, например в пустом состоянии |
inherit |
1em | следует за размером текста вокруг |
Размеры — это icon-size-*
Цвет
<tk-icon name="check-circle" tone="success" label="Done"></tk-icon> <tk-icon name="warning" tone="warning" label="Warning"></tk-icon> <tk-icon name="info" tone="info" label="Info"></tk-icon> <tk-icon name="star" tone="accent"></tk-icon> <tk-icon name="clock" tone="secondary"></tk-icon>
Без tone иконка берёт цвет текста вокруг, поэтому внутри компонента следует за его
состояниями и темами. Отдельно стоящей иконке tone задаёт цвет icon/*:
tone |
Цвет |
|---|---|
| не задан | цвет текста вокруг |
default, secondary, tertiary |
icon/default, icon/secondary, icon/tertiary, от самого сильного к самому тихому |
disabled |
icon/disabled |
accent |
icon/accent; следует за основным цветом |
success, warning, error, info |
цвета статусов |
inverse, on-fill |
на инверсной поверхности или цветной заливке |
Тона selected нет. Выбранный контрол сам красит свою иконку.
В компонентах
<tk-button variant="primary"><tk-icon slot="icon-start" name="check"></tk-icon>Save changes</tk-button> <tk-icon-button label="Settings"><tk-icon name="settings"></tk-icon></tk-icon-button> <p><tk-icon name="mail"></tk-icon> 3 unread messages</p>
В слоте компонента размер задаёт компонент, и ваш size не действует. tk-button,
tk-icon-button, tk-menu-item и tk-tag рисуют иконки размером 16px, tk-banner и
tk-section-message — 20px, tk-empty-state — размером своего медиа.
Названия
Названия пишутся строчными буквами через дефис и говорят, что иконка значит. Все знаки
показаны на странице
| Группа | Названия |
|---|---|
| Навигация | menu, chevron-up, chevron-down, chevron-left, chevron-right, arrow-up, arrow-down, arrow-right, arrow-up-right, external-link, link |
| Действия | search, plus, minus, close, check, edit, copy, trash, download, share, filter, sort, settings, more-horizontal |
| Статусы | info, warning, error, check-circle, x-circle |
| Объекты | bookmark, bookmark-filled, star, mail, user, calendar, clock, image, monitor, sun, moon |
| Бренды | github, figma |
Неизвестное название даёт пустой квадрат и предупреждение в консоли.
Когда использовать
- Кладите иконку в слот иконки компонента, например кнопки, пункта меню или тега, или рядом с текстом.
- Добавляйте к иконке текст, где есть место. Слово читается легче, чем одна иконка.
- Для кликабельной иконки берите
Icon button .tk-iconникогда не получает фокус. - Нужной формы нет в шрифте? Любой слот иконки принимает и ваш
<svg>. См.Your own icons .
Можно / нельзя
| ✅ Можно | ❌ Нельзя |
|---|---|
| Иконка с текстом | Одна иконка там, где поместится слово |
| Icon button для кликабельной иконки | Обработчик нажатия на tk-icon |
label у иконки, которая стоит одна |
label у иконки рядом с текстом, который говорит то же |
| Размер иконки в слоте задаёт компонент | size у иконки внутри кнопки |
| Форма статуса вместе с цветом статуса | Статус одним цветом |
Связанные
Icons : как рисуются, называются и окрашиваются иконки, и все знаки.Icon button : кликабельная иконка.Button : слотыicon-startиicon-end.
API
Атрибуты
| Атрибут | Тип | По умолчанию | Что делает |
|---|---|---|---|
name |
string | какую иконку рисовать; см. |
|
size |
12 | 16 | 20 | 24 | 32 | 48 | inherit |
16 |
размер |
tone |
см. |
не задан | цвет icon/*; без него — цвет текста вокруг |
label |
string | доступное имя; пустое — иконка декоративная |
CSS
::part(glyph): сам рисунок.
Слотов и событий нет.
Токены
| Элемент | Токены |
|---|---|
| размер | от icon-size-12 до icon-size-48 |
цвет с tone |
icon/default, icon/secondary, icon/tertiary, icon/disabled, icon/inverse, icon/on-fill, icon/accent, icon/success, icon/warning, icon/error, icon/info |
Значения по темам:
Доступность
Встроено:
- Без
labelиконка скрыта от скринридеров. - С
labelиконка — изображение с этим именем. - В контрастном режиме Windows иконка берёт системный цвет текста.
На вашей стороне:
-
Не задавайте
label, если текст рядом уже говорит, что значит иконка. -
Задайте
label, когда смысл несёт только иконка:Disk almost full <tk-icon name="warning" tone="warning" label="Warning"></tk-icon> Disk almost full
-
В кнопке называйте кнопку, а не иконку.
-
Не полагайтесь только на цвет. Добавьте к цвету статуса форму статуса (
check-circle,warning,error) или текст.