我想使用一个图标库,因为它可能有利于其他事情,我决定只使用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(除非我犯了错误)......您能指出我犯的错误吗?
1条答案
按热度按时间rdlzhqv91#
您可以使用这里的答案来获得一些通用图标:https://stackoverflow.com/a/72055404/8816585
如果您还关心类型,可以在
tsconfig.json
中使用以下代码