Vue.js vuetifymdi 不显示图标

发布于12月28日

我想使用一个图标库，因为它可能对其他东西有好处，所以我决定只使用Vutify，因为它包括其他设计优势，而不仅仅是包括图标的能力.

在我的现有项目中安装了@mdi/js和带有NPM的Vuitify之后，我的src/plugins/vuitify.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(除非我犯了错误)…… 你能发现我犯的错误吗？

Vue.js vuetifymdi 不显示图标

推荐答案

Vue.js相关问答推荐

将Vite Vuejs应用部署到Apache服务器

vue ：多个样式的类绑定在一个

如何解决 importers[path] is not a function for clean Vue 3/Vite/Storybook installation

组合 API ｜ Vue 路由参数没有被监视

使用 cypress 进行 e2e 测试的 vuejs 期间出现 Webpack 错误

如何使用 vue.js 和 vue 路由实现当前路由的子菜单的子菜单

Vuetify 复选框：如何停止点击事件？

在 dom 内移动 Vue 组件？

为什么在 Vue.js 中使用 `var` 关键字？

如何从 Vuex 状态使用 Vue Router？

使用上传组件而不触发 POST 请求

如何在 vue.js 模板中显示空间而不是 undefined 和 null？

如何从 bootstrap-vue 模态监听事件？

错误：vue-loader 要求 @vue/compiler-sfc 存在于依赖树中

如何将数据传递给 Vue.js 中的路由视图

模块构建失败：错误：没有给出解析器和文件路径，无法在 nuxtjs 中推断出解析器

Vue Chart.js - 条形图上的简单点/线

$set 不是函数

使用 vuex-persistedstate 仅使一个模块持久化

在鼠标悬停时动态添加和删除类