Vuetify3（Vue3）自定义组件图标加载失败问题求助

云上老周

2026-7-20

问题分析与修复方案

你遇到的错误是因为未定义aliases变量，且自定义图标配置逻辑、createVuetify参数结构存在问题，导致Vuetify无法识别gaming别名对应的图标。

修复方案一：直接通过别名注册自定义图标组件

这种方式适合单个自定义图标的场景，直接将别名与自定义组件绑定：

import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
import gamingIcon from 'assets/custom-icons/sector/gaming.vue';

// 定义图标别名，直接关联自定义组件
const aliases = {
  gaming: {
    component: gamingIcon,
  },
};

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

export default vuetify;

修复方案二：自定义图标集+别名绑定

如果后续需要扩展同类型图标，推荐用这种方式注册图标集：

import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
import gamingIcon from 'assets/custom-icons/sector/gaming.vue';

const vuetify = createVuetify({
  icons: {
    defaultSet: 'mdi',
    // 别名指向自定义图标集的具体图标，格式为「图标集名称:图标名」
    aliases: {
      gaming: 'gaming:default',
    },
    // 注册自定义图标集，可在内部添加多个图标
    sets: {
      gaming: {
        icons: {
          default: gamingIcon,
        },
      },
    },
  },
  components,
  directives,
});

export default vuetify;