vuetify/mdi 中图标不显示

Question

我想使用图标库，因为它可能对其他事情有好处，所以我决定只使用 Vuetify，因为它除了包含图标的能力之外还包括其他设计优势。

在现有项目中使用 npm 安装 @mdi/js 和 Vuetify 后，我的 src/plugins/vuetify.ts 文件夹中有以下代码：

import "vuetify/styles";

import { createVuetify } from "vuetify";
import { aliases, mdi } from "vuetify/iconsets/mdi"

export default createVuetify({
  icons: {
    defaultSet: "mdi",
    aliases,
    sets: {
      mdi,
    },
  },
});

现在要插入图标，建议使用@mdi/js，因为据我了解，只会导入实际使用的图标。

这就是我的 App.vue 的样子：

<script setup lang="ts">
import { mdiAccount } from '@mdi/js';
</script>

<template>
    <main>
        <v-icon :icon="mdiAccount" size="16" color="white" class="h-25 w-25"/>
    </main>
</template>

文档中给出的示例几乎都是这样，只是使用组合 api（除非我犯了错误）...你能发现我犯的错误吗？

Answer 1

我遇到了同样的问题，在查看示例后我发现它缺少样式的导入。在main.ts（或构建应用程序的文件中）文件中，您应该导入此样式

import '@mdi/font/css/materialdesignicons.css'