Подключение шрифтов и иконок

Vuetify предоставляет гибкую систему работы со шрифтами и иконками, позволяя легко интегрировать как стандартные наборы, так и кастомные ресурсы. Основные подходы включают использование Google Fonts, Material Design Icons, Font Awesome и локальных шрифтов.

Настройка шрифтов через Google Fonts

Vuetify поддерживает подключение шрифтов через CDN и локальные файлы. Для подключения Google Fonts через CDN необходимо:

  1. В index.html проекта добавить тег <link>:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
  1. В vuetify конфигурации указать шрифт по умолчанию:
import { createVuetify } from 'vuetify'

export default createVuetify({
  theme: {
    defaultTheme: 'light',
  },
  typography: {
    fontFamily: 'Roboto, sans-serif'
  }
})

Важно: Vuetify по умолчанию использует Roboto, поэтому подключение других шрифтов требует явного указания в fontFamily.

Использование локальных шрифтов

Для локальных шрифтов:

  1. Скопировать файлы шрифтов в папку assets/fonts.
  2. Подключить их через CSS:
@font-face {
  font-family: 'CustomFont';
  src: url('@/assets/fonts/CustomFont-Regular.woff2') format('woff2'),
       url('@/assets/fonts/CustomFont-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

body {
  font-family: 'CustomFont', sans-serif;
}
  1. В Vuetify указать кастомный шрифт через typography.fontFamily.

Подключение Material Design Icons

Vuetify изначально интегрирован с Material Design Icons. Подключение возможно двумя способами:

Через CDN:

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.x/css/materialdesignicons.min.css" rel="stylesheet">

Через npm пакет:

npm install @mdi/font

В vuetify конфигурации необходимо указать используемый набор иконок:

import { createVuetify } from 'vuetify'
import '@mdi/font/css/materialdesignicons.css'

export default createVuetify({
  icons: {
    defaultSet: 'mdi',
  },
})

После этого доступ к иконкам осуществляется через компонент <v-icon>:

<v-icon>mdi-home</v-icon>

Подключение Font Awesome

Для интеграции Font Awesome используется пакет @fortawesome:

npm install @fortawesome/fontawesome-free

Импортировать CSS в проект:

import '@fortawesome/fontawesome-free/css/all.css'

В Vuetify конфигурации указать:

export default createVuetify({
  icons: {
    defaultSet: 'fa',
    sets: {
      fa: {
        component: 'v-icon',
      }
    }
  }
})

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

<v-icon>fas fa-user</v-icon>
<v-icon>far fa-envelope</v-icon>

Особенности: fas – solid, far – regular, fab – brand.

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

Для собственного набора иконок:

  1. Создать объект с названием и путем к SVG:
import CustomIconHome from '@/assets/icons/home.svg'

export const customIcons = {
  home: {
    component: CustomIconHome
  }
}
  1. Подключить через vuetify:
export default createVuetify({
  icons: {
    defaultSet: 'custom',
    sets: {
      custom: customIcons
    }
  }
})

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

<v-icon>$home</v-icon>

Управление размерами и цветами иконок

Vuetify позволяет изменять размеры и цвета иконок через атрибуты и классы:

<v-icon size="36" color="primary">mdi-account</v-icon>
<v-icon class="text-success" small>mdi-check</v-icon>

Поддерживаемые размеры: x-small, small, default, large, x-large, а также числовые значения через size. Цвета: можно использовать встроенные цвета темы (primary, secondary, success, error) или кастомные классы.

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

  • Подключение через CDN удобно, но замедляет загрузку страницы, поэтому для production проектов рекомендуется локальная сборка шрифтов и иконок.
  • Использовать только необходимые веса шрифтов и наборы иконок для уменьшения размера бандла.
  • Для больших проектов можно комбинировать Material Design Icons и Font Awesome, задавая приоритет через defaultSet.

Интеграция с динамическими компонентами

Vuetify позволяет динамически использовать шрифты и иконки, что важно для многоязычных приложений:

<v-icon :size="iconSize" :color="iconColor">{{ iconName }}</v-icon>

Здесь iconSize, iconColor и iconName могут быть реактивными свойствами, изменяемыми в зависимости от состояния приложения.

Использование этих методов обеспечивает гибкое управление визуальной частью интерфейса, позволяя создавать современные и адаптивные приложения на Vuetify с единым стилем шрифтов и иконок.

Оглавление