Icons

<sf-icon> выводит один символ Material Symbols по имени и сообщает Loader, какие знаки шрифта загрузить. Внешний вид — размер, начертание, заливка, толщина — задаётся атрибутами на общей шкале Framework. Элемент строится на классах компонента Иконки. Для иконки, которую нажимают, берите Icon Buttons.

Пример

<div class="flex flex-wrap gap-4 items-cross-center">
  <sf-icon icon="home"></sf-icon>
  <sf-icon icon="favorite" filled></sf-icon>
  <sf-icon icon="settings" type="rounded" size="2"></sf-icon>
  <sf-icon icon="bolt" weight="700" size="3"></sf-icon>
  <sf-icon icon="warning" label="Внимание" size="2"></sf-icon>
</div>

Применение

Имя и загрузка

icon — имя символа из набора Material Symbols, например home или settings. Loader отслеживает каждый <sf-icon> и загружает знаки шрифта, нужные странице, в том числе после смены icon. Пока знак не загружен, иконка сжата до нуля, и имя символа не мелькает текстом. Атрибут loaded компонент ставит сам, когда знак готов; задавать его в разметке не нужно.

Размер

size выбирает ступень шкалы размеров иконок: 1/4, 1/3, 1/2, 1 — 7. Без size иконка получает размер ступени 3. Рядом с подписью берите ступень, которая совпадает с высотой строки текста.

Начертание и оси шрифта

• type — начертание: outlined, rounded или sharp. Без него действует начертание проекта из SF_BOOT_CONFIG.icons.type, а если оно не задано — outlined. Держите одно начертание во всём интерфейсе.
• filled включает заливку — например, для выбранного состояния.
• weight — толщина линии от 100 до 700 с шагом 100, по умолчанию 400.
• grade (от -50 до 200) и optical-size (от 20 до 48) — тонкая настройка осей шрифта; значения вне диапазона приводятся к границе.

<sf-icon icon="star" filled weight="600" size="2"></sf-icon>

Доступность

• Без label иконка декоративна и скрыта от экранного диктора (aria-hidden="true"). Так и нужно, когда смысл передаёт текст рядом или имя кнопки, в которой стоит иконка: не задавайте label иконке внутри уже названной кнопки.
• Самостоятельной иконке, которая сообщает смысл, задайте label: элемент получит role="img" и это доступное имя.
• Иконка не получает фокус и не реагирует на клавиатуру. Действие делайте кнопкой.

Справочник API

Раздел собран из манифеста компонента выпуска ui-106d5901f8c3 и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест.

Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: search-placeholder — searchPlaceholder. Свойство атрибута template называется templateName.

Атрибуты

• icon — string, по умолчанию пусто.
• loaded — boolean, по умолчанию false.
• filled — boolean, по умолчанию false.
• weight — number, по умолчанию 400.
• size — string, по умолчанию пусто, значения: пусто, 1/4, 1/3, 1/2, 1, 2, 3, 4, 5, 6, 7.
• type — string, по умолчанию пусто, значения: пусто, outlined, rounded, sharp, shape.
• grade — number, по умолчанию 0, значения: от -50; до 200.
• optical-size — number, по умолчанию 24, значения: от 20; до 48.
• label — string, по умолчанию пусто.

Методы

Публичных методов нет.

События

Своих событий нет; общие события базового элемента перечислены в главе Жизненный цикл → Этапы.

Доступность

• Роль: img, если задан label; скрыт, если декоративный.
• Доступное имя: рекомендуется.
• Фокус: Иконка не интерактивна и никогда не попадает в порядок табуляции. Задавайте имя содержащему её элементу управления.

Минимальная разметка

<sf-icon icon="home"></sf-icon>

Источник

• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/smart/icons
• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/rule/rule.json#name=cl-icons

См. также

• Иконки — иконки на классах.
• Icon Buttons — кнопка из одной иконки.