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

Иконка помогает пользователям быстрее находить нужный элемент. Вы можете выбрать одну из встроенных иконок или загрузить свою собственную SVG-картинку.

Использование встроенной иконки

// Регистрация пункта меню с использованием встроенной иконки
editorApi.ui.contextMenu.addItems([
    {
        id: 'plugin1:my-button',      // Уникальный идентификатор кнопки
        title: 'Моя кнопка',          // Видимое название
        icon: 'Settings',             // Используем стандартную иконку настроек
    },
]);

Список всех встроенных в редактор иконок

Использование собственной SVG-иконки

// Регистрация пункта меню с собственной SVG-иконкой
editorApi.ui.contextMenu.addItems([
    {
        id: 'plugin1:my-button',     // Уникальный идентификатор кнопки
        title: 'Моя кнопка',         // Видимое название
        icon: `<svg fill="none" viewBox="0 0 24 24">
            <!-- код вашей иконки -->
        </svg>`,                     // Используем собственную SVG-иконку
        iconType: 'svg',             // Сообщаем, что это именно SVG
    },
]);

Важно

Чтобы иконка нормально смотрелась в редакторе наряду со встроенными иконками:

• примените viewBox="0 0 24 24"
• проверьте, как она смотрится в редакторе и откорректируйте ее цвета / положение