Иконки

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

Применение

Чтобы изменить шрифт иконок, добавьте опцию iconfont при подключении Vuetify.

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

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

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

Установка библиотеки Material Icons

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

Также можно установить библиотеку иконок локально, используя yarn или npm. Помните, что эти пакеты не являются репозиториями Google и могут не обновляться своевременно

Когда вы установили пакет, импортируйте его в главном файле вашего приложения. Это, как правило, main.js, index.js или app.js, расположенный в папке src/ вашего проекта. Если вы используете серверный рендеринг (SSR) в вашем приложении, то, скорее всего, главный файл называется client.js или entry-client.js.

Установка библиотеки Material Design Icons

Библиотека Material Design Icons устанавливается так же, как и Material Icons. После установки её нужно будет импортировать в ваше приложение.

Установка Font Awesome 5

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

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

В главном файле просто импортируйте файл all.css из пакета. Если вы используете Webpack в своем проекте, настройте импорт .css файлов используя css-loader. Если вы уже используете vue-cli-3, импорт .css файлов уже настроен по умолчанию.

Установка Font Awesome 4

Устанвка выполняется так же, как и Font Awesome 5. Импорт FontAwesome через CDN это самый простой способ использовать Font Awesome 4 в своем проекте:

Установка FontAwesome 4 такая же, как и установка новой версии, но из другого репозитория. Используйте репозиторий font-awesome вместо @fortawesome.

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

Install Font Awesome SVG Icons

Add required dependencies.

Then add globally font-awesome-icon component and set faSvg as iconfont in Vuetify config.

Настройка иконок в компонентах Vuetify

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

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

Повторно используемые иконки

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

Это поможет вам убедиться, что ваше приложение всегда использует пользовательские иконки. Вот несколько способов использования <v-icon> с пользовательскими иконками.

Пользовательские компоненты

Вы можете использовать такие же иконки в ваших собственных компонентах. Каждый раз, когда вы передаете $vuetify.icons через v-text, v-html или как текст, <v-icon> будет использовать это значение. Это позволяет вам создавать решения, легкие в построении и управлении.

Custom Font Awesome Pro Icons

You can utilize component icons with Font Awesome Pro to select individual icon weights:

Component icons

Instead of provided icon fonts presets you can use your own component icons. You also can switch icons that are used in Vuetify component with your own.

If you want your SVG icon to inherit colors and scale correctly - be sure add the following css to it:

Edit this page | language on Github