Vuetify新版本按需打包MDI图标失败及图标显示异常求助

1. 移除过时配置项 #

新版Vuetify（v3及以上）已废弃iconfont参数，直接删除配置中的这一行即可解决类型错误问题。

2. 正确配置图标集 #

先确保已安装@mdi/js依赖，再按以下方式配置Vuetify：

import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
// 按需引入需要的单个图标
import { mdiMap, mdiBike } from '@mdi/js'

const vuetify = createVuetify({
  icons: {
    defaultSet: "mdi",
    aliases: {
      ...aliases,
      // 可选：给图标设置别名，简化使用
      mapIcon: mdiMap,
      bikeIcon: mdiBike
    },
    sets: {
      mdi,
      // 不需要Font Awesome可删除此行
      // fa,
    },
  },
  components: {
    VDatePicker,
  },
  directives,
})

3. 正确使用SVG图标 #

按需引入的图标需通过:icon属性绑定使用，有两种方式：

方式一：直接绑定引入的图标变量 #

<v-tab :value="Tabs.routes">
  <v-icon :icon="mdiMap"></v-icon>All routes
</v-tab>
<v-tab :value="Tabs.newRide">
  <v-icon :icon="mdiBike"></v-icon>New Ride
</v-tab>

方式二：使用配置中设置的别名 #

<v-tab :value="Tabs.routes">
  <v-icon icon="mapIcon"></v-icon>All routes
</v-tab>
<v-tab :value="Tabs.newRide">
  <v-icon icon="bikeIcon"></v-icon>New Ride
</v-tab>

4. 清理冗余依赖（可选） #

如果已完全切换到SVG图标，可移除@mdi/font依赖，彻底消除未使用的字体图标包体积。

排查要点 #

• 确认@mdi/js安装正确，图标引入名称为驼峰格式（如mdiMap，而非字体图标用的mdi-bike）
• 确保配置中sets里的mdi来自vuetify/iconsets/mdi-svg，而非字体版图标集

内容的提问来源于stack exchange，提问作者quilkin