Иконки материал дизайн: Material Design Icons

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

Важно отметить, что мы не сразу сформировали структуру сетки Phosphor. Со временем мы удалили части, которые не были полезными (например, дополнительные ортогонали), мы уточнили и выделили область обрезки, а также изменили ключевые линии по мере того, как правила нашего семейства иконок обретали форму.

Сетка – это рекомендация

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

Оптический баланс

Всегда проверяйте оптический баланс. В приведенном ниже примере строгое следование ключевой фигуре круга не совсем правильно.

В контексте символ «G» кажется немного большим. Если немного уменьшить его масштаб, он будет выглядеть более сбалансированным.

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

Чтобы узнать больше об оптических эффектах, прочтите эту прекрасно иллюстрированную статью Славы Шестопалова: «Оптические эффекты в пользовательских интерфейсах: иллюстрированное руководство».

Тестирование

Протестируйте свои иконки в контексте, чтобы проверить их согласованность и эффективность. Если вы создаете иконку приложения для iOS, как она будет отображаться вместе с другими иконками на главном экране? Внутри папки, внутри уведомления, в режиме просмотра настроек? В App Store? Для достижения максимальной точности тестируйте в собственном контексте, а не в инструментах проектирования.

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

Последовательность тестирования иконки Curiosity:

Сетки + Принципы + Правила

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

Лично для меня сетки иконок – скорее вспомогательный элемент, а принципы и правила важнее всего:

Примеры принципов из семейства иконок Phosphor:

• Понятность. Прежде всего, будьте понятны. Сделайте иконку узнаваемой и читаемой. Никогда не жертвуйте понятностью изображения иконки.
• Краткость. Используйте как можно меньше деталей. Стиль Phosphor – редуктивный. Будьте лаконичны и целенаправленны в каждом штрихе, чтобы передать суть изображаемого.
• Характер. Будьте оригинальны. Добавляйте уникальные детали экономно, чтобы не быть слишком строгим.

—

Пример технических правил семейства иконок Phosphor:

• Используйте холст 48 x 48px
• Используйте обводку по центру 1.5px
• Используйте закругленные концевые заглавные буквы
• Используйте непрерывные штрихи, если разорванные сегменты не нужны для понимания
• Используйте прямые сегменты, идеальные дуги и угол наклона 15°, где возможно
• Отрегулируйте кривые, когда это необходимо для соблюдения принципов дизайна.
• Используйте целые, четные приращения чисел для измерений, где это возможно; при необходимости округлите до 1px или 0,5px
• Начните со следующих ключевых линий фигуры: круги 28 x 28px, квадраты 25 x 25px, прямоугольники в ландшафтной ориентации 28 x 22px, прямоугольники в портретной ориентации 22 x 28px
• Сохраняйте область обрезки толщиной 6px

Это руководящие принципы, которые развиваются по мере того, как мы узнаем, что работает, а что нет. Не возражайте против проведения итерации и соответствующим образом обновите свою документацию.

Вывод

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

Спецификации сетки иконок

Apple

• Apple Design Resources: Официальные шаблоны, которые включают размеры холста для иконок App Store (но, к сожалению, без векторных сеток)

Google

• Material System Icon Keyline Shapes: Сетка для системных иконок, которые используются в интерфейсах продукта.
• Google Play icon design specifications: спецификации и шаблоны для иконок приложений, используемых в Play Store.
• Adaptive icons and Android icons: спецификации иконок приложений, используемых в лаунчере (главный экран, панель приложений).
• Material Product Icon Keyline Shapes: сетка для иконок продуктов, которые сопоставляются с Google Play и адаптивными иконками лаунчера, указанными выше.

IBM

• IBM’s UI Icons: Четкое руководство по сетке иконок и отличные наглядные пособия

🙏 Спасибо: Toby Fried, Monica Chang, Tate Chow и Christine Lee

что за зверь (объяснение, примеры, галерея)

Вероятно, вы не раз встречали словосочетание «материальный дизайн». Концепция материал дизайн не новая и уже довольно крепко устоявшаяся на рынке веб дизайна, в первую очередь, благодаря своему обращению к пользовательскому опыту. Материальный дизайн впервые был представлен летом 2015 года компанией Google, и с тех пор является неразрывно связанным с этой компанией понятием. Какие его отличительные черты, основные принципы, и так ли он хорош, как о нем поют? Об этом далее в статье.

Материальный дизайн – это не просто идея, он в свое время заставил дизайнеров полностью пересмотреть взгляды на новые шаблоны сайтов и на сам процесс создания веб-сайтов и приложений. Современные сайты вовсю используют схемы проектирования и документации по материальному дизайну от Google. Но прежде чем перейти к десерту, определим понятие материал дизайна, его цели и основные характеристики.

Что такое материальный дизайн?

Материальный дизайн – это графический язык и стиль в дизайне, созданный командой разработчиков Google, чтобы помочь дизайнерам создавать сайты и приложения, которые будут доступными, практичными и полезными. Концепция основана на живой документации, которая находится в общем доступе и может быть использована любым пользователем, интересующимся концепцией материального дизайна. По сей день документация постоянно обновляется, чтобы отражать изменения в сфере дизайна  и разработки. Благодаря этому материальный дизайн остается актуальным и постоянно развивается как направление.

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

Цели материального дизайна

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

Принципы материального дизайна:

1. Материальный дизайн это метафора: визуальные сигналы и все графические элементы оформления должны быть основаны и взаимосвязаны с окружающей действительностью, материальным миром.
2. Графичность, четкость, целенаправленность: базовая теория дизайна (использование типов, сетки, организация пространства, масштаб, пропорции, цвет и изображения) должна определять визуальные эффекты и составлять визуальную основу материал дизайна.
3. Каждое перемещение или действие имеет значение: перемещение объектов или другие совершаемые действия не должны мешать пользователю, напротив, они должны обеспечивать удобство и согласованность совершаемых действий.

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

Все эти рекомендации основываются на основных свойствах материального дизайна. Самое главное то, что материальный дизайн основан на реальности, в нем объекты находятся в почти трехмерном пространстве. С точки зрения эстетики, материальный дизайн находится где-то между шкалой плоского дизайна (flat design) и скевоморфизмом.

Цвет и типографика материального дизайна

