Материал дизайн иконки: Пакет значков Material design | Monochrome

Material Design на русском. Часть 23 — Системные Иконки | by Ruslan Sharipov | Дизайн-кабак

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь.

Контекст

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

Формы иконок насыщенные и геометрические. Они симметричны, консистенты, читабельны и четкие даже при маленьких размерах.

Правильно: графично и насыщенноНеправильно: не используй декоративные элементы для украшательства и тонкие обводкиПравильно: простая геометрия и консистентная формаНеправильно: органические формы

Шаблон

Шаблон для Adobe Illustrator, который поможет спроектировать системные иконки по 24dp сетке.

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

Системные иконки имеют размер 24 x 24 dp. Проектируй иконки в 100% масштабе, то есть 1:1, чтобы всё было пиксель-пёрфект.

100% масштаб 1:11000% масштаб 1000:1

Плотность макета

На десктопе, когда мышь и клавиатура являются основными методами ввода, размеры иконок могут быть уменьшены до 20dp.

100% масштаб 1:11000% масштаб 1000:1

Содержимое иконок должно оставаться внутри рабочей области.

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

Рабочая область, в которой надо нарисовать иконку ограничена размером 20x20dp внутри контейнера 24x24dpВнутренний отступ (padding) — от границ контейнера отступи 2dpКомпактная рабочая область может быть меньше. Например, если иконка 20x20dp, то рабочая область будет 16x16dp с внутренним отступом 2dpВнутренний отступ для компактного вида = 2dp

Сетка иконки и контуры

Сетка системной иконки имеет четкую и согласованную систему, при которой можно гибкого позиционировать элементы.

Эти контуры основаны на сетке. Используя их в качестве базы, ты можешь поддерживать консистентные пропорции во всех иконках.

Базовые формы

Контуры превращаются в стандартные формы: круг, квадрат, прямоугольник, перпендикуляры и диагонали. Эти формы нужны для унификации иконок в системе Google и для поддержания согласованности в сетке.

СеткаКонтурыКвадрат размером 18x18dp по высоте и ширинеКруг размером 20x20dp по высоте и ширинеВертикальный прямоугольник размером 16dp по ширине и высоте 20dpГоризонтальный прямоугольник 20dp на ширине и 16dp на высоте

Геометрия

Ниже примеры того, как ключевые контуры и формы превращаются в универсальные, простые и консистентные системные иконки Google.

Иконка «копировать»Иконка «камера»

Чёткость и пиксель-пёрфект

Чтобы избежать искажения иконки, расположи элементы “пиксель в пиксель”, указав координаты X и Y с помощью целых чисел, без десятичных знаков.

Правильно: позиционирование по сетке «пиксель в пиксель»Неправильно: не размещай элементы в дробные позиции, а также не используй дробные значения для масштаба.

Адаптация под другие платформы

Android. Кнопка назад имеет тонкую по обводке стрелку.iOS. На iOS стрелка толще и не имеет окончания.iOS. В iOS стрелка назад также может содержать надпись, которая соответствует пункту назначения.Android. Иконка, которая показывает меню с дополнительными пунктами меню (обозначенный иконкой «Еще…») содержит три вертикальные точки.iOS. Иконка, которая показывает меню с дополнительными пунктами меню (обозначенный иконкой «Еще…») содержит три горизонтальные точки.

Анатомия

1 — Штрих. 2 — Угол. 3 — Контрформа (внутреннее пространство). 4 — Обводка. 5 — Внутренний угол. 6 — Контейнер иконки

Углы

По умолчанию радиус скругления углов равен 2dp. Внутренние углы должны быть квадратными, а не закругленными. Для форм шириной 2dp или меньше штрих не должен быть закруглен.

Наружные углы со скруглением 2dpВнутренние углы без скругления

Обводка

Системные иконки имеют обводку размером 2dp, везде.

2dpКонсистентность вездеКонечные штрихиВнутреннее пространствоПравильно: используй одинаковые размеры в обводках и прочих элементах иконокНеправильно: использовать разные формы и толщины у элементов.

