Interface: MayHaveIcon

Expand

Тип для элементов UI, у которых иконка может быть опциональной.

Remarks

Использование:

• Когда иконка требуется, используйте HasIcon
• Когда иконка может быть или не быть, используйте MayHaveIcon

Примеры:

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

Examples

{
  id: 'button:save',
  type: 'button',
  title: 'Сохранить',
  icon: 'Save',           // Иконка присутствует
  iconType: 'standard'
}

{
  id: 'button:ok',
  type: 'button',
  title: 'ОК'
  // Иконка не указана
}

Extended by

• Button
• CustomRibbonGroup
• BaseContextMenuItem

Properties

icon?

readonly optional 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 — содержимое иконки