Цвета в материальном дизайне имеют много общего с цветами плоского дизайна. Палитры матириал довольно смелые и яркие. Шрифты, так же как в плоском дизайне, простые без засечек.

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

А лучшее в цветовой концепции материального дизайна  это использование четкого контраста. Для удобства пользователей Google предоставляет полную цветовую палитру с образцами, доступными для скачивания. Концепции цвета настолько просты, что моет возникнуть вопрос, не думает ли Google, что дизайнеры напрочь забыли теорию цвета.

Рекомендации по выбору и использованию шрифтов также довольно базовые и простые. Шрифт по умолчанию для всех приложений – Roboto – доступен для скачивания по ссылке, там же можно найти  таблицу сочетания и подбора шрифтов.

Шаблоны, структура и дизайн

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

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

Базовые элементы материал дизайна

Каждый элемент, из которого может состоять сайт, созданный в стиле материал, подробно описан в документации. Начиная от  того, как его создать и на что он должен быть похож, до его места, способа и момента появления на экране пользователя. В общем, трудно придумать что-то такое, что создатели упустили либо же не. Список включает 19 основных структурных компонентов, ниже наведем некоторые из них.

• Нижний экран (нижние слои дизайна)
• Кнопки
• Карты
• Диалоги
• Разделители
• Сетки
• Списки
• Меню
• Полосы прогресса и активности
• Слайдеры
• Подзаголовки
• Переключатели
• Вкладки
• Текстовые поля
• Всплывающие окна

Дизайнеры, которым нравится внешний вид предложенных компонентов, могут даже загрузить их исходники для Photoshop, Sketch или Illustrator. Иконки и другие детали идут в паре со стилями и подстраиваются под выбранный шаблон.

Удобство, доступность и пользовательский опыт

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

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

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

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

10 Ресурсов по материальному дизайну

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

1. Наборы элементов в стиле материал дизайн для смартфонов и других мобильных устройств (см. ниже).
2. Иконки в стиле материал.
3. Цветовые схемы и палетки.
4. Материальный дизайн для Bootstrap.
5. Материальный дизайн для AngularJS.
6. Платформа по созданию материал дизайна Materialize.
7. Чеклист материального дизайна для Android.

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

Материальный дизайн от UXPin

Материал дизайн от Creative Tim

Бесплатная подборка материал от Designtory

UIDE – бесплатный материал скетч от Mateusz Dembek

Google ресурс скетчей по материальному дизайну

L Bootstrap материальный дизайн в стиле Android от Виталия Чернеги

Скетч ресурс по материальному дизайну от Boilerplate

Материальный дизайн для EL Passion

Froala блоки в стиле материал

Бесплатный Landing 1.0 в материальном стиле

Мобильный материальный дизайн

Android Nougat бесмлатный GUIдизайн

Материальный дизайн для мобильных приложений

avsc материал дизайн

Материальный дизайн от PsdRepo

Материальный дизайн для музыкальных приложений от Divan Raj

UI материал дизайн от Jakub Kośla

Маткриальный дизайн для андроид от Ivan Bjelajac

Материал дизайн от Ultralinx

Мобильный материальный дизайн от Emma Drews

Бесплатная материал подборка от Adrian Goia

Материал дизайн от UI8

Материальный дизайн для Photoshop от Psddd

Android материал дизай PSD от Nine Hertz

Другие подборки материального дизайна, которые могут быть полезными

Station интерактивный материал дизайн от Nelson Sakwa

Виджеты в стиле материал от Elad Izak

Материал скетч от Benjamin Schmidt

Цифры в стиле материал, PSD от Crunk C

Рецепты в стиле материал – мокап для приложения от Mitchell Millsaps

Часть 2: Цветовый схеммы материал дизайна

Стиль – цвет: официальное руководство Google

Google инструмент для подбора цветов

Инструмент для подбора цветовых схем

materialuicolors цветовые схеммы

Инструмент подбора цветов материал Color Picker

Часть 3: Материал дизайн иконки

Официальная коллекция материал иконок от Google

Материал дизайн шрифты от Austin Andrews

Материал дизайн PSD иконки от Sergey

Коллекция материальных иконок от Jurre Houtkamp

Материальные иконки в PSD от Anton Kosolapov

Материальный дизайн для Powerpoint от Kyle Ledbetter

Подводим итоги

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

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

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

Купить хостинг

иконки — Условия использования иконок Material Design

materialdesignicons.com — Material Design Icons from the Community

License

Templates — WTFPL

Community Icons — SIL Open Font License 1.1

Google Material Design Icons — Apache License 2.0

Здесь на вопрос о SVG Templarian ссылается на следующий источник

There are many parts of this project and supporting projects covered under various licenses.

Material Design Icons Community SIL Open Font License 1.1

Material Design Icons Google Apache License 2.0 1

Material Design Icons SVG MIT License

Material Design Icons SCSS/CSS MIT License

Material Design Icons Site MIT License

Icon Templates WTFPL

Note: This does not cover third party plugins, components, etc that are shown in the documentation. Please reference their GitHub pages for license clarification.

If anyone has time and wants to explain this all in more detail please feel free to edit on GitHub and submit a pull request.

License has changed a couple times over the years, so this may vary depending on version?

Google’s official icon set.

Open Source

The icons are available under the Apache License Version 2.0. We’d love attribution in your app’s «about» screen, but it’s not required. The only thing we ask is that you not re-sell these icons.

Значки доступны под лицензией Apache версии 2.0. Нам понравится атрибуция на экране вашего приложения, но это не требуется. Единственное, что мы просим, это то, что вы не перепродаете эти значки.

Источник

Также

We have made these icons available for you to incorporate into your products under the Apache License Version 2.0. Feel free to remix and re-share these icons and documentation in your products.

Мы сделали эти значки доступными для вас для включения в ваши продукты в соответствии с версией Apache версии 2.0. Не стесняйтесь пересобирать и переименовывать эти значки и документацию в своих продуктах.

10 наборов цветных иконок в стиле Material Design / Иконки / Постовой

Не так давно Google представила свою новую концепцию пользовательских интерфейсов под названием Material Design. Это настолько масштабная идея, что рассказать о ней в рамках одной статьи просто невозможно. Мы не будем пытаться объять необъятное, а попробуем рассмотреть ее с точки зрения очень важной ее составляющей — графических объектов, часто для краткости и по традиции называемых иконками.

