Пользовательские иконки

Библиотека iziToast позволяет создавать уведомления с высокой степенью кастомизации, включая возможность использования пользовательских иконок. Иконки являются важным элементом визуальной коммуникации: они помогают мгновенно идентифицировать тип уведомления и повышают удобство взаимодействия с интерфейсом.

Подключение иконок

По умолчанию iziToast использует встроенные иконки для типов уведомлений: success, error, warning, info. Однако любой элемент можно заменить на свой собственный HTML-код или изображение. Для этого используется опция icon.

Простейший пример замены стандартной иконки на кастомную:

iziToast.show({
    title: 'Успех',
    message: 'Данные успешно сохранены!',
    icon: '<i class="fas fa-check-circle"></i>',
    color: 'green'
});

Здесь вместо встроенной иконки вставляется тег <i> с классами FontAwesome. Таким образом, поддерживаются любые иконки из внешних библиотек или SVG.

Использование изображений

Иконкой может быть и изображение, загружаемое по URL. В этом случае достаточно передать тег <img>:

iziToast.show({
    title: 'Информация',
    message: 'Доступно новое обновление.',
    icon: '<img src="https://example.com/icons/info.png" width="24" height="24">',
    color: 'blue'
});

Важно задавать размеры изображения, чтобы оно корректно вписывалось в рамку уведомления. Для консистентного внешнего вида рекомендуется поддерживать одинаковый размер всех иконок.

Стилизация иконок

Иконки в iziToast можно стилизовать через CSS или встроенные атрибуты. Например, изменение цвета или анимации:

iziToast.show({
    title: 'Ошибка',
    message: 'Не удалось загрузить файл.',
    icon: '<i class="fas fa-exclamation-triangle custom-icon"></i>',
    color: 'red',
    timeout: 5000
});

И CSS:

.custom-icon {
    color: yellow;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

Так можно создать анимированные иконки, что делает уведомления более динамичными и заметными.

Иконки без уведомления

Опция icon позволяет даже полностью убрать иконку, если передать false:

iziToast.show({
    title: 'Напоминание',
    message: 'Событие начнётся через 10 минут.',
    icon: false,
    color: 'orange'
});

Это полезно для минималистичных уведомлений, где визуальная нагрузка должна быть минимальной.

Иконки для разных типов уведомлений

Можно задать разные иконки для типов уведомлений через глобальные настройки:

iziToast.settings({
    icon: 'custom', // указывает, что используется кастомная иконка
    icons: {
        success: '<i class="fas fa-smile"></i>',
        error: '<i class="fas fa-times-circle"></i>',
        info: '<i class="fas fa-info-circle"></i>',
        warning: '<i class="fas fa-exclamation-circle"></i>'
    }
});

Теперь при вызове iziToast.success(...) автоматически используется указанный кастомный символ.

Советы по пользовательским иконкам

  • Консистентность: использовать единый стиль и размер всех иконок.
  • Оптимизация: для веб-приложений предпочтительнее SVG или шрифтовые иконки, так как они масштабируемы и лёгкие по весу.
  • Цветовая схема: цвет иконки должен гармонировать с цветом уведомления (color), чтобы улучшить читаемость.
  • Анимации: умеренные анимации повышают вовлечённость, но чрезмерное движение отвлекает.

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

SVG обеспечивает высокое качество на любых разрешениях и полную гибкость:

iziToast.show({
    title: 'Успех',
    message: 'Файл загружен.',
    icon: `<svg width="24" height="24" viewBox="0 0 24 24">
               <path fill="green" d="M9 16.17l-3.5-3.5L4 14l5 5 12-12-1.41-1.42z"/>
           </svg>`,
    color: 'green'
});

SVG можно цветить через атрибут fill или через CSS, добавляя адаптивность к теме приложения.

Использование пользовательских иконок в iziToast открывает возможности для точной визуальной кастомизации уведомлений, позволяет интегрировать фирменные стили и создавать узнаваемый интерфейс без ограничений стандартного набора иконок.

Оглавление