Иконки и splash screens

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

Подключение наборов иконок

По умолчанию Quasar поддерживает несколько популярных наборов:

  • Material Icons
  • Material Symbols
  • Font Awesome
  • Ionicons
  • Eva Icons

Выбор набора задаётся в конфигурации проекта (quasar.config.js):

framework: {
  iconSet: 'material-icons'
}

Дополнительно можно подключать собственные SVG или сторонние библиотеки.

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

Базовый синтаксис:

<q-icon name="home" />

Параметр name зависит от выбранного набора иконок. Например:

<q-icon name="mdi-account" /> <!-- Material Design Icons -->
<q-icon name="fa-solid fa-user" /> <!-- Font Awesome -->

Размер и цвет

<q-icon name="home" size="32px" color="primary" />

Ключевые параметры:

  • size — размер (px, em, rem)
  • color — цвет из палитры Quasar

Встроенные иконки в компонентах

Многие компоненты Quasar уже поддерживают иконки:

<q-btn icon="add" label="Добавить" />
<q-input filled v-model="text" prefix-icon="search" />

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

  • префиксы (prefix)
  • суффиксы (suffix)
  • отдельные элементы управления

Пользовательские SVG-иконки

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

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

Или через inline SVG:

<q-icon>
  <svg viewBox="0 0 24 24">
    <path d="..." />
  </svg>
</q-icon>

Переопределение иконок по умолчанию

Многие внутренние иконки компонентов можно заменить:

framework: {
  config: {
    brand: { ... },
    iconSet: {
      name: 'material-icons',
      arrow: 'chevron_right'
    }
  }
}

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

Splash Screen в Quasar

Splash Screen — это экран загрузки, отображаемый до полной инициализации приложения. Он особенно важен для SPA и мобильных приложений, создавая ощущение скорости и завершённости.

Назначение splash screen

Основные функции:

  • скрытие задержек загрузки
  • отображение бренда
  • улучшение UX при старте приложения

Настройка Splash Screen

В SPA (режим по умолчанию)

Splash Screen реализуется через HTML-шаблон (index.html):

<div id="q-app">
  <div class="splash-screen">
    <img src="logo.png" />
  </div>
</div>

CSS:

.splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

После загрузки Vue-приложения splash screen удаляется автоматически.

Splash Screen в режиме PWA

Для PWA используется специальный конфиг:

pwa: {
  manifest: {
    icons: [
      {
        src: 'icons/icon-192x192.png',
        sizes: '192x192',
        type: 'image/png'
      }
    ]
  }
}

Также задаются параметры:

  • background_color
  • theme_color

Это влияет на splash screen при запуске с домашнего экрана.

Splash Screen в мобильных приложениях (Cordova / Capacitor)

Генерация splash screen

Quasar CLI предоставляет автоматическую генерацию:

quasar icon-gen

Эта команда создаёт:

  • иконки приложения
  • splash screen для разных платформ

Конфигурация в Capacitor

Файл capacitor.config.json:

{
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 3000,
      "backgroundColor": "#ffffff",
      "showSpinner": false
    }
  }
}

Управление splash screen

Программное скрытие:

import { SplashScreen } from '@capacitor/splash-screen'

SplashScreen.hide()

Splash Screen в Electron

В Electron splash screen реализуется через preload-окно:

const splash = new BrowserWindow({
  width: 400,
  height: 300,
  transparent: true,
  frame: false
})

После загрузки основного окна splash закрывается.

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

Иконки:

  • единый стиль (не смешивать наборы)
  • минимализм и читаемость
  • соответствие платформенным стандартам

Splash Screen:

  • простота (логотип + фон)
  • минимальное время отображения
  • соответствие бренду

Оптимизация

  • использовать SVG вместо PNG для иконок
  • минимизировать размер изображений splash screen
  • применять lazy loading для ресурсов
  • избегать тяжёлых анимаций на старте

Частые ошибки

  • несоответствие размеров иконок требованиям платформ
  • слишком долгий splash screen
  • использование неподдерживаемых форматов
  • отсутствие fallback-иконок

Связь с темами и брендингом

Quasar позволяет централизованно управлять визуальной частью:

framework: {
  config: {
    brand: {
      primary: '#1976D2',
      secondary: '#26A69A'
    }
  }
}

Иконки и splash screen должны соответствовать этим настройкам, обеспечивая единый визуальный стиль приложения.

Оглавление