QIcon система иконок

QIcon — это компонент библиотеки Quasar для работы с иконками в интерфейсе Vue.js приложений. Он обеспечивает единообразное использование иконок, упрощает настройку размеров, цветов и интеграцию с различными библиотеками иконок, включая Material Icons, FontAwesome, Ionicons и другие.

Подключение и настройка иконок

Quasar позволяет использовать несколько источников иконок одновременно. Настройка производится через файл конфигурации quasar.config.js в разделе framework: { iconSet }:

import '@quasar/extras/material-icons/material-icons.css'
import '@quasar/extras/fontawesome-v6/fontawesome-v6.css'

export default {
  framework: {
    iconSet: 'material-icons', // или 'fontawesome-v6'
  }
}

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

Основные свойства QIcon

  • name – имя иконки, например "home" для Material Icons или "fa-solid fa-user" для FontAwesome.
  • size – размер иконки. Поддерживаются стандартные CSS единицы (px, em, rem) и предопределённые значения Quasar (xs, sm, md, lg, xl):
<q-icon name="home" size="2em" />
<q-icon name="fa-solid fa-user" size="lg" />
  • color – цвет иконки. Можно использовать предопределённые цвета Quasar (primary, secondary, accent, negative, positive) или стандартные CSS-цвета:
<q-icon name="home" color="primary" />
<q-icon name="fa-solid fa-user" color="#ff5722" />
  • slot – позволяет использовать QIcon внутри других компонентов, например в кнопках, списках или карточках, создавая удобные визуальные сочетания.

Использование QIcon внутри компонентов

В кнопках:

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

В этом примере иконка автоматически помещается слева от текста, без необходимости ручного добавления <q-icon>.

В списках:

<q-list>
  <q-item>
    <q-item-section avatar>
      <q-icon name="fa-solid fa-user" />
    </q-item-section>
    <q-item-section>
      Пользователь
    </q-item-section>
  </q-item>
</q-list>

Здесь QIcon используется для аватара, при этом сохраняются все возможности управления размером и цветом.

Динамическая подстановка иконок

QIcon позволяет задавать имя иконки динамически через реактивные переменные:

<q-icon :name="currentIcon" :color="iconColor" />
data() {
  return {
    currentIcon: 'home',
    iconColor: 'primary'
  }
}

Смена значения currentIcon автоматически обновит отображаемую иконку без перерисовки всего компонента.

Стилизация и анимации

QIcon поддерживает классы и CSS-псевдоклассы для расширенной стилизации:

<q-icon name="home" class="q-mr-sm rotate-icon" />
.rotate-icon {
  transition: transform 0.3s;
}

.rotate-icon:hover {
  transform: rotate(45deg);
}

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

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

Помимо встроенных наборов, QIcon поддерживает кастомные SVG-иконки:

<q-icon>
  <svg viewBox="0 0 24 24">
    <path d="M12 2L15 8H9L12 2Z" fill="currentColor"/>
  </svg>
</q-icon>

В этом случае QIcon выступает как обёртка, обеспечивая единый интерфейс для управления размером, цветом и интеграции с другими компонентами Quasar.

Поддержка RTL и LTR

QIcon автоматически учитывает направление текста при использовании в интерфейсах с поддержкой RTL (Right-To-Left). Например, стрелки в компонентах будут корректно отражать направление, если в проекте активирован RTL.

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

  • Использование предопределённых иконок из наборов сокращает количество загружаемых ресурсов.
  • Для больших проектов рекомендуется импортировать только используемые иконки, чтобы уменьшить вес бандла.
  • Кастомные SVG можно хранить локально и подключать через <q-icon> для повторного использования.

Совместимость с Quasar UI-компонентами

QIcon тесно интегрирован с большинством компонентов Quasar, включая:

  • QBtn – кнопки с иконками;
  • QChip – иконки внутри чипов;
  • QTab и QRouteTab – иконки в табах;
  • QItem – аватары и графические метки;
  • QAction – панели действий с иконками.

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

Хотите, я могу подготовить отдельный подробный раздел по динамическому переключению иконок с анимацией и реактивным управлением состоянием в QIcon? Это часто встречается в крупных интерфейсах и требует грамотного подхода.

Оглавление