V icon vuetify не работает

значок vuetify не отображается

Я использую vue.js и vuetify . Я хочу добавить значок, но он не работает. (не визуализируется)

Как я могу это исправить?

пожалуйста, обратитесь к следующему коду

Я хочу, чтобы это выглядело как значок, а не код

Ответы — значок vuetify не отображается / vuetify icon not showing

Если вы используете Vuetify, то вам следует просто использовать компонент , который поддерживает как материал, так и шрифт Awesome icons: documentation

Используя Vuetify, вам в принципе больше не нужно будет использовать синтаксис class=»icon_name» .

С Vue CLI 3 у нас нет индекса.html в папке src так что альтернативно вы можете

и импортируйте его в основном.js файл

Вы можете столкнуться с точно такой же проблемой, если используете Nuxt.JS. Чтобы решить эту проблему, вы должны объявить значки Material Design в своем CSS . через CDN, например, как показано ниже:

Была ли эта проблема с Vuetify 2.1.3, установленной через vuetify-loader 1.2.2

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

Решение было таким:

И в файле main.js (или plugins/vueitfy.js , если он существует) добавьте эту строку под импортом

Прочтите последние выпущенные документы и включите приведенный ниже код в свой индекс.HTML

Если вы используете Nuxt с Vuetify и значками материалов, они не отображаются в Firefox:

Затем в поле nuxt.config.js добавьте следующую запись в поле css :

Вы можете импортировать все необходимые стили

Источник

[Bug Report] materialdesignicons stopped working properly #10797

Comments

seongjin605 commented Mar 10, 2020 •

Environment

Vue Version: 2.6.11
Nuxt Version: 2.10.1
@nuxtjs/vuetify Version: 1.9.0
Vuetify Version: 2.2.8
Browsers: Chrome 80.0.3987.132
OS: Mac OS 10.15.3

Expected Behavior

Actual Behavior Bug image

I did not modify the icon, but one day it suddenly changed to like this
Is this material icon’s CDN problem?

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

seongjin605 commented Mar 10, 2020 •

The same problem occurs with the v-rating component.

Expected Behavior

Actual Behavior Bug image

Also most of the icons are causing problems. 😢

ngongon commented Mar 10, 2020

This is happening from about 2 hours ago.

MpEliaz commented Mar 10, 2020

MajesticPotatoe commented Mar 10, 2020 •

Are you using CDN without explicitly specifying a version?

seongjin605 commented Mar 10, 2020 •

@MajesticPotatoe yes, i am using @nuxtjs/vuetify Version: 1.9.0
Here are the material icon CDN links.(yourPath/node_modules/@nuxtjs/vuetify/dist/icons.js)

I don’t know if this CDN link is the problem, but I’m not sure what’s causing it
so I’m looking for a bug.

ngongon commented Mar 10, 2020 •

For more information, some default icons are having problems. For example, arrow_down icon of autocomplete, list icon of left-toggle-drawer, arrow_down icon of list group. The pagination icons seem to be the same case, which the name icons are not designated manually by developer.

MajesticPotatoe commented Mar 10, 2020

@seongjin605 @mdi/font@latest you are not explicitly specifying a cdn version, this ultimately can cause cache issues when mdi updates their libraries.

ngongon commented Mar 10, 2020

@seongjin605 Thanks, I urgently edited node_modules and redeployed.

ElijahKotyluk commented Mar 10, 2020 •

For Vuetify + Nuxt using create-nuxt-app, I ended up uninstalling @nuxtjs/vuetify , and installing vuetify and @mdi/font@4.9.95 and created a Vuetify plugin. All works perfectly again.

If this comment should not be here, just let me know and I’ll remove it.

PabloRN commented Mar 10, 2020

@seongjin605 @mdi/font@latest you are not explicitly specifying a cdn version, this ultimately can cause cache issues when mdi updates their libraries.

Sorry not working with latest

KaelWD commented Mar 10, 2020 •

Sorry not working with latest

Yeah that’s what he said.

This is a problem with jsdelivr, here’s what I think is happening:

http://unpkg.com/ doesn’t have this problem because it redirects to the actual version, preventing a cache mismatch. If you use jsdelivr you must specify a full version number.

kevinasurjadi commented Mar 10, 2020 •

In my kind of environment

I was experiencing the same issue, but I solved it by installing extra devDependency of

and add it to my vuetify config (vuetify.options.js) like this (refering to https://vuetifyjs.com/en/customization/icons/#installing-iconfonts)

and I add it to nuxt.config.js like this

I believe there is something wrong with the default url
https://cdn.jsdelivr.net/npm/@mdi/font@latest/fonts/.
using always font@latest which if something bad happens there on the update, it causes bad things to us, too.

hope this helps.

Ed-ouard commented Mar 10, 2020

It seems that the issue has been fixed now, with the latest version of mdi fonts.
No need to change the package.

This comment was marked as off-topic.

PabloRN commented Mar 10, 2020

Hey @KaelWD in my case I can see:
https://cdn.jsdelivr.net/npm/@mdi/font@latest/fonts/materialdesignicons-webfont.woff2?v=5.0.45
and still showing wrong icons

liranh85 commented Mar 10, 2020

Fixed for me, all icons are rendered correctly again. Thanks for the quick fix!

hiiwave commented Mar 10, 2020 •

I encountered the same problem using vuetify installed via vue-cli.
Here is how I managed to solve it:

1. Search materialdesignicons.min.css in the project folder. It appears at public/index.html .
2. Modify it to … materialdesignicons.css .
3. Working now.

It appears that the minified version has the old content in v4.9x. Thus I switched to regular version temporarily to fix that. Hope that helps.

KaelWD commented Mar 10, 2020 •

It appears that the minified version has the old content in v4.9x

Because your browser has it cached. If you clear the cache or specify a version range it’ll work again.

I’m locking this thread so the solution doesn’t get buried.

Источник

FontAwesome с Vuetify — как включить значки Font Awesome в компонент v-icon

Надеюсь, кто-то узнает, где я здесь ошибся — я пытаюсь реализовать пакет Font Awesome с Vuetify. Font Awesome импортирован и готов к работе (настройка идентична проектам, в которые я успешно интегрировал Font Awesome):

Мой базовый main.js файл:

И внутри компонента я ссылаюсь на значок следующим образом:

^ Где я оставил лишний код *.

Итак, мой вопрос — как мы интегрируем Font Awesome в компонент Vuetify v-icon?

Для справки, я использую то, что изложено здесь:

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

Обновление: я специально хочу решение, которое не включает в себя добавление довольно тяжелого файла Font Awesome all.css (
) — вместо этого импорт на значок за значком нужно. (общий вес уменьшенного файла all.css в v.5.2.0 составляет 52 КБ.

4 ответа

Итак, используя предложение вышеупомянутого комментатора, мне удалось заставить его работать, используя стандартный метод vue-font-awesome , включающий в себя шрифтовые потрясающие компоненты пиктограммы, выпуская для того, что я использовал в своем вопросе:

Для проекта Nuxt / Vuetify:

В дополнение к ответу выше, вы также можете настроить его в файле конфигурации Vuetify, который создается во время установки проекта ( «plugins / vuetify.js» ), добавляя «iconfont» prop:

Теперь используйте с компонентом иконки, как это:

Источник

Иконки

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.

Источник