Emoji

Компонент выводит emoji цветным системным шрифтом и согласует его размер с типографической шкалой: символ стоит в строке текста ровно и не сдвигает её высоту. Берите его для эмоциональных акцентов в тексте; статус и действия передавайте иконками и словами.

Пример

<p class="m-0"><span class="sf-emoji" role="img" aria-label="Праздник">🎉</span> Релиз готов к публикации.</p>

Разметка

Минимальную разметку показывает пример выше: <span class="sf-emoji"> с символом внутри.

• Без класса размера emoji берёт ступень 1, как обычный текст.
• Смысловому emoji задайте role="img" и aria-label, декоративному — aria-hidden="true" (см. «Доступность»).

Варианты

Размер

Размеры 1/3, 1/2, 1, 2 и 3 совпадают со ступенями текста: выбирайте ту же ступень, что у строки, где стоит символ, или крупнее для отдельного акцента.

<div class="flex flex-wrap gap-4 items-end">
  <div class="flex flex-col gap-1 items-center">
    <span class="sf-emoji sf-emoji--size-1/3" role="img" aria-label="Идея">💡</span>
    <code class="text-1/2 color-on-surface-variant">sf-emoji--size-1/3</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <span class="sf-emoji sf-emoji--size-1/2" role="img" aria-label="Идея">💡</span>
    <code class="text-1/2 color-on-surface-variant">sf-emoji--size-1/2</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <span class="sf-emoji sf-emoji--size-1" role="img" aria-label="Идея">💡</span>
    <code class="text-1/2 color-on-surface-variant">sf-emoji--size-1</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <span class="sf-emoji sf-emoji--size-2" role="img" aria-label="Идея">💡</span>
    <code class="text-1/2 color-on-surface-variant">sf-emoji--size-2</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <span class="sf-emoji sf-emoji--size-3" role="img" aria-label="Идея">💡</span>
    <code class="text-1/2 color-on-surface-variant">sf-emoji--size-3</code>
  </div>
</div>

Доступность

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

<div class="flex flex-col gap-1">
  <p class="m-0"><span class="sf-emoji" role="img" aria-label="Праздник">🎉</span> Смысловой символ: экранный диктор читает «Праздник».</p>
  <p class="m-0"><span class="sf-emoji" aria-hidden="true">✨</span> Декоративный символ скрыт от экранного диктора.</p>
</div>

JavaScript

Разметка sf-emoji работает без скрипта. Компонент регистрирует класс Emoji, который собирает элемент из параметров: emoji — сам символ, name — короткий код вместо символа, label или title — доступное имя, decorative — скрыть символ от вспомогательных технологий, size. Без decorative элемент получает role="img" и aria-label. Событий компонент не отправляет.

skin задаёт оттенок кожи: 1–5 или light, medium-light, medium, medium-dark, dark. Оттенок — это часть символа, а не стиль: класс дописывает модификатор после эмодзи, который его принимает (руки, люди), и оставляет остальные символы как есть.

SF.Loader появляется к событию sf-loader-init на window; SF.Loader.ready('Emoji', callback) передаёт класс, когда он зарегистрирован.

const whenLoader = (run) => (window.SF?.Loader ? run() : window.addEventListener('sf-loader-init', run, {once: true}));

whenLoader(() => SF.Loader.ready('Emoji', (Emoji) => {
  const emoji = new Emoji({param: {emoji: '🎉', label: 'Праздник', size: '2'}});
  const wave = new Emoji({param: {emoji: '👋', label: 'Привет', skin: 'medium'}});
  document.querySelector('#release-note').prepend(emoji.render(), wave.render());
}));

Классы

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Переменные

Компонент читает свои переменные, а модификаторы задают им значения; таблица показывает, из чего складывается вид. Переменные компонента — его внутренняя проводка, а не поверхность настройки: их имена и устройство могут меняться. Вид проекта меняют общие токены, а глубокий вид Smart-компонента — его шаблон (см. Переменные компонента). Значение по умолчанию — из базового правила блока (.sf-emoji); переменную без него задают только модификаторы.

См. также

• Иконки