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

IziToast предоставляет гибкую систему для добавления иконок к уведомлениям, что позволяет визуально выделять важные сообщения и улучшать восприятие информации пользователем. Иконки могут быть как стандартными, встроенными в библиотеку, так и пользовательскими, включая SVG и изображения формата PNG или JPG.

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

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

iziToast.success({
    title: 'Успех',
    message: 'Операция выполнена успешно',
    icon: 'ico-check'
});

iziToast.error({
    title: 'Ошибка',
    message: 'Произошла ошибка при сохранении данных',
    icon: 'ico-cross'
});

Ключевые моменты:

  • Параметр icon принимает строку, соответствующую классу иконки.
  • Библиотека использует встроенные иконки, которые уже включены в CSS iziToast.
  • Можно управлять видимостью иконки через параметр iconUrl или отключить её полностью через icon: false.

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

Для добавления собственной иконки используется параметр iconUrl. Он принимает путь к изображению или SVG:

iziToast.show({
    title: 'Внимание',
    message: 'Пользователь не авторизован',
    iconUrl: '/images/warning-icon.svg'
});

Особенности кастомных иконок:

  • Поддерживаются форматы PNG, JPG, SVG.
  • Рекомендуется использовать изображения с прозрачным фоном для гармоничного отображения на любом фоне уведомления.
  • Размеры иконки можно регулировать через CSS:
.iziToast img {
    width: 24px;
    height: 24px;
}

Управление позицией иконки

Иконка по умолчанию располагается слева от текста уведомления, но при необходимости её можно сместить с помощью CSS или задать отдельный контейнер для изображения. Параметр icon и iconUrl поддерживают кастомные классы:

iziToast.show({
    title: 'Информация',
    message: 'Новая версия доступна',
    iconUrl: '/images/info-icon.png',
    iconClass: 'custom-icon-class'
});
.custom-icon-class {
    margin-right: 10px;
    width: 28px;
    height: 28px;
}

Отключение иконок

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

iziToast.show({
    title: 'Просто уведомление',
    message: 'Без иконки',
    icon: false
});

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

Анимация иконок

IziToast поддерживает анимацию появления иконок вместе с уведомлением. По умолчанию иконка наследует анимацию контейнера, но можно задать отдельные эффекты через CSS:

.iziToast img {
    transition: transform 0.3s ease-in-out;
}

.iziToast.show .iziToast-img {
    transform: scale(1.2);
}

Динамическая замена иконок

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

let toast = iziToast.show({
    title: 'Загрузка',
    message: 'Идет процесс',
    icon: 'ico-spin'
});

setTimeout(() => {
    toast.setIcon('/images/success-icon.png');
    toast.setMessage('Загрузка завершена');
}, 3000);

Итоговые рекомендации по иконкам

  • Использовать встроенные иконки для стандартных типов уведомлений (success, error, info, warning).
  • Для фирменного дизайна или уникальных уведомлений применять iconUrl.
  • Регулировать размер и позицию иконки через CSS для точного соответствия макету.
  • Включать или отключать иконку в зависимости от важности и визуального акцента сообщения.
  • При динамических уведомлениях использовать методы обновления иконки для улучшения UX.

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

Оглавление