Иконки

Набор#

Сейчас в ките столько глифов, сколько нужно его компонентам и типовым экранам. Каждый глиф — отдельный файл, и набор ниже собран прямо из этого каталога.

• аккаунт
• вверх
• вебхук
• весы
• влево
• вниз
• вправо
• выход
• галочка
• группа
• закладка
• закрыть
• замок
• инфо
• история
• карандаш
• ключ
• конверт
• копировать
• корзина
• куб
• луна
• меню
• отправить
• ошибка
• пакет
• палочка
• плюс
• подпись
• поиск
• предупреждение
• скачать
• солнце
• сохранить
• ссылка
• стопка
• стрелка
• тег
• успех
• часы
• шестерёнка

Имена русские и называют смысл в интерфейсе, а не рисунок: «куб» — это deployed_code, «палочка» — wand_stars, «аккаунт» — один человек (account_circle), «группа» — несколько (group): значок раздела групп рядом с разделом людей. «Отправить» (send) — канал доставки сообщений, например чат-бот; «вебхук» (webhook) — вызов адреса приложения по событию. Исходное имя Material записано комментарием в файле глифа. Регистр имени не важен.

Как вставить#

Компоненты принимают иконку полем модели Иконка — у кнопки, карточки, плашки, пункта меню; в дереве холста это слово .Иконка(…): Кит.Кнопка("Создать").Иконка("плюс"). Отдельно иконку печатает компонент «Иконка».

Без подписи иконка декоративна: она скрыта от скринридера, потому что смысл несёт текст рядом.

Если иконка стоит одна и что-то значит, дайте ей подпись. Подпись печатается <title>, и иконка получает роль изображения.

Неизвестное имя не роняет страницу: иконка просто не печатается. Компоненты пропускают её так же — кнопка с опечаткой в имени иконки останется кнопкой с подписью.

На холсте иконка — узел, как остальные: имя позицией, подпись для скринридера — словом .Подпись(…).

Размер и цвет#

Иконка — квадрат 1em на 1em, опущенный на 1/8 кегля к базовой линии, и залита currentColor. Поэтому она растёт вместе с кеглем строки и красится цветом текста — в любой теме и при любом акценте.

Свой глиф#

Глиф — файл .svg в каталоге глифов кита src/статика/иконки. Имя файла без расширения — имя иконки. Каталог читается целиком при запуске, поэтому новый файл появляется в наборе и на этой странице сам.

1. Возьмите глиф в Material Symbols, стиль Outlined, — так он совпадёт по толщине с остальными.
2. Назовите файл по-русски, по смыслу: архив.svg.
3. Оставьте у <svg> атрибут viewBox: по нему рисунок вписывается в строку. У глифов Material это 0 -960 960 960, но годится любой.
4. Не задавайте заливку контуру — её даёт fill="currentColor" самой иконки.
5. Запишите комментарием исходное имя и лицензию, как в соседних файлах.

Комментарии, <title> и служебные элементы редактора кит при чтении отбрасывает, в страницу уходит только рисунок. Файл без <svg>, без viewBox или пустой роняет запуск с понятной ошибкой — значок не пропадёт со страницы молча. Тест ГрафикаКита сверяет каталог с набором в обе стороны.

Значки провайдеров#

Фирменных знаков в Material Symbols нет, поэтому значки брендов — официальные логотипы из набора Simple Icons (дев-сборка 8; прежде — рисунки Phosphor). Набор распространяется по лицензии CC0-1.0, но сами логотипы — товарные знаки их владельцев и используются по их правилам: значок называет сервис, через который человек входит или куда уходит событие, и не перекрашивается и не искажается. Цвет — цвет бренда из данных набора; тёмные логотипы (GitHub, Keycloak, Mattermost) в тёмной теме рисуются цветом текста — иначе их не видно на тёмной поверхности. Общий вход по ключу — глиф Material «key».

Список ключей файлов закрытый: authentik, discord, gitea, github, gitlab, google, key, keycloak, mattermost, okta, telegram. key среди них — служебный значок, а не бренд (дев-сборка 10): файл key.svg отдаётся тем же контрактом, что логотипы, но в перечень брендов Иконка.ИменаБрендов() и в раздел «Бренды» выбора значка не входит — для значка «ключ» есть глиф ключ. Имя бренд:key по-прежнему печатается, чтобы сохранённое раньше не роняло страницу; новое значение выбирайте глифом.

Значки лежат в каталоге src/статика/провайдеры по файлу на ключ, сетка 24 px, и отдаются файлами — для <img> на странице входа. Логотипов Microsoft, Slack и Яндекса в Simple Icons нет — их владельцы попросили убрать; свой файл такого значка инсталляция кладёт в свою статику.

