Иконки

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

Использование предопределенной опции позволит предварительно заполнить значения по умолчанию на основе выбранного пресета. Это приведет к перезаписи значений по умолчанию компонентов, имеющих значения icon по умолчанию. Для получения дополнительной информации обратитесь к icon preset values.

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

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

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

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

Укажите mdiSvg в iconfont:

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

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

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

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

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

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

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

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

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

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

Добавить требуемые зависимости.

Затем добавьте глобально компонент font-awesome-icon и установите в конфигурации Vuetify iconfont faSvg.

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

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

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

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

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

Вы можете использовать иконки компонентов с помощью Font Awesome Pro для выбора индивидуального icon weights:

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

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

По умолчанию некоторые иконки отсутствуют. Например, person и person_outline доступны, но visibility_outline нет, пока есть visibility. Для использования недостающих material icons необходимо подключить шрифт ниже (удалить другой material font, если он уже зарегистрирован).

Вы можете добавить ваш собственный компонент. Позвольте мне предположить, что это @/components/MaterialIcon.vue.

Затем вам нужно зарегистрировать нужные вам material icons.

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