vuejs2 - Vuetify 图标未正确显示 : they appear as as "$vuetify.icons..."

Question

我遇到了 Vuetify 中的图标无法正确显示的问题，例如下面是 Vuetify expansion panel .我已经尝试过这个问题的解决方案 vuetify icon not showing ，但它们对我不起作用。您可以在下面看到人字形向下图标显示为 $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

导入material-design-icons-iconfont/dist/material-design-icons.css，将图标变成一些奇怪的图标。

请让我知道可能是什么问题以及我还可以尝试什么!

Answer 1

假设您正在使用 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' 配置。两者都根据上下文在名称中使用“ Material ”、“设计”和“图标”等词。

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...
})