Значки Vuetify отображаются неправильно: они отображаются как «$ vuetify.icons ...» - PullRequest
Новая
       40

Значки Vuetify отображаются неправильно: они отображаются как «$ vuetify.icons ...»

0 голосов
/ 01 октября 2019

У меня проблема с иконками в Vuetify, которые не отображаются должным образом, например, ниже показана панель расширения Vuetify . Я уже пробовал решения в этом вопросе значок vuetify, не показывающий , но они не работали для меня. Ниже вы можете видеть, что значок шеврона вниз отображается как $vuetify.icons.expand. Я попытался импортировать @ mdi / font, который ничего не делает для меня ... вот код, который я использую: 

import Vue from 'vue'
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css'
// import 'material-design-icons-iconfont/dist/material-design-icons.css'
import '@mdi/font/css/materialdesignicons.css'

Vue.use(Vuetify, {
    icons: {
        iconfont: 'mdi'
    }
});

//expansion panels

enter image description here

Импорт material-design-icons-iconfont/dist/material-design-icons.css, изменяет значки на некоторые странные значки.

enter image description here

Пожалуйста, дайте мне знать, в чем может быть проблема, и что еще я могу попробовать!

1 Ответ

1 голос
/ 02 октября 2019

Предполагается, что вы используете Vuetify 2 ...

Я думаю, что вы упускаете ключевую вещь, передавая Vuetify конструктору Vue, как описано здесь:

https://vuetifyjs.com/en/getting-started/quick-start#bootstrapping-the-vuetify-object

Например: 

new Vue({
  vuetify: new Vuetify(),
  // ... all the other stuff you're currently passing

Если вы хотите настроить шрифт, вам нужно передать его конструктору Vuetify, а не Vue.use. например, 

const vuetify = new Vuetify({
  icons: {
    iconfont: 'mdi'
  }
})

new Vue({
  vuetify,
  // ... all the other stuff you're currently passing

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

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

Текущая документация находится здесь: https://vuetifyjs.com/en/customization/icons. На момент написания статьи это для версии 2.1.0. Будьте очень осторожны, чтобы не перепутать конфигурацию, необходимую для Vuetify 2, с 1.5, они значительно отличаются, несмотря на некоторые сходства. Также необходимо уточнить, что есть два шрифта с очень похожими именами, один из которых настроен с использованием iconfont: 'mdi', а другой - с iconfont: 'md'. Оба используют слова «Материал», «Дизайн» и «Иконки» в своих именах в зависимости от контекста.

РЕДАКТИРОВАТЬ OP

Я не могу поставить этов комментарии, поэтому я решил отредактировать ответ. Вот что у меня получилось: 

// src/plugins/vuetify.ts

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css';
import '@mdi/font/css/materialdesignicons.css'

Vue.use(Vuetify);

const vuetify = new Vuetify({
    icons: {
        iconfont: 'mdi'
    }
});

export default vuetify

Затем в другом файле, где я использую Vue: 

// other_file.ts

import vuetify from './plugins/vuetify';

new Vue({
    vuetify,
    // ...other stuff...
})
...