MDI SVG

Material Design Icons (MDI) — это один из основных наборов иконок, используемых в экосистеме Material Design. Библиотека содержит тысячи векторных иконок и широко применяется во фреймворках интерфейсов, включая Vuetify. Одним из способов использования MDI является SVG-формат, который обеспечивает высокую гибкость, масштабируемость и контроль над отображением иконок.

В Vuetify поддерживается несколько способов подключения иконок, однако использование SVG-версии MDI считается наиболее современным и функциональным подходом.

Особенности SVG-иконок

SVG (Scalable Vector Graphics) представляет собой векторный формат графики, основанный на XML. В отличие от шрифтовых иконок, SVG обладает рядом преимуществ:

Основные характеристики:

  • масштабирование без потери качества
  • независимость от шрифтов
  • возможность изменения цвета, размеров и анимации
  • точный контроль над структурой иконки
  • поддержка CSS и JavaScript

Использование SVG особенно важно в современных интерфейсах, где требуется:

  • высокая четкость на экранах высокой плотности (Retina, 4K)
  • анимация элементов интерфейса
  • динамическое изменение внешнего вида компонентов

Подключение MDI SVG в Vuetify

В Vuetify поддерживается использование SVG-иконок через пакет @mdi/js, который содержит пути (path) для всех иконок Material Design.

Установка необходимых пакетов

npm install @mdi/js

В некоторых конфигурациях также используется пакет:

npm install @mdi/font

Однако для работы с SVG-иконками требуется именно @mdi/js.

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

В Vuetify иконки настраиваются через конфигурацию при создании экземпляра приложения.

Пример настройки (Vuetify 3)

import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'

export const vuetify = createVuetify({
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi
    }
  }
})

Пояснение параметров:

Параметр Назначение
defaultSet набор иконок по умолчанию
aliases псевдонимы для стандартных иконок Vuetify
sets список подключенных наборов

После настройки все компоненты Vuetify смогут использовать MDI SVG.

Использование иконок через компонент v-icon

Основным компонентом для отображения иконок является v-icon.

Базовый пример

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

Иконка будет автоматически отрисована через SVG.

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

<v-btn icon>
  <v-icon icon="mdi-heart"></v-icon>
</v-btn>

Иконки часто применяются в:

  • кнопках
  • меню
  • списках
  • карточках
  • навигации

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

<div>
  <v-icon icon="mdi-account"></v-icon>
  Профиль пользователя
</div>

Импорт SVG-путей напрямую

Иногда требуется использовать SVG-путь напрямую из пакета @mdi/js.

Пример

import { mdiAccount } from '@mdi/js'

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

<v-icon :icon="mdiAccount"></v-icon>

Такой способ удобен при:

  • динамическом выборе иконок
  • оптимизации сборки
  • использовании только нужных иконок

Изменение размера иконок

Размер SVG-иконок легко контролируется.

Атрибут size

<v-icon icon="mdi-home" size="36"></v-icon>

Предустановленные размеры

<v-icon size="small">mdi-home</v-icon>
<v-icon size="large">mdi-home</v-icon>
<v-icon size="x-large">mdi-home</v-icon>

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

Цвет SVG-иконок управляется через CSS или свойства Vuetify.

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

<v-icon icon="mdi-alert" color="red"></v-icon>

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

<v-icon class="text-primary">mdi-home</v-icon>

Через CSS

.custom-icon {
  color: #4CAF50;
}
<v-icon class="custom-icon">mdi-check</v-icon>

Поворот и трансформация

SVG-иконки легко трансформируются.

Поворот

<v-icon style="transform: rotate(90deg)">
  mdi-arrow-right
</v-icon>

Масштабирование

<v-icon style="transform: scale(1.5)">
  mdi-star
</v-icon>

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

Благодаря тому, что SVG является частью DOM, иконки можно анимировать.

Пример CSS-анимации

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

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

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

