Магазин

Для бизнеса

Vuetify comes bootstrapped with support for Material Design Icons, Material Icons, Font Awesome 4 and Font Awesome 5. By default, applications will default to use Material Design Icons.

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

Using a predefined option will prefill defaults based upon the selected preset. This will overwrite the defaults of components that have default icon values. For more information, view the default icon preset values.

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

This is the default icon font for Vuetify. You can include it through a CDN:

Or as a local dependency:

Use the SVG Path's as designated in @mdi/js. This is the recommended installation when optimizing your application for production. You ONLY need to include this if you plan on using more than the default icons.

Specify the mdiSvg iconfont:

You can custom import only the icons you use granting a much smaller bundle size.

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

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

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

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

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

Within your main entry point, simply import the package's all.css. If you are using a configured webpack project, you will need to setup support for .css files using the webpack css loader. If you are already using Vue CLI, this is done for you automatically.

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

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

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

Add required dependencies.

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

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

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

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

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

You can utilize the same icon strings in your own custom components. Any time $vuetify.icons (or shortcut $) is passed in through v-text, v-html or as text, <v-icon> will look up that specified value. This allows you to create customized solutions that are easy to build and easy to manage.

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

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:

Some material icons are missing by default. For example, person and person_outline are available, but visibility_outline isn't, while visibility is. To use missing material icons, include the font below (remove another material font if already registered).

You can add your custom component. Let me assume it is @/components/MaterialIcon.vue.

Then you need to register the exact material icons you want.

Finally you can use the material icons like this.

Ready for more? Continue reading with:

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!