使用vuetify/mdi时图标不显示

j8ag8udp  于 2022-12-30  发布在  Vue.js
关注(0)|答案(1)|浏览(239)

我想使用一个图标库,因为它可能有利于其他事情,我决定只使用Vuetify,因为它包括其他设计优势,而不仅仅是包括图标的能力。
在我现有的项目中安装了@mdi/js和Vuetify with npm之后,我在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(除非我犯了错误)......您能指出我犯的错误吗?

rdlzhqv9

rdlzhqv91#

您可以使用这里的答案来获得一些通用图标:https://stackoverflow.com/a/72055404/8816585
如果您还关心类型,可以在tsconfig.json中使用以下代码

"compilerOptions": {
  "types": [
    "unplugin-icons/types/vue",
  ]
}

相关问题