В концепции Google Material Design они являются неотъемлемой и очень важной частью взаимодействия с пользователем, будь то веб-страница или десктопное приложение. Согласно этой концепции у пользователя должно быть интуитивное ощущение работы с реальными физическими объектами в рамках цифровой среды. При относительно небольших размерах они должны быть ясные и четкие, обладать гармоничной цветовой гаммой и соблюдать определенный баланс между количеством свободного пространства и мелких деталей. Кроме того, необходимо учитывать, что веб-изображения должны одинаково привлекательно смотреться на разных устройствах и операционных системах.

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

Web Material Icons Designs

Иконки услуг веб-студии в стиле Flat

Material Design иконки для хостинг-провайдера

Angular Material Design иконки

Изометрические иконки в стиле Materials Design

Иконки-аватары в стиле Material Design

Inspired Materials of Master Set Icons

Material FaceBook от GIULIO Bart172

Анимированные Google Maps и Street-View иконки

Адаптивные иконки в Material Design палитре

Google · GitHub

Google ❤️ Открытый исходный код

Репозиторий

• Python Apache-2.0 16 371 304 30 5000+ Обновлено 20 марта 2021 г.

• совесть

  Conscrypt — это поставщик безопасности Java, который реализует части расширения криптографии Java и расширения защищенного сокета Java.

  Ява 175 873 99 (Требуется помощь по 3 вопросам) 6 Обновлено 20 марта 2021 г.
• Старларк Apache-2.0 32 143 3 3 Обновлено 20 марта 2021 г.

• игрок на шака

  Библиотека проигрывателя JavaScript / клиент DASH и HLS / проигрыватель MSE-EME

  JavaScript Апач-2.0 940 4807 313 23 Обновлено 20 марта 2021 г.
• C ++ Apache-2.0 137 639 262 (13 вопросов, нужна помощь) 23 Обновлено 20 марта 2021 г.
• Идти Апач-2.0 76 140 3 1 Обновлено 20 марта 2021 г.

• орбита

  Профилировщик производительности C / C ++

  C ++ BSD-2-Clause 145 1,598 22 12 Обновлено 20 марта 2021 г.
• Python Апач-2.0 1 3 0 0 Обновлено 20 марта 2021 г.
• Идти Apache-2.0 126 869 79 (Требуется помощь по 2 вопросам) 9 Обновлено 20 марта 2021 г.

• android-fhir

  Android FHIR SDK — это библиотека Android для создания автономных медицинских приложений, ориентированных прежде всего на мобильные устройства, с использованием ресурсов FHIR на Android.

• плоские буферы

  FlatBuffers: эффективная библиотека сериализации памяти

  C ++ Apache-2.0 2,465 15 934 134 (Требуется помощь по 1 проблеме) 35 год Обновлено 20 марта 2021 г.

• тупица

  OSS-Fuzz — непрерывный фаззинг для программного обеспечения с открытым исходным кодом.

  Ракушка Apache-2.0 1,231 6 100 155 120 Обновлено 20 марта 2021 г.

• БОЛЬШАЯ скамейка

  Совместный тест Beyond the Imitation Game для огромных языковых моделей

  Python Апач-2.0 94 152 8 76 Обновлено 20 марта 2021 г.

• mono_repo.dart

  Позволяет легко управлять репозиториями с несколькими пакетами Dart

  Дротик BSD-3-Clause 21 год 78 31 год (По 11 вопросам нужна помощь) 1 Обновлено 20 марта 2021 г.

• autocxx

  Инструмент для безопасного эргономичного взаимодействия Rust / C ++ на основе существующих заголовков C ++

• Starlark-go

  Starlark in Go: язык конфигурации Starlark, реализованный в Go

  Идти BSD-3-Clause 101 1,242 28 год 8 Обновлено 20 марта 2021 г.

• груз-срыв

  Сгенерируйте Bazel BUILD из зависимостей Cargo!

  Ржавчина Апач-2.0 66 288 76 9 Обновлено 20 марта 2021 г.

• кружка

  Небольшая служебная библиотека Java 8, дополняющая Guava (BiStream, Substring, MoreStreams, Parallelizer).

  Ява Apache-2.0 44 год 236 0 0 Обновлено 20 марта 2021 г.
• Python Апач-2.0 427 4 465 160 5 Обновлено 20 марта 2021 г.
• Машинопись Apache-2.0 0 4 0 5 Обновлено 20 марта 2021 г.
• Идти Апач-2.0 202 975 50 (Требуется помощь по 3 вопросам) 18 Обновлено 20 марта 2021 г.

• цифровые здания

  Цифровые здания (онтология и SDK) в настоящее время используются Google внутри компании для управления нашими собственными зданиями.

  Python Апач-2.0 39 139 14 (6 вопросов, нужна помощь) 17 Обновлено 20 марта 2021 г.

• go-github

  Библиотека Go для доступа к GitHub API

  Идти BSD-3-Clause 1,481 7 241 59 (По 5 вопросам нужна помощь) 3 Обновлено 20 марта 2021 г.

• googletest

  Googletest — Google Testing and Mocking Framework

  C ++ BSD-3-Clause 7 304 21 425 135 (6 вопросов, нужна помощь) 32 Обновлено 20 марта 2021 г.

• Syzkaller

  syzkaller — это неконтролируемый фаззер ядра с управляемым покрытием

• mozc

  Mozc — японский редактор методов ввода, предназначенный для работы на нескольких платформах.

  C ++ BSD-3-Clause 168 832 115 2 Обновлено 20 марта 2021 г.

• CodeCity

  Code City от Google — это среда социального программирования.Он предлагает виртуальный мир, вдохновленный комиксами, где программисты могут совместно писать код.

  JavaScript Apache-2.0 20 130 60 0 Обновлено 20 марта 2021 г.

• таймскетч

  Совместная криминалистическая хронология анализа

  Python Апач-2.0 348 1,532 148 (6 вопросов, нужна помощь) 8 Обновлено 20 марта 2021 г.
• CC-BY-4.0 77 42 0 8 Обновлено 20 марта 2021 г.
• Ява Апач-2.0 1,063 5 874 827 (26 вопросов нуждаются в помощи) 5 Обновлено 20 марта 2021 г.

