Перейти к основному содержимому
Версия: Next

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​

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