如何在Vuetify 3和Nuxt 3中导入自定义SVG图标？

在Vuetify 3中，自定义SVG图标主要通过扩展图标别名或创建自定义图标集两种方式实现，以下是具体配置步骤：

方法一：添加单个自定义图标（通过别名） #

适合仅需少量自定义图标的场景，直接扩展Vuetify的图标别名体系：

1. 修改plugins/vuetify.js，导入你的SVG组件并扩展别名：

// plugins/vuetify.js
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import { aliases, mdi } from "vuetify/iconsets/mdi";
// 导入自定义SVG组件（路径根据实际项目结构调整）
import MyCustomIcon from '@/components/MyCustomIcon.vue'

export default defineNuxtPlugin((nuxtApp) => {
  // 合并原有MDI别名与自定义图标
  const customAliases = {
    ...aliases,
    // 定义自定义图标别名，使用$前缀调用
    myIcon: { component: MyCustomIcon },
  };

  const vuetify = createVuetify({
    components,
    directives,
    icons: {
      defaultSet: "mdi",
      aliases: customAliases,
      sets: {
        mdi,
      },
    },
  });
  nuxtApp.vueApp.use(vuetify);
});

2. 在Vue组件中调用：

<v-icon>$myIcon</v-icon>

方法二：创建自定义图标集（适合多图标场景） #

如果有多个自定义SVG图标，推荐创建独立的图标集统一管理：

1. 新建plugins/customIcons.js，集中定义所有自定义图标：

// plugins/customIcons.js
import IconUser from '@/components/icons/IconUser.vue'
import IconSettings from '@/components/icons/IconSettings.vue'

// 定义自定义图标集
export const customIcons = {
  user: { component: IconUser },
  settings: { component: IconSettings },
}

2. 修改plugins/vuetify.js，导入并注册自定义图标集：

// plugins/vuetify.js
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import { aliases, mdi } from "vuetify/iconsets/mdi";
import { customIcons } from './customIcons'

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    components,
    directives,
    icons: {
      defaultSet: "mdi",
      aliases,
      sets: {
        mdi,
        // 添加自定义图标集，命名为custom
        custom: customIcons,
      },
    },
  });
  nuxtApp.vueApp.use(vuetify);
});

3. 使用方式：

• 直接指定图标集调用：

<v-icon set="custom">user</v-icon>
<v-icon set="custom">settings</v-icon>

• 或添加别名简化调用（在vuetify.js的customAliases中扩展）：

const customAliases = {
  ...aliases,
  userIcon: 'custom:user',
  settingsIcon: 'custom:settings',
}

调用时：

<v-icon>$userIcon</v-icon>

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