Значки материалов — Material-UI

AcUnit

AccessAlarm

AccessAlarms

AccessTime

Доступность

AccessibilityNew

Accessible

AccessibleForward

Account

000 Account 9Balance

000 Account

Добавить

AddAPhoto

AddAlarm

AddAlert

AddBox

AddCircle

AddCircleOutline

AddComment

AddIcCall

AddLocation

AddPhotoAlternate

AddShoppingCart

AddToHomeScreen

AddToPhotos

AddToQueue

Настройка

AirlineSeatFlat

AirlineSeatFlatAngled

AirlineSeatIndividualSuite

AirlineSeatLegroomExtra

AirlineSeatLegroomNormal

AirlineLegroomReduce г

AirlineSeatReclineExtra

AirlineSeatReclineNormal

AirplanemodeActive

AirplanemodeInactive

ротацию

AirportShuttle

Сигнализация

AlarmAdd

AlarmOff

AlarmOn

Альбом

AllInbox

AllInclusive

ALLOUT

ALTERNATEEMAIL

AmpStories

Android

Объявление

Квартира

Apple,

приложения

Архив

ArrowBack

ArrowBackIos

ArrowDownward

ArrowDropDown

ArrowDropDownCircle

ArrowDropUp

ArrowForward

ArrowForwardIos

ArrowLeft

ArrowRight

ArrowRightAlt

ArrowUpward

ArtTrack

AspectRatio

Assessment

Assignment

AssignmentInd

Assignm entLate

AssignmentReturn

AssignmentReturned

AssignmentTurnedIn

Assistant

AssistantPhoto

Atm

AttachFile

AttachMoney

Вложение

Audiotrack

Autorenew

AvTimer

Backspace

Резервный

Избирательные

BarChart

Ванна

Battery20

Battery30

Battery50

Battery60

Battery80

Battery90

BatteryAlert

BatteryCharging20

BatteryCharging30

BatteryCharging50

BatteryCharging60

BatteryCharging80

BatteryCharging90

BatteryChargingFull

BatteryFull

BatteryStd

BatteryUnknown

BeachAccess

Beenhere

Block

Bluetooth

BluetoothAudio

BluetoothConnected

BluetoothDisabled

BluetoothSearching

BlurCircular

BlurLinear

BlurOff

BlurOn

Книга

Закладка

BookmarkBorder

закладки

BorderAll

BorderBottom

BorderClear

BorderColor

BorderHorizontal

BorderInner

BorderLeft

BorderOuter

BorderRight

BorderStyle

BorderTop

BorderVertical

BrandingWatermark

освещенностью1

Brightness2

Brightness3

Brightness4

Brightness5

Brightness6

Brightness7

BrightnessAuto

BrightnessHigh

Яркость Низкая

Яркость Средняя

BrokenImage

Кисть

BubbleChart

BugReport

B uild

BurstMode

Бизнес-

BusinessCenter

Сохраненная

Cake

CalendarToday

CalendarViewDay

Позвоните

CallEnd

CallMade

CallMerge

CallMissed

CallMissedOutgoing

CallReceived

CallSplit

CallToAction

камера

CameraAlt

CameraEnhance

CameraFront

CameraRear

CameraRoll

Отменить

CancelPresentation

CancelScheduleSend

CardGiftcard

CardMembership

CardTravel

Казино

Cast

CastConnected

CastForEducation

Категория

CellWifi

CenterFocusStrong

CenterFocusWeak

ChangeHistory

Chat

ChatBubble

ChatBubbleOutline

CheckBox

CheckBoxOutlineBlank

CheckCircle

CheckCircleOutline

ChevronLeft

ChevronRight

уход за детьми

ChildFriendly

ChromeReaderMode

Класс

Ясно

ClearAll

Закрыть

ClosedCaption

Облако

CloudCircle

CloudDone

CloudDownload

CloudOff

CloudQueue

CloudUpload

Код

Коллекции

КоллекцииBookmark

ColorLens

000

Сравнение компьютеров

Color Comment

Сравнение компьютеров Номер подтверждения

Контактная почта

Контактный телефон

Контактная поддержка

Бесконтактная

Контакты

ControlCamera

ControlPoint

ControlPointDuplicate

Copyright

Создание

CreateNewFolder

CreditCard

Crop

Crop169

Crop32

Crop54

Crop75

CropDin

CropFree

CropLandscape

CropOriginal

CropPortrait

CropRotate

CropSquare

Dashboard

DataUsage

DateRange

Deck

Dehaze

Удалить

DeleteForever

DeleteOutline

DeleteSweep

DepartureBoard

Описание

DesktopAccessDisabled

DesktopMac

DesktopWindows

Подробности

DeveloperBoard

DeveloperMode

DeviceHub

DeviceUnknown

Devices

Devices Other

DialerSip

Dialpad

Directions

DirectionsBike

DirectionsBoat

DirectionsBus

DirectionsCar

DirectionsRailway

DirectionsRun

DirectionsSubway

DirectionsTransit

DirectionsWalk

DiscFull

Dns

Dock

Домен

DomainDisabled

Done

DoneAll

DoneOutline

DonutLarge

DonutSmall

DoubleArrow

Шашки

DragHandle

DragIndicator

DriveEta

Duo

Dvr

DynamicFeed

Eco

Редактировать

EditAttributes

EditLocation

Eject

E-mail

EmojiEmotions

EmojiEvents

EmojiFlags

EmojiFood Напиток

EmojiNature

EmojiObjects

EmojiPeople

EmojiSymbols

EmojiTrans rtation

EnhancedEncryption

Эквалайзер

Ошибка

ErrorOutline

Евро

EuroSymbol

EvStation

Event

EventAvailable

EventBusy

EventNote

EventSeat

ExitToApp

ExpandLess

ExpandMore

Явная

Explore

ExploreOff

Экспозиция

ExposureNeg1

ExposureNeg2

ExposurePlus1

ExposurePlus2

ExposureZero

Удлинитель

Face

Facebook

FastForward

FastRewind

Фастфуд

Любимый

FavoriteBorder

FeaturedPlayList

FeaturedVideo

Обратная связь

FiberDvr

FiberManualRecord

FiberNew

FiberPin

FiberSmartRecord

FileCopy

Фильтр

Фильтр1

Фильтр2

Фильтр3

