Не работают иконки vuetify

Иконки

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 .

Источник

How To Add Custom SVG Icon in Vuetify — Vue

I’m using vuetify 1.1.8 and vue 3.0.0-rc.3. I am trying to use some of the custom SVG icons in my project, which I have designed, instead of default icons from Material Icons or FontAwesome Icons which are supported by vuetify

I have tried using vue-svg-loader to load my custom svg icons, and use them as components. Something like this

But the problem with vue-svg-loader is that I cannot use them in ‘s append-icon and many other places where I had freedom with .

I have also read the vuetify docs where they have mentioned about using custom icons but I don’t think that is helping too.

Can someone help me out with this. May be I should try sprite-images as supported by material angular

I have custom self-made SVG Icons, and I want to use them as customIcon in vuetify

4 Answers 4

Create custom component which contains the svg icon code

Include the custom icon component in vuetify config:

You can, indeed, create a vue icon inside of its own Vue single file component, and then register this component so that vuetify can use it inside of the VICon (v-icon) component.

To create a vue component icon, you just need to place an SVG inside of the template tags as shown in the Vue Cookbook. This document should help you use the component in any vue app, as well.

Next, you need to register this component with vuetify. The Vuetify config is sometimes in the index file, or in the modern vue-cli, it will be found in @/src/plugins/vuetify.js.

There, you can register your component as shown on Vuetify’s site (you already mentioned this link), but maybe this documentation is an update or unclear.

Now this component will be registered and can be used anywhere inside of VApp. However, unlike standard icons, you need to use $vuetify.icons.[icon-name] inside the slot of v-icon. In the Vuetify example, the icon is registered as ‘product.’ To use this, you’d include

I have this working in an on-going project. I’ll leave a branch of the current state here.

Источник

v-tooltip not working properly on v-icon #544

Comments

PhilGenois commented May 15, 2017 •

The text was updated successfully, but these errors were encountered:

johnleider commented May 15, 2017 •

You cannot place tooltips on icons as it uses pseudo elements to display which is also used by font libraries.

Christilut commented Jun 5, 2017

this works for me, is there a reason I shouldn’t do this?

Ragura commented Aug 14, 2017

Thank you Christilut for the help, that worked perfectly for me and seems to have no side effects.

amazzoccone commented Jun 26, 2018

Actually the Vuetify documentation has an example with an icon.

johnleider commented Jun 26, 2018

That is because in the example it is using Material Icons which handles the logic differently. This should hopefully be a mute point soon as we are removing activator wrappers in a future release.

KaelWD commented Jun 26, 2018

Also this issue is from over a year ago and the original answer no longer applies.

ghost commented Jul 17, 2018

That is because in the example it is using Material Icons which handles the logic differently. This should hopefully be a mute point soon as we are removing activator wrappers in a future release.

@johnleider So this is the wrong way?
I wanted to display tips for icons in actions column in the v-data-table component, but they move up the rows of the table:

What then is the correct way?

rhinck commented May 8, 2019 •

What then is the correct way?

@hprog You’ve probably moved on from this issue, but this worked for me:

pageview Tooltip edit Tooltip 2

DRoet commented May 8, 2019

Usually not a smart idea to comment on old threads, but here:

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Источник

Модуль Nuxt Vuetify — пользовательские иконки компонентов не работают

Версия модуля @nuxtjs/vuetify — 1.8.3 nuxt 2.9.2

Описать ошибку импорта пользовательских иконок созданных компонентов невозможно. https://vuetifyjs.com/en/customization/icons#компонент-иконки

Шаги для воспроизведения поведения: 1. На index.vue, есть несколько икон. Специально созданный значок не отображается. Никаких ошибок, никаких предупреждений.

Ожидаемое поведение я ожидаю получить доступ к пользовательскому значку с $vuetify.icons.values.ionic, но этот компонент не был создан в объекте $vuetify.icons.