Сложные по форме иконки

Если ты проектируешь системную иконку со сложными деталями, то можно сделать обводку чуть тоньше, чтобы улучшить разборчивость. Такие манипуляции называются оптические правки. Любая такая правка должна все равно использовать геометрические формы, на которых основаны все остальные иконки.

Сложные формы. У иконки «скрепка» исползуется 1.5dp ширина обводки, чтобы кривые формы читались лучше.Малый масштаб. Иконка выше также использует обводку размером 1.5dp для отображения дыма у сигареты.Правильно: рисуй иконки фронтальноНеправильно: не поворачивай, не наклоняй и не изменяй форму объектовПравильно: упрощай иконки для лучшей ясности и читабельности. Неправильно: не перегружай иконку. Избегай сложных форм.

Пространство

Размер кликабельной области равен 48dp. В эту кликабельную зону ты помещаешь иконку 24dp. Это нужно, чтобы дать достаточное пространство, чтобы поддержать читабельность и чтобы было удобно нажимать на иконку.

1 — Кликабельная зона. 2 — Размещение.

Плотность (на Desktop)

Когда мышь и клавиатура являются основными методами ввода, размер контейнера иконки можно поджать. Иконки 20dp можно уместить в кликабельную зону размером 40dp.

1 — Кликабельная зона. 2 — Размещение

Иконки на светлом фоне

