Параметр avatar и иконки

В библиотеке Toastify параметр avatar отвечает за отображение изображения или иконки в уведомлении. Он позволяет визуально выделять уведомления, добавляя контекст или узнаваемость бренда. avatar может принимать строку с URL изображения либо элемент HTML, что открывает возможности для интеграции кастомных иконок.

Toastify({
    text: "Успешная операция",
    avatar: "https://example.com/success-icon.png",
    duration: 3000,
    gravity: "top",
    position: "right",
}).showToast();

В этом примере используется URL изображения. Уведомление будет содержать иконку слева от текста, придавая уведомлению визуальный акцент.

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

Помимо внешних URL, можно использовать локальные файлы или SVG-элементы. SVG особенно удобны для масштабируемых иконок без потери качества.

const svgIcon = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" 
xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L15 8H9L12 2Z" fill="#4CAF50"/>
</svg>`;

Toastify({
    text: "Новая иконка",
    avatar: svgIcon,
    duration: 4000,
    gravity: "bottom",
    position: "left",
}).showToast();

SVG можно стилизовать с помощью CSS или менять цвет через атрибут fill. Это даёт гибкость при динамическом изменении уведомлений.

Размер и позиционирование avatar

По умолчанию Toastify задаёт фиксированный размер аватара (обычно 40x40 пикселей), однако его можно изменить через CSS:

.toastify-avatar img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
  • width и height контролируют размер иконки.
  • border-radius: 50% делает аватар круглым, что подходит для пользовательских фото или стандартных иконок.

Для корректного позиционирования текста относительно аватара используется flex-структура, встроенная в Toastify. Аватар располагается слева, а текст автоматически адаптируется по высоте уведомления.

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

avatar может быть не только изображением, но и любым HTML-элементом, например, иконкой из библиотеки FontAwesome или кастомным компонентом.

const customIcon = document.createElement("span");
customIcon.innerHTML = "<i class='fas fa-check-circle'></i>";

Toastify({
    text: "Операция выполнена",
    avatar: customIcon,
    duration: 3500,
}).showToast();

Преимущество такого подхода — возможность динамически изменять иконки, использовать анимацию и настраивать их через CSS-классы.

Комбинирование с другими параметрами Toastify

Аватар прекрасно сочетается с остальными настройками:

  • gravity и position — определяют, где уведомление с аватаром появится на экране.
  • style — позволяет задавать фон, рамку или тень уведомления.
  • className — добавление собственного класса позволяет применять уникальные стили для разных типов уведомлений (успех, ошибка, предупреждение).

Пример комбинирования:

Toastify({
    text: "Ошибка при загрузке",
    avatar: "https://example.com/error-icon.png",
    duration: 5000,
    gravity: "top",
    position: "right",
    className: "error-toast",
    style: {
        background: "#ff4d4f",
        color: "#fff"
    }
}).showToast();

Динамическая смена аватара

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

function showNotification(status) {
    const icon = status === "success" 
        ? "https://example.com/success.png" 
        : "https://example.com/error.png";

    Toastify({
        text: `Статус: ${status}`,
        avatar: icon,
        duration: 3000,
    }).showToast();
}

Это упрощает создание универсальных уведомлений с визуальной дифференциацией по типу события.

Советы по использованию аватаров

  1. Оптимизация изображений: использовать форматы WebP или SVG для минимизации загрузки и ускорения отображения.
  2. Согласованность дизайна: аватар должен сочетаться с общей цветовой схемой уведомлений.
  3. Адаптивность: проверять отображение на мобильных устройствах, особенно если аватар большой или SVG сложный.
  4. Минимизация текста: длинные тексты в уведомлениях с аватаром могут визуально перегружать интерфейс.

Использование avatar позволяет улучшить UX, делая уведомления более информативными и узнаваемыми, а также интегрировать визуальные элементы бренда или системные иконки прямо в сообщения Toastify.

Оглавление