Фильтр4

Фильтр5

Фильтр6

Фильтр7

Фильтр8

Фильтр9

Фильтр9Plus

Фильтр

Фильтр 9Plus

BAnd

Фильтр 9Plus

BAnd

FilterNone

FilterTiltShift

FilterVintage

FindInPage

FindReplace

Отпечаток пальца

Fireplace

FirstPage

FirstPage

Flag

FlightTakeoff

Flip

FlipCameraAndroid

FlipCameraIos

FlipToBack

FlipToFront

Папка

FolderOpen

FolderShared

FontDownload

FormatAlignCenter

FormatAlignJustify

FormatAlignLeft

FormatAlignRight

FormatBold

FormatClear

FormatColorFill

FormatColorReset

FormatColorText

FormatIndentDecrease

FormatIndentIncrease

FormatItalic

FormatLineSpacing

FormatListBulleted

FormatListNumbered

FormatListNumberedRtl

FormatPaint

FormatQuote

FormatShapes

FormatSize

FormatStrikethrough

FormatTextdirectionLToR

FormatTextdirectionRToL

FormatUnderlined

Форум

Форвард

Forward10

Forward30

Forward5

FourK

FreeBreakfast

Fullscreen

Полный экран Выход

Функции

GTransla т.е

Gamepad

Игры

Молоток

Жест

GetApp

Gif

GitHub

Golfcourse

GpsFixed

GpsNotFixed

GpsOff

Ранг

Градиент

Зерно

GraphicEq

GridOff

GridOn

Группа

GroupAdd

групповой работы

Hd

HdrOff

HdrOn

HdrStrong

HdrWeak

гарнитура

HeadsetMic

Healing

Слух

Высота

Помощь

HelpOutline

HighQuality

Highlight

HighlightOff

История

Home

HomeWork

HorizontalSplit

HotTub

Hotel

HourglassEmpty

Hourglass

000

000 9Real House

Https

Image

ImageAspectRatio

ImageSearch

ImportContacts

ImportExport

ImportantDevices

Входящие

IndeterminateCheckBox

Info

Входной

InsertChart

InsertComment

InsertDriveFile

InsertEmoticon

InsertInvitation

InsertLink

InsertPhoto

Instagram

InvertColors

InvertColorsOff

Iso

Клавиатура

KeyboardArrowDown

KeyboardArrowLeft

KeyboardArrowRight

KeyboardArrowUp

KeyboardBackspace

KeyboardCapslock

KeyboardHide

KeyboardReturn

KeyboardTab

KeyboardVoice

KingBed

Кухня

Label

LabelImportant

LabelOff

Lands накидка

Язык

Laptop

LaptopChromebook

LaptopMac

LaptopWindows

Lastpage

Запуск

Слои

LayersClear

LeakAdd

LeakRemove

Объектив

LibraryAdd

LibraryAddCheck

LibraryBooks

LibraryMusic

LineStyle

Веса линий

LinearScale

Ссылка

LinkOff

LinkedCamera

LinkedIn

Список

ListAlt

LiveHelp

LIVETV

LocalActivity

LocalAirport

LocalAtm

LocalBar

LocalCafe

LocalCarWash

LocalConvenienceStore

LocalDining

LocalDrink

LocalFlorist

LocalGasStation

LocalGroceryStore

LocalHospital

LocalHotel

LocalLibrary

LocalMall

LocalMovies

LocalOffer

LocalParking

LocalPharmacy

Localphone

LocalPizza

LocalPlay

LocalPostOffice

LocalPrintshop

LocalSee

LocalShipping

LocalTaxi

LocationCity

LocationDisabled

LocationOff

LocationOn

LocationSearching

Lock

LockOpen

Looks

Looks3

Looks4

Looks5

Looks6

Look2 Почта

MailOutline

Карта

Markunread

MarkunreadMailbox

Увеличить

MeetingRoom

Память

Меню

MenuBook 900 03

MenuOpen

MergeType

Сообщение

Mic

MicNone

MicOff

Минимизация

MissedVideoCall

Mms

MobileFriendly

MobileOff

MobileScreenShare

ModeComment

MonetizationOn

Деньги

MoneyOff

MonochromePhotos

Настроение

MoodBad

Более

MoreHoriz

MoreVert

Мотоцикл

Mouse

MoveToInbox

Фильм

MovieCreation

MovieFilter

MultilineChart

Музей

MusicNote

MusicOff

музыкальный видеоклип

MyLocation

Природа

NaturePeople

NavigateBefore

NavigateNext

Navigation

NearMe

NetworkCell

NetworkCheck

NetworkLocked 9 0003

NetworkWifi

NewReleases

NextWeek

Nfc

NightsStay

NoEncryption

NoMeetingRoom

NoSim

NotInterested

NotListedLocation

Примечание

NoteAdd

Notes

NotificationImportant

Уведомления

NotificationsActive

NotificationsNone

NotificationsOff

NotificationsPaused

OfflineBolt

OfflinePin

OndemandVideo

Непрозрачность

OpenInBrowser

OpenInNew

OpenWith

OutdoorGrill

Страницы

Pageview

Palette

PanTool

Panorama

PanoramaFishEye

Панорама по горизонтали

Панорама по вертикали

PanoramaWideAngle

PartyMode

Pause

PauseCircleFilled

Pau seCircleOutline

PausePresentation

Оплата

Люди

PeopleAlt

PeopleOutline

PermCameraMic

PermContactCalendar

PermDataSetting

PermDeviceInformation

PermIdentity

PermMedia

PermPhoneMsg

PermScanWifi

Person

PersonAdd

PersonAddDisabled

PersonOutline

PersonPin

PersonPinCircle

PersonalVideo

Домашние животные

Телефон

PhoneAndroid

PhoneBluetoothSpeaker

PhoneCallback

PhoneDisabled

PhoneEnabled

PhoneForwarded

PhoneInTalk

PhoneIphone

PhoneLocked

PhoneMissed

PhonePaused

Phonelink

Phonelink Erase

PhonelinkLock

Phonelink Off

Phonelink Кольцо

PhonelinkSetup

Фото

PhotoAlbum

фотоаппаратом

PhotoFilter

PhotoLibrary

PhotoSizeSelectActual

PhotoSizeSelectLarge

PhotoSizeSelectSmall

