Иконки в кнопках

Кнопки (QBtn) в библиотеке Quasar поддерживают встроенную работу с иконками, что позволяет значительно улучшить визуальную выразительность интерфейса и повысить удобство взаимодействия. Иконки могут использоваться как самостоятельно, так и в сочетании с текстом.

Базовое добавление иконки

Иконка добавляется через свойство icon. В качестве значения указывается имя иконки из подключённого набора (Material Icons, FontAwesome и др.).

<q-btn icon="home" />

В этом случае кнопка будет отображать только иконку без текста.

Иконка и текст в одной кнопке

При одновременном использовании текста и иконки, иконка по умолчанию располагается слева:

<q-btn label="Главная" icon="home" />

Результат:

  • Иконка слева
  • Текст справа

Позиционирование иконки

Для управления расположением используется свойство icon-right.

<q-btn label="Далее" icon-right="arrow_forward" />

Особенности:

  • icon — иконка слева
  • icon-right — иконка справа

Можно комбинировать обе стороны:

<q-btn label="Обновить" icon="refresh" icon-right="check" />

Использование только иконки (кнопка-иконка)

Для создания компактных кнопок без текста применяется режим “icon-only”:

<q-btn icon="favorite" round color="red" />

Ключевые свойства:

  • round — делает кнопку круглой
  • отсутствие label — отображается только иконка

Плотные и минималистичные кнопки

Для уменьшения размеров:

<q-btn icon="menu" flat dense />

Комбинации:

  • flat — убирает фон
  • dense — уменьшает отступы

Используется в тулбарах и навигации.

Цвет иконки

Цвет иконки наследуется от кнопки, но может быть переопределён:

<q-btn icon="warning" color="yellow" text-color="black" />

Разделение:

  • color — фон
  • text-color — цвет иконки и текста

Размер иконки

Размер регулируется через свойство size:

<q-btn icon="search" size="lg" />

Варианты:

  • xs, sm, md, lg, xl
  • кастомные значения (16px, 2rem)

Кастомные иконки и наборы

Quasar поддерживает несколько икон-паков:

  • Material Icons (по умолчанию)
  • FontAwesome
  • Ionicons
  • SVG-иконки

Пример с FontAwesome:

<q-btn icon="fa-solid fa-user" />

Важно:

  • нужный набор должен быть подключён в конфигурации проекта (quasar.config.js)

SVG-иконки

Можно использовать кастомные SVG:

<q-btn>
  <q-icon name="img:/icons/custom.svg" />
</q-btn>

Особенности:

  • img: указывает на внешний файл
  • можно вставлять inline SVG

Иконки с состояниями

Состояния кнопки могут менять иконку динамически:

<q-btn :icon="isPlaying ? 'pause' : 'play_arrow'" />

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

  • переключатели
  • медиаплееры
  • интерактивные элементы

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

Quasar поддерживает CSS-анимации и классы:

<q-btn icon="refresh" class="rotate-animation" />

Пример CSS:

.rotate-animation {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

Иконки внутри кнопок с загрузкой

При использовании состояния загрузки (loading) можно задать кастомную иконку:

<q-btn loading icon="cloud_upload" />

Или через слот:

<q-btn :loading="true">
  <template v-slot:loading>
    <q-spinner-dots />
  </template>
</q-btn>

Доступность (Accessibility)

При использовании кнопок только с иконками важно добавлять описание:

<q-btn icon="delete" aria-label="Удалить" />

Это необходимо для:

  • скринридеров
  • соответствия стандартам доступности

Комбинации с другими компонентами

Иконки в кнопках часто используются совместно с:

  • QToolbar
  • QInput (внутренние кнопки)
  • QCard
  • QDialog

Пример в тулбаре:

<q-toolbar>
  <q-btn flat icon="menu" />
  <q-toolbar-title>Приложение</q-toolbar-title>
  <q-btn flat icon="search" />
</q-toolbar>

Практические паттерны

Кнопка действия (FAB):

<q-btn icon="add" fab color="primary" />

Кнопка удаления:

<q-btn icon="delete" color="negative" />

Кнопка с подтверждением:

<q-btn icon="check" color="positive" />

Производительность и оптимизация

  • Использование только необходимых икон-паков снижает размер бандла
  • SVG-иконки предпочтительны для кастомной графики
  • Кэширование иконок ускоряет рендеринг

Распространённые ошибки

1. Иконка не отображается

  • не подключён icon-pack
  • неверное имя иконки

2. Неправильное позиционирование

  • одновременно используются icon и icon-right без понимания порядка

3. Нарушение доступности

  • отсутствует aria-label у кнопок без текста

Внутренняя архитектура

Компонент QBtn использует QIcon внутри себя. Это означает:

  • все свойства иконок проходят через QIcon
  • можно использовать те же имена и форматы
  • поддерживается lazy rendering

Расширенные возможности

Слот для полной кастомизации:

<q-btn>
  <q-icon name="star" color="yellow" />
  <span class="q-ml-sm">Избранное</span>
</q-btn>

Позволяет:

  • управлять разметкой
  • добавлять несколько иконок
  • комбинировать с любыми элементами

Рекомендации по дизайну

  • Иконка должна дополнять текст, а не дублировать его
  • Использование универсальных символов улучшает UX
  • Избегать перегруженности кнопок несколькими иконками
  • Поддерживать единый стиль (один icon-pack)

Сравнение подходов

Подход Когда использовать
icon стандартные кнопки
icon-right действия “вперёд”
icon-only компактные интерфейсы
слот сложные кастомные решения
SVG уникальный дизайн

Интеграция с логикой приложения

Иконки часто отражают состояние:

<q-btn :icon="isFavorite ? 'favorite' : 'favorite_border'" />

Связь:

  • UI напрямую зависит от состояния
  • улучшает реактивность интерфейса

Итоговая структура использования

  1. Выбор икон-пака
  2. Определение роли кнопки
  3. Выбор расположения (icon / icon-right)
  4. Настройка внешнего вида
  5. Добавление логики и состояний

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

Оглавление