如何正确导入Vuetify图标？JsonForms组件图标渲染异常排查

问题分析 #

• 异常图标（如mdi-plus）的SVG路径d属性被设为字符串"mdi-plus"，而非实际的SVG路径数据，说明Vuetify无法识别该图标对应的SVG资源。
• 正常图标（如mdi-minus-box）能正确渲染，是因为Vuetify能找到其对应的SVG路径。

原因 #

@jsonforms/vue-vuetify提供的mdiIconAliases仅覆盖了JsonForms核心组件常用的图标，像plus这类图标不在其覆盖范围内；同时Vuetify默认的mdiAliases也未对这类图标做别名映射，导致Vuetify无法将JsonForms调用的图标名称关联到实际的SVG资源。

解决方案 #

方案一：补充缺失的图标别名 #

在Vuetify配置中手动添加JsonForms用到但未被覆盖的图标别名，将图标名称映射到对应的MDI图标ID：

import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { mdi, aliases as mdiAliases } from 'vuetify/iconsets/mdi-svg';
import { mdiIconAliases } from '@jsonforms/vue-vuetify';

// 合并默认别名、JsonForms别名，并补充缺失的图标映射
const customAliases = {
  ...mdiAliases,
  ...mdiIconAliases,
  // 手动添加需要的图标别名，示例：plus对应mdi-plus
  plus: 'mdi-plus',
  // 如有其他缺失图标，按此格式继续添加
};

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

方案二：确保图标调用使用完整MDI前缀 #

检查JsonForms组件的配置，确保渲染器调用图标时使用完整的mdi-前缀（如"mdi-plus"而非"plus"），这样Vuetify的MDI SVG图标集能直接识别并加载对应的路径数据。

方案三：手动导入单个图标并注册 #

如果想进一步减小打包体积，可单独导入需要的图标并注册到Vuetify的图标集中：

import { mdiPlus } from '@mdi/js';
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { mdi, aliases as mdiAliases } from 'vuetify/iconsets/mdi-svg';
import { mdiIconAliases } from '@jsonforms/vue-vuetify';

const vuetify = createVuetify({
  components,
  directives,
  icons: {
    defaultSet: 'mdi',
    sets: {
      mdi: {
        ...mdi,
        // 手动注册单个图标
        'mdi-plus': mdiPlus,
      },
    },
    aliases: {
      ...mdiAliases,
      ...mdiIconAliases,
      plus: 'mdi-plus',
    },
  },
})

验证步骤 #

可以在代码中打印mdiIconAliases的内容，确认哪些图标已被默认别名覆盖：

console.log(mdiIconAliases);

如果目标图标不在输出结果中，就需要按上述方案手动补充映射。

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