PictureAsPdf

PictureInPicture

PictureInPictureAlt

PieChart

PinDrop

Pinterest

Место

PlayArrow

PlayCircleFilled

PlayCircleFilledWhite

PlayCircleOutline

PlayForWork

PlaylistAdd

PlaylistAddCheck

PlaylistPlay

PlusOne

политики

Опрос

Polymer

бассейн

PortableWifiOff

Портрет

PostAdd

мощность

PowerInput

PowerOff

PowerSettingsNew

Беременная женщина

PresentToAll

Печать

PriorityHigh

Публичная

Опубликовать

QueryBuilder

QuestionAnswer

Очередь

QueueMusic

QueuePlayNext

Радио

RadioButtonChecked

RadioButtonUnchecked

RateReview

квитанций

RecentActors

RecordVoiceOver

Reddit

Погасить

Redo

Обновить

Удалить

RemoveCircle

RemoveCircleOutline

RemoveFromQueue

RemoveRedEye

RemoveShoppingCart

Reorder

Repeat

RepeatOne

Replay

Replay10

Replay30

Replay5

Ответить

ОтветитьВсе

Отчет

ReportOff

ReportProblem

Ресторан

RestaurantMenu

Восстановить

RestoreFromTras ч

RestorePage

RingVolume

Номер

RoomService

Rotate90DegreesCcw

RotateLeft

RotateRight

Router

Гребной

RssFeed

RvHookup

Satellite

Сохранить

SaveAlt

Сканер

диаграммы рассеяния

Расписание

Школа

Score

ScreenLockLandscape

ScreenLockPortrait

ScreenLockRotation

ScreenRotation

ScreenShare

SDCARD

SdStorage

Поиск

Безопасность

SelectAll

Отправить

SentimentDissatisfied

SentimentSatisfied

SentimentSatisfiedAlt

SentimentVeryDissatisfied

SentimentVerySatisfied

Settings

SettingsApplications

SettingsBackupRestore

SettingsBluetoot ч

SettingsBrightness

SettingsCell

SettingsEthernet

SettingsInputAntenna

SettingsInputComponent

SettingsInputComposite

SettingsInputHdmi

SettingsInputSvideo

SettingsOverscan

SettingsPhone

SettingsPower

SettingsRemote

SettingsSystemDaydream

SettingsVoice

Share

Магазин

ShopTwo

ShoppingBasket

ShoppingCart

ShortText

ShowChart

Перемешать

ShutterSpeed ​​

SignalCellular0Bar

SignalCellular1Bar

SignalCellular2Bar

SignalCellular3Bar

SignalCellular4Bar

SignalCellularAlt

SignalCellularConnectedNoInternet0Bar

SignalCellularConnectedNoInternet1Bar

SignalCellularConnectedNoInternet2Bar

Sig nalCellularConnectedNoInternet3Bar

SignalCellularConnectedNoInternet4Bar

SignalCellularNoSim

SignalCellularNull

SignalCellularOff

SignalWifi0Bar

SignalWifi1Bar

SignalWifi1BarLock

SignalWifi2Bar

SignalWifi2BarLock

SignalWifi3Bar

SignalWifi3BarLock

SignalWifi4Bar

SignalWifi4BarLock

SignalWifiOff

Simcard

SingleBed

SkipNext

SkipPrevious

Slideshow

SlowMotionVideo

Смартфон

Smokefree

SmokingRooms

Sms

SmsFailed

Snooze

Сортировать

SortByAlpha

Spa

ПРОБЕЛ

Speaker

SpeakerGroup

SpeakerNotes

SpeakerNotesOff

SpeakerPhone

Speed ​​

Spel lcheck

Спорт

SportsBaseball

SportsBasketball

SportsCricket

SportsEsports

SportsFootball

SportsGolf

SportsHandball

SportsHockey

SportsKabaddi

SportsMma

SportsMotorsports

SportsRugby

SportsSoccer

SportsTennis

SportsVolleyball

SquareFoot

Star

StarBorder

StarHalf

StarOutline

StarRate

звезды

StayCurrentLandscape

StayCurrentPortrait

StayPrimaryLandscape

StayPrimaryPortrait

Стоп

StopScreenShare

Хранение

магазин

StoreMallDirectory

Storefront

Выпрямить

Streetview

ЗачеркнутыйS

Стиль

ПодкаталогArrowLeft

SubdirectoryArrowRight

Предметные

подписки

Субтитры

Метро

SupervisedUserCircle

SupervisorAccount

объёмный звук

SwapCalls

SwapHoriz

SwapHorizontalCircle

SwapVert

SwapVerticalCircle

SwitchCamera

SwitchVideo

синхронизации

SyncAlt

SyncDisabled

SyncProblem

SystemUpdate

SystemUpdateAlt

Tab

TabUnselected

TableChart

Tablet

TabletAndroid

TabletMac

TagFaces

TapAndPlay

Телеграмма

Рельефный

Текстовые поля

TextFormat

TextRotateUp

TextRotateVertical

TextRotationAngledown

TextRotationAngleup

TextRotationDown

TextRotationN один

Textsms

текстуры

Театры

ThreeDRotation

Threesixty

ThumbDown

ThumbDownAlt

ThumbUp

ThumbUpAlt

ThumbsUpDown

TimeToLeave

Timelapse

Линия времени

Таймер

Timer10

Таймер 3

TimerOff

Название

Toc

Сегодня

ToggleOff

ToggleOn

Toll

Тональность

TouchApp

Toys

000 Traffic 9000 TransChanges

Traffic Transhanges

Translate

TrendingDown

TrendingFlat

TrendingUp

TripOrigin

Tune

TurnedIn

TurnedInNot

Tv

TvOff

Разархивировать

Отменить

UnfoldLess

UnfoldMore

Отказаться

Обновление

Usb

VerifiedUser

VerticalAlignBottom

VerticalAlignCenter

VerticalAlignTop

VerticalSplit

Вибрация

VideoCall

VideoLabel

VideoLibrary

VideoCAM

VideocamOff

VideogameAsset

ViewAgenda

ViewArray

ViewCarousel

ViewColumn

ViewComfy

ViewCompact

ViewDay

ViewHeadline

ViewList

ViewModule

ViewQuilt

ViewStream

ViewWeek

Vignette

Visibility

