Интеграция с Material Icons

Quasar предоставляет встроенную поддержку различных иконечных библиотек, включая Material Icons. Для использования Material Icons необходимо убедиться, что в конфигурации проекта указана соответствующая иконечная библиотека.

В quasar.config.js в разделе framework задается свойство iconSet:

framework: {
  iconSet: 'material-icons', // Использование Material Icons
}

Если проект создается с нуля через CLI, можно сразу выбрать Material Icons при выборе иконечной библиотеки.

Импорт и регистрация

Quasar автоматически подгружает Material Icons из CDN, если указано соответствующее имя в iconSet. Однако для оффлайн-проектов или кастомных сборок рекомендуется установить пакет через npm:

npm install material-icons

После этого в main.js можно импортировать стили:

import 'material-icons/iconfont/material-icons.css'

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

Quasar предоставляет компонент QIcon для отображения иконок. Ключевые моменты использования Material Icons:

<template>
  <q-icon name="home" />
  <q-icon name="favorite" color="red" size="32px" />
  <q-icon name="menu" :size="24" />
</template>
  • name — имя иконки, соответствующее Material Icons.
  • color — цвет иконки, можно использовать стандартные CSS-цвета или переменные Quasar.
  • size — размер иконки, поддерживаются числовые значения в пикселях и строковые ('2em').

Material Icons поддерживают также различные стили отображения: outlined, round, sharp, two-tone. Чтобы использовать эти стили, нужно указать префикс в имени:

<q-icon name="outlined/home" />
<q-icon name="round/favorite" />
<q-icon name="sharp/menu" />
<q-icon name="two-tone/star" />

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

Компоненты QBtn и QToolbar полностью интегрированы с QIcon. Примеры:

<q-btn icon="home" label="Главная" color="primary" />
<q-toolbar>
  <q-btn flat icon="menu" @click="toggleDrawer" />
</q-toolbar>
  • Иконка задается через свойство icon.
  • Можно комбинировать иконку с текстовой меткой через label.
  • Цвет и размер наследуются от родительского компонента или могут задаваться индивидуально.

Кастомизация Material Icons

Для кастомных стилей Material Icons можно использовать классы:

<q-icon name="home" class="text-green text-h6" />
  • text-green — цвет, определенный в Quasar.
  • text-h6 — размер шрифта, использующий стандартные размеры заголовков.

Можно комбинировать несколько классов для управления цветом, размером и эффектами, например анимацией или трансформацией:

<q-icon name="refresh" class="spin" size="36px" />

Здесь класс spin можно определить в глобальных стилях или scoped CSS:

.spin {
  animation: spin 2s linear infinite;
}

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

Оптимизация загрузки

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

  1. Tree-shaking через импорт отдельных файлов Material Icons.
  2. CDN с выборочной загрузкой только нужных стилей (outlined, round и т. д.).
  3. SVG-иконки: Quasar позволяет использовать QIcon с svg через свойство src:
<q-icon src="statics/icons/custom-home.svg" />

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

Примеры сложной интеграции

Комбинирование Material Icons с состояниями компонентов:

<q-btn 
  :icon="liked ? 'favorite' : 'favorite_border'" 
  color="red" 
  @click="liked = !liked" 
/>
  • Динамическая смена иконки на основе состояния Vue.
  • Иконка автоматически обновляется при изменении переменной liked.

Для меню можно использовать иконки для визуализации пунктов:

<q-list>
  <q-item clickable v-for="item in menuItems" :key="item.label">
    <q-item-section avatar>
      <q-icon :name="item.icon" />
    </q-item-section>
    <q-item-section>
      {{ item.label }}
    </q-item-section>
  </q-item>
</q-list>

Такой подход упрощает управление интерфейсом и поддерживает единый стиль с Material Icons.

Итоговые рекомендации по работе с Material Icons в Quasar

  • Выбирать нужный стиль (outlined, round, sharp, two-tone) сразу при проектировании интерфейса.
  • Использовать динамическую привязку иконок через Vue-переменные для интерактивных компонентов.
  • Оптимизировать загрузку библиотеки для уменьшения размера финальной сборки.
  • Комбинировать с CSS-классами Quasar для кастомизации цвета, размера и анимации.
  • При необходимости интегрировать SVG-иконки для полного контроля над внешним видом.

Эти подходы обеспечивают гибкую и эффективную работу с Material Icons внутри Quasar, сохраняя производительность и визуальную согласованность интерфейса.

Оглавление