Кроме того, это не возможно, чтобы изменить шрифт vuetify от vuetify.options.js такой:

Может быть, они родственники.

2 ответа

Я использую Nuxt с vuetify. И я хотел бы использовать шрифты google. К сожалению, невозможно перезаписать шрифт Roboto по умолчанию с помощью файла main.styl. Цель в main.stly-перезаписать стиль vuetify. Как это возможно, что я переписываю все своим шрифтом (также кнопками). Большое вам спасибо за.

Я хочу заставить Vuetify работать с Nuxt через плагин, но получаю проблему : Textform: ERROR in ./node_modules/vuetify/src/components/VProgressLinear/VProgressLinear.sass friendly-errors 21:22:30 Module build failed (from ./node_modules/sass-loader/lib/loader.js): friendly-errors 21:22:30.

Использование пользовательских значков : nuxt.config

У меня была та же проблема, и я решил ее с помощью ответа Минаро :

• Моя конфигурация vuetify была не в отдельном файле, а в nuxt.config.js .
• Мне пришлось поместить «@nuxtjs/vuetify» в список buildModules из-за опции treeShake.
• Но тогда мои пользовательские иконки не были загружены/доступны
• Я тоже поместил «@nuxtjs/vuetify» в список модулей

Но теперь разделение конфигурации vuetify решает эту проблему:

Похожие вопросы:

Почему это не дубликат значков FontAwesome SVG с Vuetify — как использовать в v-icon/prepend-icon? Этот вопрос показывает, как добавить еще один значок и вывести его в свой компонент, вручную.

Я просмотрел все предыдущие вопросы, и с новой версией Vuetify пользовательские темы и значки не работают для меня. vuetify: ^2.1.11, vuetify.js файл: import Vue from ‘vue’; import Vuetify from.