VisibilityOff

VoiceChat

VoiceOverOff

Voicemail

VolumeDown

VolumeMute

Vol umeOff

VolumeUp

VpnKey

VpnLock

Обои

Предупреждение

Часы

WatchLater

Волны

WbAuto

WbCloudy

WbIncandescent

WbIridescent

WbSunny

Wc

Web

WebAsset

выходные

WhatsApp

Whatshot

WhereToVote

Widgets

Wifi

WifiLock

WifiOff

WifiTethering

Работа

WorkOff

WorkOutline

WrapText

YouTube

YoutubeSearchedFor

ZoomIn

ZoomOut

ZoomOutMap

Иконочных шрифтов — Vuetify

Vuetify поставляется с начальной загрузкой с поддержкой иконок Material Design, иконок материалов, Font Awesome 4 и Font Awesome 5.По умолчанию приложения будут использовать значки Material Design.

# Установка шрифтов значков

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

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

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

Это шрифт значков по умолчанию для Vuetify.Вы можете включить его через CDN:

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

  $ yarn add @ mdi / font -D
// ИЛИ ЖЕ
$ npm install @ mdi / font -D
  

 

импортировать '@ mdi / font / css / materialdesignicons.css'
импортировать Vue из 'vue'
импортировать Vuetify из vuetify / lib

Vue.use (Vuetify)

экспортировать новый Vuetify по умолчанию ({
  icons: {
    iconfont: 'mdi',
  },
})
  

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

Используйте пути SVG, указанные в @ mdi / js.Это рекомендуемая установка при оптимизации вашего приложения для производства. Вам нужно включить ТОЛЬКО , если вы планируете использовать больше, чем значки по умолчанию.

  $ пряжа add @ mdi / js -D
// ИЛИ ЖЕ
$ npm install @ mdi / js -D
  

Укажите mdiSvg iconfont:

 

импортировать Vue из 'vue'
импортировать Vuetify из vuetify / lib

Vue.use (Vuetify)

экспортировать новый Vuetify по умолчанию ({
  icons: {
    iconfont: 'mdiSvg',
  },
})
  

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

 

<шаблон>
   {{svgPath}} 


<сценарий>
  импортировать {mdiAccount} из '@ mdi / js'

  экспорт по умолчанию {
    данные: () => ({
      svgPath: mdiAccount
    }),
  }

  

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

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

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

  $ yarn add material-design-icons-iconfont -D
// ИЛИ ЖЕ
$ npm установить материал-дизайн-значки-значок-шрифт -D
  

После установки пакета импортируйте его в свой основной файл js. Обычно это main.js , index.js или app.js , расположенный в папке src / . Если вы используете приложение SSR, у вас может быть клиент .js или файл entry-client.js .

 

import 'material-design-icons-iconfont / dist / material-design-icons.css'
импортировать Vue из 'vue'
импортировать Vuetify из vuetify / lib

Vue.use (Vuetify)

экспортировать новый Vuetify по умолчанию ({
  icons: {
    iconfont: 'md',
  },
})
  

# Font Awesome 4 Icons

То же, что и выше. Самый простой способ проверить это в своем проекте — установить FontAwesome через cdn:

Установка FontAwesome 4 такая же, как и его более новая версия, только из другого репозитория. Вы будете нацелены на репозиторий с отличным шрифтом , а не на репозиторий @fortawesome .

  $ пряжа добавить [email protected] -D
// ИЛИ ЖЕ
$ npm установить [email protected] -D
  

Не забывайте, ваш проект должен будет распознавать CSS. Если вы используете webpack, установите и настройте загрузчик css.

 

импортировать 'font-awesome / css / font-awesome.min.css'
импортировать Vue из 'vue'
импортировать Vuetify из vuetify / lib

Vue.use (Vuetify)

экспортировать новый Vuetify по умолчанию ({
  icons: {
    iconfont: 'fa4',
  },
})
  

# Font Awesome 5 Icons

Самый простой способ начать работу с FontAwesome - использовать компакт-диск. В заголовке вашего основного index.html поместите этот фрагмент:

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

  $ yarn add @ fortawesome / fontawesome-free -D
// ИЛИ ЖЕ
$ npm install @ fortawesome / fontawesome-free -D
  

В основной точке входа просто импортируйте all.css пакета. Если вы используете настроенный проект webpack, вам необходимо настроить поддержку файлов .css с помощью загрузчика css webpack.Если вы уже используете Vue CLI, это будет сделано автоматически.

 

импортировать '@ fortawesome / fontawesome-free / css / all.css'
импортировать Vue из 'vue'
импортировать Vuetify из vuetify / lib

Vue.use (Vuetify)

экспортировать новый Vuetify по умолчанию ({
  icons: {
    iconfont: 'fa',
  },
})
  

# Font Awesome SVG Icons

Добавьте необходимые зависимости.

  $ yarn add @ 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 компонент и установите faSvg как iconfont в конфигурации Vuetify.

 

импортировать Vue из 'vue'
импортировать Vuetify из vuetify / lib
импортировать {библиотеку} из '@ fortawesome / fontawesome-svg-core'
импортировать {FontAwesomeIcon} из '@ fortawesome / vue-fontawesome'
импортировать {fas} из '@ fortawesome / free-solid-svg-icons'

Vue.component ('font-awesome-icon', FontAwesomeIcon)
library.add (fas)

Vue.use (Vuetify)

экспортировать новый Vuetify по умолчанию ({
  icons: {
    iconfont: 'faSvg',
  },
})
  

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

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

 

импортировать Vue из 'vue'
импортировать Vuetify из vuetify / lib

Vue.use (Vuetify)

экспортировать новый Vuetify по умолчанию ({
  icons: {
    iconfont: 'fa',
    значения: {
      отменить: 'fas fa-ban',
      меню: 'fas fa-ellipsis-v',
    },
  },
})
  

Вы можете импортировать и назначить SVG значку значка. Импортированный svg должен содержать только путь без оболочки .Для импорта более сложного SVG используйте значок компонента.

 

импортировать Vue из 'vue'
импортировать Vuetify из vuetify / lib
импортировать myIconSvg из myIcon.svg

Vue.use (Vuetify)

