Перейти к основному содержимому
Версия: 26.1.0 (в разработке)

Interface: HasIcon

Expand

Интерфейс для элементов UI, которые поддерживают отображение иконок.

Иконки помогают пользователям быстро распознавать действия и функции. Поддерживаются встроенные иконки редактора и пользовательские SVG иконки.

Remarks​

Два типа иконок:

  • Standard — встроенные иконки редактора (быстро, не нужно код SVG)
  • SVG — пользовательские иконки в формате SVG (гибко, полный контроль)

Где используются:

  • Кнопки на ленте (слева от текста)
  • Пункты меню (слева от названия)
  • Вкладки (на вкладке)
  • Элементы списков
  • Группы элементов

Размеры и стили:

  • Размер регулируется редактором в зависимости от контекста
  • Цвет наследуется из темы приложения
  • Для SVG рекомендуется использовать viewBox="0 0 24 24"

Extended by​

Properties​

icon​

readonly icon: string

Название встроенной иконки или SVG код пользовательской иконки.

Remarks​

Если iconType === 'standard':

  • Должно быть названием встроенной иконки редактора
  • Примеры: 'Save', 'Delete', 'Settings', 'Help', 'Search', 'Download', 'Upload'
  • Полный список доступных иконок см. в документации редактора
  • Название чувствительно к регистру

Если iconType === 'svg':

  • Должно содержать валидный SVG код
  • Должен быть корректно оформлен XML
  • Может содержать только безопасные SVG элементы
  • Рекомендуется использовать viewBox для масштабируемости

Examples​

{
  icon: 'Save',
  iconType: 'standard'  // или не указывать, это значение по умолчанию
}
{
  icon: '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">' +
        '<circle cx="12" cy="12" r="10" fill="currentColor"/>' +
        '</svg>',
  iconType: 'svg'
}
const customIconSvg = `
  <svg viewBox="0 0 24 24">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"
          fill="currentColor"/>
  </svg>
`;

{
  icon: customIconSvg,
  iconType: 'svg'
}

See​

iconType — тип иконки (standard или svg)

iconType?​

readonly optional iconType: "standard" | "svg"

Тип иконки, определяющий как интерпретировать поле icon.

Remarks​

'standard' — встроенная иконка редактора:

  • Быстрая загрузка (уже в памяти)
  • Соответствует стилю редактора
  • Автоматически масштабируется и окрашивается
  • Поддерживает темы (светлая/тёмная)
  • Ограниченный выбор (только встроенные иконки)

'svg' — пользовательская SVG иконка:

  • Полная гибкость в дизайне
  • Можно использовать любую иконку
  • Меньше файлов (встроены в код)
  • Требует корректного SVG кода
  • Поддерживает CSS свойство currentColor для окраски

Default​

'standard'

Example​

Встроенная иконка (по умолчанию)

{
  icon: 'Settings'
  // iconType: 'standard' используется по умолчанию
}

SVG иконка

{
  icon: '<svg>...</svg>',
  iconType: 'svg'
}

Рекомендуемая SVG структура

{
  icon: `
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <!-- viewBox позволяет масштабировать без потери качества -->
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"
            fill="currentColor" />
      <!-- currentColor наследует цвет из контекста -->
    </svg>
  `,
  iconType: 'svg'
}

See​

icon — содержимое иконки