В узлах холста бренд печатается иконкой с приставкой: Кит.Иконка("бренд:telegram") — инлайн-<svg> цветом бренда, стоящий один называет бренд скринридеру. То же имя принимает слово Иконка у кнопки, плашки и пункта меню и слово Значок у записи реестра — там логотип рядом с текстом декоративен. Неизвестный бренд останавливает сборку с перечнем известных: опечатка в коде видна сразу. Имя из чужих данных — конфигурации инсталляции, профиля, базы — проверяйте до печати по Иконка.ИменаБрендов() и Иконка.ИменаГлифов() и незнакомое сводите к пустому значку: иначе опечатка в настройке уронит страницу входа.

// адрес значка с отпечатком содержимого — для <img> на странице входа
Адрес = Активы.Адрес("telegram.svg");

Свой значок провайдера инсталляция кладёт в свою статику под тем же именем — он вытеснит китовый.

Выбор значка#

Когда значок выбирает человек — значок тега, провайдера входа, канала уведомлений, — кит даёт коллекцию на выбор: поле выбора значка, сетку глифов и брендов с поиском по имени. Значение поля — имя значка, ровно то, что потом принимает Кит.Иконка(Имя) и слово Иконка у плашки, кнопки и пункта меню. Ниже — выбор значка тега с зеркалом: плашка в образце меняет значок, пока выбираете, без сервера; сохранённый значок плашки печатает сервер.

Гайдлайны#

HTML = Набор.Кнопка().Отрисовать(Новый Структура("Подпись, Вариант, Иконка", "Настройки", "вторичная", "шестерёнка"))
	+ Набор.Кнопка().Отрисовать(Новый Структура("Подпись, Вариант, Иконка", "История", "вторичная", "история"));

HTML = "<button class=""button button--ghost"" type=""button"">⚙️ Настройки</button>"
	+ Набор.Кнопка().Отрисовать(Новый Структура("Подпись, Вариант, Иконка", "История", "вторичная", "история"));

HTML = "<p style=""margin:0;color:var(--md-sys-color-on-surface-variant)"">"
	+ Набор.Иконка().Отрисовать("часы") + " обновлён вчера</p>";

HTML = "<p style=""margin:0;color:var(--md-sys-color-on-surface-variant)"">"
	+ "<span style=""color:#ffeb3b"">" + Набор.Иконка().Отрисовать("часы") + "</span> обновлён вчера</p>";

HTML = "<p style=""margin:0"">" + Набор.Иконка().Отрисовать("замок") + " Доступ только участникам</p>";

HTML = "<p style=""margin:0""><span style=""font-size:40px"">" + Набор.Иконка().Отрисовать("замок")
	+ "</span> Доступ только участникам</p>";

Доступность#

• Иконка без подписи печатается с aria-hidden="true" и focusable="false": скринридер её пропускает, клавиатура на ней не останавливается.
• Иконка с подписью получает role="img" и <title> — это и доступное имя, и всплывающая подсказка.
• Кнопка из одной иконки берёт подпись в aria-label, и кит не соберёт её без подписи.
• Признак у имени в шапке объекта без подписи отвергается исключением.

Лицензии#

Глифы Material Symbols распространяются по лицензии Apache 2.0. Её текст лежит рядом с глифами, material-symbols-LICENSE.txt, и отдаётся по /static вместе с остальной статикой. Значки брендов — из набора Simple Icons по лицензии CC0-1.0, текст — simple-icons-LICENSE.txt в каталоге значков; логотипы остаются товарными знаками владельцев.

Модель#

Отрисовывает инлайновый <svg> иконки.

Параметры:
 Модель - Структура, Строка - имя иконки либо структура: Имя, Подпись (для скринридера;
          без неё иконка декоративна и скрыта), Класс. Дев-сборка 8: имя «бренд:<ключ>»
          (бренд:telegram, бренд:github…) — логотип бренда из значков провайдеров цветом
          бренда; тёмный логотип в тёмной теме — цветом текста.

Возвращаемое значение:
 Строка - фрагмент <svg> либо "" для неизвестной иконки. Неизвестный бренд останавливает
          сборку исключением с перечнем известных.

Значок из набора иконок. Слова: Подпись (для скринридера; без неё значок декоративен).
Дев-сборка 8: «бренд:<ключ>» — логотип бренда (telegram, github, gitlab, gitea, google,
authentik, keycloak, okta, discord, mattermost, key); стоящий один, он называет бренд.

Параметры:
 Модель - Строка, Структура - имя значка; Структура — прежний вид модели.

Возвращаемое значение:
 ЭлементЭкрана