Vuetify按需引入Material Design Icons

2025-04-07 04:09:35 5

前端项目优化...

安装依赖

npm install @mdi/js -D

注册

import { createApp } from "vue";
import { createPinia } from "pinia";

import App from "./App.vue";
import router from "./router";

import "vuetify/styles";

import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'

const vuetify = createVuetify({
  components,
  directives,
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi,
    },
  },
});

const app = createApp(App);

app.use(createPinia());
app.use(router);
app.use(vuetify);

app.mount("#app");

模板内按需引用

<v-icon :icon="mdiBrain" />

import { mdiBrain } from "@mdi/js";

打包文件相较于安装@mdi/font 少了3MB多

https://vuetifyjs.com/zh-Hans/features/icon-fonts/#mdi-js-svg

• vue
• vuetify
• md