3

我遇到了 Vuetify 中的图标无法正确显示的问题，例如下面是Vuetify 扩展面板。我已经尝试过这个问题vuetify icon not displayed中的解决方案，但它们对我不起作用。您可以在下面看到 chevron-down 图标显示为$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，将图标更改为一些奇怪的图标。

在此处输入图像描述

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

4

1 回答 1

5

假设您使用的是 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 所需的配置，尽管有一些相似之处，但它们有很大的不同。您还需要清楚，有两种名称非常相似的字体，一种配置为 using 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...
})
于 2019-10-01T22:47:46.907 回答