экспортировать новый Vuetify по умолчанию ({
  icons: {
    iconfont: 'fa',
    значения: {
      customIconSvg: myIconSvg,
      customIconSvgPath: 'M14.989,9.491L6.071,0.537C5.78,0.246,5.308,0.244,5.017,0.535c-0.294,0.29-0.294,0.763-0.003,1.054l8.394,8.428L5.014,18.41c -0.291,0.291-0.291,0.763,0,1.054c0.146,0.146,0.335,0.218,0.527,0.218c0.19,0,0.382-0.073,0.527-0.218l8.918-8.919C15.277,10.254,15.277,9.784,14.989,9.491z ',
    },
  },
})
  

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

 

импортировать Vue из 'vue'
импортировать Vuetify из vuetify / lib

const MY_ICONS = {
  полный: '...',
  Отмена: '...',
  Закрыть: '...',
  Удалить: '...',
  Чисто: '...',
  успех: '...',
  Информация: '...',
  предупреждение: '...',
  ошибка: '...',
  предыдущая: '...',
  следующий: '...',
  checkboxOn: '...',
  checkboxOff: '...',
  checkboxIndeterminate: '...',
  разделитель: '...',
  Сортировать: '...',
  расширять: '...',
  меню: '...',
  подгруппа: '...',
  падать: '...',
  radioOn: '...',
  radioOff: '...',
  редактировать: '...',
  ratingEmpty: '...',
  ratingFull: '...',
  ratingHalf: '...',
  загрузка: '...',
  первый: '...',
  последний: '...',
  развернуть: '...',
  файл: '...',
}

Vue.use (Vuetify)

экспортировать новый Vuetify по умолчанию ({
  icons: {
    значения: MY_ICONS,
  },
})
  

# Пользовательские значки многократного использования

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

 

импортировать Vue из 'vue'
импортировать Vuetify из vuetify / lib

Vue.use (Vuetify)

экспортировать новый Vuetify по умолчанию ({
  icons: {
    iconfont: 'mdi',
    значения: {
      продукт: 'mdi-dropbox',
      поддержка: 'mdi-lifebuoy',
      steam: 'mdi-steam-box',
      ПК: 'mdi-desktop-classic',
      xbox: 'mdi-xbox',
      playstation: 'mdi-playstation',
      переключатель: 'mdi-nintendo-switch',
    },
  },
})
  

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

 

<шаблон>
  

     $ vuetify.icons.product 
     $ product 

     
     

     
     

     
  


<сценарий>
  экспорт по умолчанию {
    данные: () => ({
      Пользователь: {
        имя: 'Джон Лейдер',
        платформа: 'pc',
      },
    }),

    вычислено: {
      Платформа () {
        вернуть '$' + это.user.platform
      }
    }
  }

  

# Значки компонентов

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

 

импортировать Vue из 'vue'
импортировать Vuetify из vuetify / lib
импортировать IconComponent из './IconComponent.vue'

Vue.use (Vuetify)

экспортировать новый Vuetify по умолчанию ({
  icons: {
    значения: {
      товар: {
        компонент: IconComponent,
        props: {
          имя: 'продукт',
        },
      },
    },
  },
})
  

Если вы хотите, чтобы ваш значок SVG правильно наследовал цвета и масштаб, обязательно добавьте к нему следующий CSS:

 .ваш-svg-icon
  fill: currentColor
  

# Отсутствуют значки материалов

Некоторые значки материалов по умолчанию отсутствуют. Например, человек и person_outline доступны, но visibility_outline нет, а видимость есть. Чтобы использовать отсутствующие значки материалов, добавьте шрифт ниже (удалите другой шрифт материала, если он уже зарегистрирован).

  <ссылка
      rel = "таблица стилей"
      href = "https: //fonts.googleapis.com / css? family = Материал + Иконки | Материал + Иконки + Контур | Материал + Иконки + Два + Тон | Материал + Иконки + Круглый | Материал + Иконки + Sharp »
/>
  

Вы можете добавить свой собственный компонент. Допустим, это @ / components / MaterialIcon.vue .

  <шаблон>
   {{parsed.id}} 


<сценарий>
экспорт по умолчанию {
  props: {
    имя: {
      тип: String
    }
  },
  вычислено: {
    parsed () {
      const check = (customSuffixes, standardSuffix) => {
        for (пусть суффикс customSuffixes) {
          суффикс = `_ $ {суффикс}`
          если это.name.endsWith (суффикс)) {
            возвращаться {
              суффикс: стандартный
              id: this.name.substring (0, this.name.indexOf (суффикс))
            }
          }
        }
        вернуть ложь
      }

      возвращаться (
        check (['заполнить', 'заполнить'], '') ||
        check (['наброски', 'очерченные'], 'очерченные') ||
        check (['двухцветный', 'двухцветный'], 'двухцветный') ||
        check (['круглый', 'округленный'], 'круглый') ||
        check (['Sharpened'], 'Sharpened') || {
          суффикс: '',
          id: это.имя
        }
      )
    },
    standardClass () {
      if (this.parsed.suffix) {
        return `material-icons - $ {this.parsed.suffix}`
      }
      вернуть 'material-icons'
    }
  }
}

  

Затем вам нужно зарегистрировать точные значки материалов, которые вы хотите.

  импортировать Vue из vue
импортировать Vuetify из vuetify / lib
импортировать MaterialIcon из '@ / components / MaterialIcon'

function missingMaterialIcons (ids) {
  const icons = {}
  for (const id идентификаторов) {
    for (константный суффикс ['заливка', 'контур', 'двухцветный', 'круглый', 'резкий']) {
      const name = `$ {id} _ $ {суффикс}`
      значки [имя] = {
        компонент: MaterialIcon,
        props: {
          имя
        }
      }
    }
  }
  иконки возврата
}

Vue.используйте (Vuetify, {
  
  icons: {
    значения: {
      ... missingMaterialIcons (['видимость', 'видимость_выкл'])
      
    }
  }
})
  

Наконец, вы можете использовать такие значки материалов.

 



 $ visibility_outline 
  

Готовы к большему?

  лицо  

 i.material-icons {
размер шрифта: 35 пикселей;
цвет: #ffffff;
отступ: 10 пикселей;
радиус границы: 50%;
box-shadow: 0 0.5px 0 0 #ffffff вставка, 0 1px 2px 0 # B3B3B3;
цвет фона: # 3793ef;
}