Использование Nuxt create-nuxt-app ( https://nuxtjs.org/guide/installation#using-code-create-nuxt-app-code — ) Я выбрал Vuetify в качестве своего UI. (nuxt ^2 && Vuetify ^2) Vuetify по.

Я использую Nuxt с vuetify. И я хотел бы использовать шрифты google. К сожалению, невозможно перезаписать шрифт Roboto по умолчанию с помощью файла main.styl. Цель в main.stly-перезаписать стиль.

Я хочу заставить Vuetify работать с Nuxt через плагин, но получаю проблему : Textform: ERROR in ./node_modules/vuetify/src/components/VProgressLinear/VProgressLinear.sass friendly-errors 21:22:30.

Я не уверен, что это проблема, связанная с Nuxt JS или Vuetify. Недавно после настройки нового проекта Nuxt JS с Vuetify я получил ошибку, связанную с tapable.plugin . Эта ошибка появляется при.

Я только что создал свежий проект Nuxt со встроенным плагином Vuetify и попытался сделать некоторые базовые настройки стиля. Конфигурация Nuxt в значительной степени прямо из коробки: vuetify: <.

Я провел один день, решая недокументированные проблемы, связанные с настройкой тестирования для Nuxt + Vuex + Vuetify с Jest. У меня были такие проблемы, как: Unknown custom element.

Мне нужно использовать vuetify в моем проекте nuxt js в качестве плагина. Я пробовал пакет @nuxtjs/vuetify , но получил ошибку Не удается назначить только для чтения свойство ‘base’ объекта ‘#’ Я.

Из-за ошибки волокон на серверах cPanel/CentOS/Cloudlinux я использую v2.0.0-beta.2 из @nuxtjs/vuetify в своем приложении Nuxt. Но npm возвращает ошибку при выполнении сборки или разработки. Нет.

Источник

Vuetify — создаем свое простое приложение

Хоть UI библиотек или фреймворков для Vue.js не так уж и много, но Vuetify как раз здесь больше всего выделяется и по функционалу просто впереди других. Сегодня в этой небольшой статье я расскажу об данном UI фреймворке, его особенности, его структура и вообще к чему его можно применять. И честно в интернете не так уж и много русскоязычных материалов под данной теме, поэтому я решил что-то написать по Vuetify.

P.S. Вот сыллка на GitHub с кодом приложения.

Введение/Установка

Окей, представим что вы решили все таки начать пользоваться Vuetify и написать какое-то своё первое приложение используя его. И начинается все конечно же с установки, для начала давайте создадим новое Vue CLI приложение с помощью npm:

Важно, надо чтобы приложение имело версию Vue 2.0, поскольку на время написания этой статьи в Vuetify поддержка идёт только для Vue 2.0 приложений. После того как нового приложение было создано — следующим шагом будет установить UI фреймворк как плагин:

Нас попросит в дальнейшем выбрать какой-то пресет, и поскольку мы не собираемся пробовать версию V3 (которая нестабильна), то мы выбираем пресет “Default”:

Когда процесс установки Vuetify завершиться, то можно будет запустить локальный сервер приложения:

И открыв https://localhost:8080 мы увидим по-умолчанию созданную страницу от Vuetify с полезными сыллками:

Как мы видим то все работает и самое время начать уже писать наше приложение.

Так о чем же будет наше приложение?

Хороший вопрос, ведь мы создали уже Vue CLI приложение и установили Vuetify, но я так и не сказал что же будет делать именно наше приложение. Мой любимый пример, это мобильное приложение по доставке еды — поэтому давайте это будет тема нашего приложения.

Но перед этим давайте также установим Vue Router:

Как обычно при добавлении нового плагина к приложению, терминал может сказать что есть изменения которые не были добавлены в commit, мы здесь пишем “y” (т.е. yes) и двигаемся дальше:

Дальше при установке нас спросит хотим ли использовать режим истории в маршутизации, и здесь мы также тыкаем “y”:

Вот теперь Vue Router установлен, и самое время убрать код примеров в src/router/index.js чтобы когда мы сейчас запустили снова локальный сервер — не было ошибок:

Файл маршутизации теперь настроен и не содержит в себе каких-то несуществующих маршрутов, ну а теперь нужно также почистить файл App.vue:

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

Layout

В Vuetify уже есть своя придуманная гибкая система построения сетки в приложении. И давайте сейчас с ней ознакомимся. Для начала нам нужно будет воспользоваться двумя компонентами, это v-app и v-main. Открываем App.vue и добавляем их:

С компонента v-app и начинается наше приложение, этот компонент является псевдонимом тега

Окей, список у нас есть, а с помощью каких компонентов от Vuetify будем его выводить? Сейчас воспользуемся компонентом v-card, который позволяет удобно в карточках выводить подобную информацию. Но при этом мы также воспользуемся Bootstrap Vue чтобы элементы красиво располагались на странице.

Многие могут заметить что в row’e где мы уже выводим сами карточки заведения с помощью v-for в компоненте v-col я добавляю атрибут md=”4«. Те кто учили Bootstrap уже должны догадаться для чего нужен этот атрибут и как именно он задает размеры колонок. С помощью этого атрибута я указал чтобы каждая колонка имела размеры 4/12 и благодаря этому на странице карточки будут выводиться по 3 штуки в один ряд. Окей, компонент вывода заведений готов, надо теперь добавить его маршрут в файл src/router/index.js:

А теперь давайте перейдем на локальный сервер и посмотрим на результат вывода:

На декстоп и на мобайл выглядит нормально, можем двигаться дальше

Супер​ У нас есть вывод заведений на главной странице. А теперь я думаю самое время добавить отдельную страницу заведения, которая будет открываться при клике на заголовок карточки. Поскольку у нас нету базы данных с которой мы могли бы брать определенное заведение через API — то сама страница будет статичной.

Страница просмотра заведения

Для начала создаём компонент src/components/CafeView.vue и первое что в нем будет выводиться это изображение с заведением, его заголовок и описание. Для этой базовой информации мы создадим отдельный компонент с названием CafeInfo.vue, но перед этим заполним уже чем-то компонент CafeView.vue:

Хорошо, а теперь создаём компонент CafeInfo.vue:

Для удобства я специально поместил данные в data функцию. Теперь когда наш компонент готов — самое время сделать маршрут для компонента CafeView.vue в src/routes/index.js:

Окей, а теперь давайте посмотрим как это выглядит вместе на локальном сервере на url http://localhost:8080/cafe/view:

Вид можно было б ещё больше кастомизировать чтобы выглядело намного красивее. Но пусть будет так с стилями Vuetify по-умолчанию. Теперь давайте также пропишем сыллку на переход на эту страницу в List.vue:

В массив объектов заведений можно было бы ещё добавить отдельное поле url, которое хранило в себе линки на страницу заведения — но поскольку само приложение у нас статичное, то мы сделали именно так. Вывода такой информации на странице заведения — недостаточно. Нужно ещё реализовать компонент вывода меню товаров (еды) заведения. Поэтому для этого мы сейчас создадим отдельный компонент CafeMenu.vue.

Компонент меню заведения

Сначала создайте компонент src/components/Cafe/CafeMenu.vue, и внутри него сначала создаем переменную с массивом внутри которого будут объекты с информацией об товарах:

Рекомендую также добавить другие товары в список. А теперь самое время вывести их в отдельной колонке:

С помощью компонента v-list-item-group мы создали список, внутри которого с помощью v-for в v-list-item вывели список всех товаров. Компонент v-list-item-content используется для того чтобы выводить контент самого элемента списка, в нашем случае мы выводим заголовок (v-list-item-title) и цену (с помощью v-list-item-subtitle). А с помощью v-list-item-action, внутри мы добавили кнопку покупки товара (v-btn), атрибут icon мы добавили чтобы указать что внутри кнопки выводиться только иконка.

Внутри v-icon мы указали иконку от Material Design. Окей, теперь когда я объяснил что к чему — можем подключить данный компонент:

Открываем локальный сервер и смотрим на результат:

Круто, но нашему приложению не хватает менюшки в хедере очень сильно. Поэтому давайте её сейчас добавим.

Создание навигации

Сейчас нам нужно перейти в компонент App.vue и добавить новый компонент v-navigation-drawer:

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

Выглядит немного страшновато, но сейчас мы это пофиксим. Добавлю также что v-navigation-drawer является одним из компонентов layout системы Vuetify, и именно он отвечает за меню навигации. Давайте добавим следующий код чтобы это меню срабатывало при клике на иконку в хедере:

Зачем я добавил атрибуты absolute, temporary и v-model в v-navigation-drawer? Во-первых, absolute задает CSS свойство position: absolute; а это позволит сделать так чтобы эта менюшка и на мобайл хорошо отображалась. Во-вторых, temporary задает z-index для навигации — чтобы другие элементы не залазили на неё.

И во-третьих, v-model имеет в себе переменную drawer, которая в зависимости от значения true или false будет показывать меню. К примеру, если переменная drawer равняется в текущую момент значению true — то менюшка будет показываться. Если false, то менюшка будет спрятана. Если вы сейчас перейдете на локальный сервер — то увидите в хедере иконку и при клике на неё будет вылазить наше меню:

Вот здесь мы и можем увидеть иконку в хедере А при клике на саму иконку вылазит пустое меню с левой стороны

Теперь нужно чем-то заполнить меню, для этого создадим сейчас отдельную переменную с пунктами для меню:

А теперь выведем все это внутри v-navigation-drawer:

Готово, теперь если мы откроем меню то увидим следующее:

И вот у нас есть менюшка которая выглядет не прям красиво, но она работает и позволяет уже переходить на страницы. Окей, и что у нас получается? У нас есть простое приложение с выводом заведений, и просмотром этих заведений. Все это довольно таки примитивно — то мы смогли уже сделать что-то с Vuetify.

Источник