Активное состояние иконки
Стандартная прозрачность активной иконки с фокус-состоянием на светлом фоне равна 87% (#000000). Прозрачность иконки вне фокуса равна 54%.

Неактивное состояние иконки
Неактивная иконка, которая ниже предыдущих по визуальной иерархии, должна иметь прозрачность равную 38% (#000000).

Иконки на тёмном фоне

Активное состояние иконки
Стандартная прозрачность активной иконки с фокус-состоянием на светлом фоне равна 100% (#FFFFFF). Прозрачность иконки вне фокуса равна 70%.

Неактивное состояние иконки
Неактивная иконка, которая ниже предыдущих по визуальной иерархии, должна иметь прозрачность равную 58% (#FFFFFF).

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

Следующие 4 примера иконок получились путем работы с этими атрибутами.

Линейные иконки

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

Обводка или заливка

Если ты не заливаешь иконки цветом, то используетеся обводка. Регулируй толщину обводки, чтобы передать какой-то стиль или ощущение. Иконки же с заливкой кажутся визуально тяжелее.

Без заливкиС заливкойЧтобы иконка была читаемой, рекомендуемая толщина обводки 2dp2dp обводка это стандарт также и для линейных иконок во всех приложениях и размерах.

Про выравнивание обводки

Положение обводки влияет на внешний вид иконки. Чаще всего иконки рисуются с обводкой внутрь.

1 — Material иконка по умолчанию. 2 — Обводка внутрь. 3 — Обводкапо центру. 4 — Обводка наружу.Выравнивание обводки по внутренней части фигуры лучший вариант для создания иконок и передачи читаемости.Для читаемости и распознаваемости в некоторых случаях стоит придерживаться стиля иконок Material по умолчаниюОсторожно: хотя в большинстве случаев нужно выравнивать обводку внутри, иногда все же нужно делать это по центру или использовать внешнее выравнивание для лучшей читаемостиПравильно: если тебе кажется, что иконку стоит скорректировать, то сделай это используя настройки обводкиТонкая обводка у иконок подчёркивают бренд1 — Логотип. 2 — Линейные иконки в приложении. 3 — Сет иконок.

Острые или заострённые углы

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

Скруглённые углы
Скругленные иконки хорошо сочетаются с продуктами, в которых используется насыщенная типографика, изогнутые логотипы или округлые элементы.

Радиус скругления
Радиус угла у иконки может быть больше или меньше — все зависит от тебя.

Рекомендуемое значение скругления от 0 до 4dp.Если обводка равна 2dp или меньше, то радиус угла должен быть равен 1dpМеняй внутренние углы и размер в соответствии с радиусом углаПравильно: меняй радиус, чтобы иконка оставалась разборчивой и передавала стиль брендаОсторожно: не скгруляй внутренние углы если это понижает читаемость иконкиЗначение 0dp у иконок для скругления поддерживается прямоугольными элементами дизайна этого приложения1 — Логотип. 2 — Иконки острые. 3 — Сет иконок.у этого приложения закругленные кнопки и линейный иконка-логотип.1 — Логотип. 2 — Сет скругленных иконок. 3 — Использование сета иконок в приложении.

Двухцветные иконки

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

1 — Обводка (рекомендация по размеру: 2dp). 2 — Заливка с прозрачностьюПрозрачность применяется только к какой-то области заливки.

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

Обводка иконок должна быть со значением прозрачности равной 87% на светлом фоне и 100% на темном. Цвет заливки может варьироваться в зависимости от тона фона.

В этом интерфейсе используется двухцветные иконки. В данном примере это лого.1 — Лого. 2 — Сет иконок. 3 — Использование иконок в приложении.

• Структуированный документ в Notion
• Официальные обновления Google на странице what’s new

70+ материалов по дизайну материалов для разработчиков Android

Material Design — это новое сердце и душа Android от Google. Material Design — это визуальный язык, в котором принципы хорошего дизайна сочетаются с инновациями. Он нацелен на создание красивого и последовательного пользовательского опыта с использованием потрясающих принципов и стандартов дизайна. Google и другие крупные производители приложений, такие как Whatsapp и SwiftKey, уже используют Material Design в своем дизайне приложений.

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

Цветовые палитры материалов
Листы наклеек и значки
Шаблоны макетов
Roboto & Noto Fonts

Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)

Цветовые палитры и образцы

Генератор цветовой палитры
Материал Цвет образца
Образцы цветов материала
Материал Дизайн Цвета
Набор инструментов LESS / CSS для цветовой палитры дизайна материалов
Цветовые палитры для Android, iOS и веб

Наборы иконок и шаблоны

Android Grid PSD (шаблон Android L)
Android L Icon Pack (1600+)
Шаблон Google Design Icon (PSD)
Android L Icon Grid System (AI)
Системный дизайн иконок материалов (PNG & Sketch)
Набор материалов Flat Design Avatar (PNG, PSD, AI)
Материал Дизайн Iconic Шрифт (744 в TTF & WOFF)
Значки дизайна материалов (более 1100 в PNG, SVG, Vector, XAML)
Бесплатные иконки дизайна материалов (420+ в SVG, EPS, PSD и PNG)
Значки дизайна материалов (430+ в CSH)
Материал Дизайн Иконки / Веб-шрифты (EOT, SVG, TFF & WOFF)
Набор значков материалов (435 в SVG & Sketch)
Шаблон дизайна иконок материалов 2. 0 (AI)
1000 иконок дизайна материалов (PNG)
Бесплатный набор иконок материалов (39 в PSD)
Материал Powerpoint и ключевые иконки (420+)
Бесплатный набор иконок дизайна материалов (40 в PNG)
Android Lollipop Icon Set
Значки материалов для ПК (30 в ICO и PNG)
Набор иконок дизайна материалов (53 в PSD)
Иконки Google Material Design (шрифт для IOS)

Наборы для дизайна материалов GUI

Бесплатный UI Kit Material Design
Комплект пользовательского интерфейса для Android Material Design
Бесплатный UI Kit Материал
UI Kit Material Design
Бесплатный UI Kit
Готовый комплект расширения пользовательского интерфейса
Android L GUI Kit
Комплект GUI для дизайна материалов Facebook
Бесплатный набор материалов UI от PSDboom
Android L 5.0 UI Kit
Android Lollipop UI Design Kit
Материал Дизайн Вдохновленный Bootstrap
Android Lollipop 5.0 GUI
Пользовательский интерфейс Android Material Design

Наборы пользовательского интерфейса приложения Material Design

DiscoMusica
Zalando
Dribbble
Instagram
Календарь
Dropbox
Входящие от Gmail
Минимальный мониторинг батареи
Evernote
Barter. Li
Skype

Комплекты материалов UI

Профиль Twitter
Выбор даты и времени
Прохождение
Аудиоплеер
клавиатура
Приложение электронной коммерции
Клавиатура Android L
алфавиты
чисел

Пользовательский интерфейс приложения Material Design

В этом разделе мы рассмотрим концепцию дизайна материалов для популярных приложений.

Behance
щебет
Instagram
Гугл драйв
Whatsapp
Soundcloud
Dribbble
Gmail
телеграмма

Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)

Icon Fonts — Vuetify

Вы просматриваете документацию для Vuetify 3

Перейти к Vuetify 2

По умолчанию Vuetify поддерживает 4 популярные библиотеки шрифтов значков — Material Design Icons , Material Icons , Font Awesome 4 и Font Awesome 5 .

#Usage

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

src/plugins/vuetify.js

 import { createVuetify } из 'vuetify'
импортировать {псевдонимы, mdi} из 'vuetify/iconsets/mdi'
экспортировать по умолчанию createVuetify({
  значки: {
    defaultSet: 'мди',
    псевдонимы,
    наборы: {
      мди,
    }
  },
})
 

<шаблон>
  

 

В приведенных выше примерах мы импортируем набор значков по умолчанию mdi и соответствующие ему псевдонимы. Эти псевдонимы ссылаются на часто используемые типы значков, которые используются компонентами Vuetify.

Хотя по-прежнему можно указать значение значка через слот по умолчанию в Vuetify 3.0 ( mdi-home ), вместо этого мы рекомендуем использовать реквизит icon .

#Несколько наборов значков

По умолчанию Vuetify поддерживает одновременное использование нескольких

различных наборов значков. В следующем примере показано, как изменить шрифт значка по умолчанию на Font Awesome ( fa ), сохраняя при этом доступ к исходным значкам Material Design ( mdi ) с помощью префикса:

src/plugins/vuetify. js

 импорт {createVuetify} из 'vuetify'
импортировать {псевдонимы, fa} из 'vuetify/iconsets/fa'
импортировать { mdi } из 'vuetify/iconsets/mdi'
экспортировать по умолчанию createVuetify({
  значки: {
    defaultSet: 'фа',
    псевдонимы,
    наборы: {
      фа,
      мди,
    }
  },
})
 

 <шаблон>
   // Отображает значок FontAwesome
   // Это отображает значок MDI

 

Нет необходимости указывать префикс (например,

mdi: ) для значков из набора значков по умолчанию

#Установка шрифтов значков Иконки дизайна материалов

). Это можно сделать, включив ссылку CDN или импортировав библиотеку значков в ваше приложение.

На этой странице «Значки материалов» используются для обозначения официальных значков Google , а «Значки дизайна материалов» относятся к расширенной сторонней библиотеке

#Значки дизайна материалов

Это набор значков по умолчанию, используемый Проверить. Он поддерживает локальную установку с помощью процесса сборки или ссылки CDN. Ниже показано, как добавить ссылку CDN на ваш index.html :

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

 $ yarn add @mdi/font -D
// ИЛИ
$ npm установить @mdi/шрифт -D
 

src/plugins/vuetify.js

 import '@mdi/font/css/materialdesignicons.css' // Убедитесь, что вы используете css-loader
импортировать { createVuetify } из 'vuetify'
экспортировать по умолчанию createVuetify({
  значки: {
    defaultSet: 'mdi', // Это уже значение по умолчанию - только для отображения
  },
})
 

НЕ использовать ссылку CDN без указания пакета

версия . Невыполнение этого требования может привести к неожиданным изменениям в вашем приложении с новыми выпусками.

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

#Material Design Icons — JS SVG

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

src/plugins/vuetify.js

 import { createVuetify } из 'vuetify'
импортировать {псевдонимы, mdi} из 'vuetify/iconsets/mdi-svg'
экспортировать по умолчанию createVuetify({
  значки: {
    defaultSet: 'мди',
    псевдонимы,
    наборы: {
      мди,
    },
  },
})
 

@mdi/js или unplugin-icons — две альтернативы для получения остальных значков, которые вам понадобятся в вашем приложении.

Если вы хотите придерживаться @mdi/js , используйте пути SVG, как указано в @mdi/js и импортируйте только те значки, которые вам нужны. В следующем примере показано, как использовать импортированный значок в шаблоне SFC .vue :

 $ yarn add @mdi/js -D
// ИЛИ
$ npm установить @mdi/js -D
 

 <шаблон>
  

<скрипт>
  импортировать { mdiAccount } из '@mdi/js'
  экспорт по умолчанию {
    данные: () => ({
      mdiAccount
    }),
  }

 

Или значки, которые вы хотите использовать, могут быть добавлены как псевдонимы для упрощения повторного использования:

src/plugins/vuetify.js

 import { createVuetify } из 'vuetify'
импортировать {псевдонимы, mdi} из 'vuetify/iconsets/mdi-svg'
импортировать { mdiAccount } из '@mdi/js'
экспортировать по умолчанию createVuetify({
  значки: {
    defaultSet: 'мди',
    псевдонимы: {
      . .. псевдонимы,
      учетная запись: mdiAccount,
    },
    наборы: {
      мди,
    },
  },
})
 

 <шаблон>
  

 

#Material Icons

Для проектов без процесса сборки рекомендуется импортировать значки из CDN.

Некоторые значки материалов отсутствуют по умолчанию. Например, person и person_outline доступны, но

visibility_outline — нет, а visibility — доступны. Чтобы использовать отсутствующие значки, замените существующий <ссылка> следующим:

 <ссылка
  отн = "таблица стилей"
  href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
/>
 

В качестве альтернативы возможна локальная установка с помощью yarn или npm. Имейте в виду, что это не официальный репозиторий Google и может содержать не все значки.

 $ пряжа add material-design-icons-iconfont -D
// ИЛИ
$ npm установить материал-дизайн-значки-iconfont -D
 

src/plugins/vuetify.js

 import 'material-design-icons-iconfont/dist/material-design-icons.css' // Убедитесь, что ваш проект способен обрабатывать файлы css
импортировать { createVuetify } из 'vuetify'
импортировать {псевдонимы, md} из 'vuetify/iconsets/md'
экспортировать по умолчанию createVuetify({
  значки: {
    defaultSet: 'мд',
    псевдонимы,
    наборы: {
      Мэриленд,
    },
  },
})
 

 <шаблон>
  

 

#Font Awesome 5 Icons

Самый простой способ начать работу с FontAwesome — использовать CDN.

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

 $ yarn add @fortawesome/fontawesome-free -D
// ИЛИ
$ npm установить @fortawesome/fontawesome-free -D
 

src/plugins/vuetify.

js

 import '@fortawesome/fontawesome-free/css/all.css' // Убедитесь, что ваш проект способен обрабатывать файлы css
импортировать { createVuetify } из 'vuetify'
импортировать {псевдонимы, fa} из 'vuetify/iconsets/fa'
экспортировать по умолчанию createVuetify({
  значки: {
    defaultSet: 'фа',
    псевдонимы,
    наборы: {
      фа,
    },
  },
})
 

 <шаблон>
  

 

Версия JavaScript ( all.js ) значков FontAwesome НЕ будет работать с Vue

#Font Awesome 4 Icons

Самый простой способ начать работу с FontAwesome — использовать CDN.

Чтобы установить FontAwesome 4 локально, это то же самое, что и его более новая версия, только из другого пакета. Вы будете использовать пакет

font-awesome , а не @fortawesome .

 $ пряжа добавить шрифт[email protected] -D
// ИЛИ
$ npm установить потрясающий шрифт@4.7.0 -D
 

src/plugins/vuetify.js

 import 'font-awesome/css/font-awesome.min.css' // Убедитесь, что ваш проект способен обрабатывать файлы css
импортировать { createVuetify } из 'vuetify'
импортировать {псевдонимы, fa} из 'vuetify/iconsets/fa4'
экспортировать по умолчанию createVuetify({
  значки: {
    defaultSet: 'фа',
    псевдонимы,
    наборы: {
      фа,
    }
  },
})
 

 <шаблон>
  

 

#Font Awesome SVG Icons

Установите следующие пакеты.

 $ пряжа добавить @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons -D
// или
$ npm install @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons -D
 

Затем зарегистрируйте глобальный компонент font-awesome-icon и используйте предварительно определенный набор значков fa-svg . Если у вас есть доступ к иконкам Font Awesome Pro, их можно добавить в библиотеку таким же образом.

src/main.js

 импорт {createApp} из 'vue'
импортировать { createVuetify } из 'vuetify'
импортировать {псевдонимы, fa} из 'vuetify/iconsets/fa-svg'
импортировать {библиотеку} из '@fortawesome/fontawesome-svg-core'
импортировать { FontAwesomeIcon } из '@fortawesome/vue-fontawesome'
импортировать {fas} из '@fortawesome/free-solid-svg-icons'
константное приложение = createApp()
app.component('font-awesome-icon', FontAwesomeIcon) // Глобальная регистрация компонента
library.add(fas) // Включить необходимые значки
const vuetify = createVuetify({
  значки: {
    defaultSet: 'фа',
    псевдонимы,
    наборы: {
      фа,
    },
  },
})
app.use(vuetify)
app.mount('#приложение')
 

 <шаблон>
  

 

#Создание пользовательского набора значков

Набор значков состоит из объекта с одним свойством компонента , который должен быть функциональным компонентом, который получает свойства типа IconsProps и отображает значок.

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

src/iconsets/custom.ts

 импорт {h} из 'vue'
тип импорта { IconSet, IconAliases, IconProps } из 'vuetify'
постоянные псевдонимы: IconAliases = {
  крах: '...',
  полный: '...',
  отмена: '...',
  закрывать: '...',
  удалить: '...',
  прозрачный: '...',
  успех: '...',
  Информация: '...',
  предупреждение: '...',
  ошибка: '...',
  пред: '...',
  следующий: '...',
  checkboxOn: '...',
  checkboxOff: '...',
  флажокНеопределенный: '...',
  разделитель: '...',
  Сортировать: '...',
  расширять: '...',
  меню: '...',
  подгруппа: '...',
  падать: '...',
  радиоОн: '...',
  радиоВыкл: '...',
  редактировать: '...',
  ratingEmpty: '...',
  рейтингПолный: '...',
  рейтингПоловина: '...',
  загрузка: '. ..',
  первый: '...',
  последний: '...',
  разворачиваться: '...',
  файл: '...',
  плюс: '...',
  минус: '...',
}
постоянный пользовательский: IconSet = {
  компонент: (реквизит: IconProps) => h(...),
}
экспорт { псевдонимы, пользовательские }
 

src/plugins/vuetify.js

 import { createVuetify } из 'vuetify'
импортировать {псевдонимы, пользовательские} из '../iconsets/custom'
экспортировать по умолчанию createVuetify({
  значки: {
    defaultSet: «пользовательский»,
    псевдонимы,
    наборы: {
      обычай,
    },
  }
})
 

#Расширение доступных псевдонимов

Если вы разрабатываете пользовательские компоненты Vuetify, вы можете расширить объект псевдонимов , чтобы использовать те же функции, что и внутренние компоненты Vuetify. Псевдонимы значков обозначаются начальной цифрой 9.0024 $ , за которым следует имя псевдонима, например. $продукт .

src/plugins/vuetify.