SVG иконки

Quasar Framework предоставляет гибкий и мощный механизм работы с иконками, включая поддержку SVG, что позволяет создавать высококачественные интерфейсы с масштабируемыми иконками без потери резкости на любых устройствах. SVG иконки в Quasar могут быть использованы как встроенные через q-icon, так и кастомные, загружаемые из внешних файлов или npm-пакетов.

Подключение и использование SVG в `q-icon`

Компонент q-icon позволяет работать с любыми типами иконок, включая Material Icons, FontAwesome и SVG. Для использования собственной SVG-иконки необходимо указать путь к файлу или передать содержимое SVG через слот default.

Пример базового использования SVG через путь:

<q-icon
  src="statics/icons/my-icon.svg"
  size="48px"
  color="primary"
/>

Ключевые моменты:

src — путь к SVG-файлу, относительно папки statics проекта Quasar.
size — размер иконки, можно указывать в px, em, rem.
color — позволяет использовать палитру Quasar для окраски иконок.

Встраивание SVG через слот

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

<q-icon size="50px">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M12 2L2 22h20L12 2z" fill="currentColor"/>
  </svg>
</q-icon>

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

fill="currentColor" позволяет автоматически подстраивать цвет иконки под свойство color компонента q-icon.
Можно использовать любые SVG-атрибуты для управления формой, заливкой и эффектами.

Динамическая загрузка SVG

Quasar поддерживает динамическую подгрузку SVG с использованием require или import. Это удобно для больших проектов с множеством иконок.

<template>
  <q-icon :src="iconPath" size="32px"/>
</template>

<script>
export default {
  data() {
    return {
      iconPath: require('assets/icons/dynamic-icon.svg')
    }
  }
}
</script>

Преимущества:

Поддержка tree-shaking, если иконки импортируются по отдельности.
Легкость управления библиотеками SVG.

Настройка кастомных SVG иконок через Quasar Icon Set

Quasar позволяет создавать собственные наборы иконок, используя интерфейс Icon Set. Это особенно полезно при работе с крупными проектами или брендированными дизайнами.

Пример создания собственного набора иконок:

import { Quasar } from 'quasar'

const myIconSet = {
  all: {
    add: 'statics/icons/add.svg',
    delete: 'statics/icons/delete.svg',
    edit: 'statics/icons/edit.svg'
  }
}

Quasar.iconSet.set(myIconSet)

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

<q-icon name="add" size="36px" color="secondary"/>

Преимущества кастомного набора:

Унификация всех иконок проекта.
Упрощение изменения пути к SVG при необходимости.
Возможность глобальной замены иконок для разных платформ.

Работа с цветом и эффектами SVG

Встроенные возможности Quasar позволяют управлять цветом, градиентами и эффектами через CSS и свойства q-icon.

<q-icon size="40px" class="icon-gradient">
  <svg viewBox="0 0 24 24">
    <path d="M12 2L2 22h20L12 2z" fill="url(#grad)"/>
    <defs>
      <linearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="#ff0000"/>
        <stop offset="100%" stop-color="#0000ff"/>
      </linearGradient>
    </defs>
  </svg>
</q-icon>

<style>
.icon-gradient {
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4));
}
</style>

Ключевые моменты:

Возможность использовать градиенты и фильтры CSS.
SVG подстраивается под любой размер, сохраняя четкость.
Цвет иконки можно динамически менять через CSS классы или свойство color компонента.

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

Quasar совместим с CSS-анимациями и анимациями через JavaScript для SVG. Примеры включают вращение, масштабирование, изменение цвета.

<q-icon size="48px" class="spin-icon">
  <svg viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
  </svg>
</q-icon>

<style>
.spin-icon svg {
  animation: spin 2s linear infinite;
}

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