<v-icon class="spin-icon">
  mdi-loading
</v-icon>

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

Vuetify позволяет добавлять собственные SVG-иконки.

Пример

import { createVuetify } from 'vuetify'

const customIcons = {
  customLogo: {
    component: {
      template: `
        <svg viewBox="0 0 24 24">
          <path d="M12 2L2 22h20z"/>
        </svg>
      `
    }
  }
}

export default createVuetify({
  icons: {
    sets: {
      custom: customIcons
    }
  }
})

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

<v-icon icon="custom:customLogo"></v-icon>

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

Vuetify содержит систему alias, которая сопоставляет стандартные имена с MDI-иконками.

Пример:

<v-icon icon="$close"></v-icon>

Alias $close может быть сопоставлен с mdi-close.

Динамический выбор иконок

Иногда иконка определяется логикой приложения.

Пример

<v-icon :icon="isActive ? 'mdi-check' : 'mdi-close'"></v-icon>

Использование вычисляемых свойств

computed: {
  statusIcon() {
    return this.online ? 'mdi-wifi' : 'mdi-wifi-off'
  }
}
<v-icon :icon="statusIcon"></v-icon>

Оптимизация загрузки SVG-иконок

Большие наборы иконок могут увеличивать размер приложения. Для оптимизации применяются следующие методы.

Импорт только нужных иконок

import { mdiHome, mdiAccount, mdiEmail } from '@mdi/js'

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

<v-icon :icon="mdiHome"></v-icon>

Tree Shaking

Современные сборщики (Vite, Webpack) удаляют неиспользуемый код, поэтому импорт отдельных иконок значительно уменьшает размер итогового бандла.

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

Списки

<v-list-item>
  <template v-slot:prepend>
    <v-icon icon="mdi-folder"></v-icon>
  </template>

  Документы
</v-list-item>

Поля ввода

<v-text-field
  label="Email"
  prepend-inner-icon="mdi-email"
></v-text-field>

Навигационные панели

<v-app-bar>
  <v-btn icon>
    <v-icon icon="mdi-menu"></v-icon>
  </v-btn>
</v-app-bar>

Сравнение SVG и шрифтовых иконок

Характеристика SVG Icon Font
Качество на любом масштабе Да Ограничено
Анимация Полная поддержка Ограничена
Управление цветами Полное Ограничено
Поддержка CSS Полная Частичная
Производительность Высокая Средняя

По этим причинам SVG-иконки постепенно вытесняют шрифтовые наборы.

Распространённые ошибки

Иконка не отображается

Причины:

  • не подключён набор mdi-svg
  • неверное имя иконки
  • отсутствует пакет @mdi/js

Используется неправильный набор иконок

Проблема возникает, если в конфигурации Vuetify указан другой набор:

defaultSet: 'fa'

В этом случае MDI-иконки работать не будут.

Конфликт версий Vuetify

Vuetify 2 и Vuetify 3 используют разные способы подключения иконок. При миграции проектов необходимо обновлять конфигурацию.

Практические сценарии применения

SVG-иконки MDI используются практически во всех элементах интерфейса:

Навигация

  • меню
  • панели инструментов
  • боковые панели

Интерактивные элементы

  • кнопки
  • переключатели
  • вкладки

Информационные элементы

  • уведомления
  • статусы
  • индикаторы состояния

Каталог иконок MDI

Полный список иконок Material Design Icons включает тысячи символов, среди которых:

  • навигационные
  • системные
  • пользовательские
  • социальные
  • мультимедийные
  • файлы и документы
  • устройства
  • коммуникации

Примеры популярных иконок:

mdi-home
mdi-account
mdi-heart
mdi-menu
mdi-email
mdi-settings
mdi-bell
mdi-check
mdi-close
mdi-alert

Каждая иконка представлена SVG-контуром, что обеспечивает точное отображение в интерфейсе независимо от размеров и плотности экрана.

Оглавление