如何在 vuetify 3 中导入自定义 svg 图标？

Question

如何在 vuetify3 和 nuxt3 中导入自定义 svg 图标？

在 vuetify 2 中，我们可以像这样直接导入 svg 图标

import customIcon from './myIcon.vue'
Vue.use(Vuetify)
export default new Vuetify({
  icons: {
    iconfont: 'mdi',
    values: {
      myIcon: {component: customIcon}
    },
  },
})

---------------

// Used like this in vue file
<v-icon>$myIcon</v-icon>

从 veutfiy 3 文档来看，我对导入自定义 svg 图标感到困惑，因为它使用的是集合而不是值。 https://next.vuetifyjs.com/en/features/icon-fonts/

// 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";
export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    components,
    directives,
    icons: {
      defaultSet: "mdi",
      aliases,
      sets: {
        mdi,
      },
    },
  });
  nuxtApp.vueApp.use(vuetify);
});

Answer 1

找到了一种同时使用 mdi 和自定义 svg 图标的方法

图标文件

//tickicon.vue
<template>
<svg>... icon here</svg>
<template>

//customSvgs.ts
import { h } from "vue";
import type { IconSet, IconProps } from "vuetify";
import tickIcon from "./customSVGs/tickicon.vue";
import closeIcon from "./customSVGs/close-icon.vue";

const customSvgNameToComponent: any = {
  tickIcon,
  closeIcon,
};

const customSVGs: IconSet = {
  component: (props: IconProps) => h(customSvgNameToComponent[props.icon]),
};

export { customSVGs /* aliases */ };

还有我的 vuetify 插件文件

// plugins/vuetify.ts
import { createVuetify } from "vuetify";
import { mdi } from "vuetify/iconsets/mdi";
import { customSVGs } from "~~/assets/customSVGs";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    components,
    directives,
    icons: {
      defaultSet: "mdi",
      sets: {
        mdi,
        custom: customSVGs,
      },
    },
  });

  nuxtApp.vueApp.use(vuetify);
});

在 vue 文件中这样使用

<v-icon icon="custom:tickIcon"/> //Custom SVG Icon 
<v-icon icon="mdi-arrow-up"/>  //default mdi icon

Answer 2

补充@rookie-coder的答案

要获得正确的 vuetify v-icon 样式，您需要将 svg 图标包装在标签中<i>，并将类赋予v-icon__svg该<svg>元素。

const custom: IconSet = {
  component: (props: IconProps) =>
    h(props.tag, [h(customSvgNameToComponent[props.icon as string], { class: 'v-icon__svg' })]),
}

const vuetify = createVuetify({
  icons: {
    defaultSet: "mdi",
    sets: {
      mdi,
      custom,
    },
  },
});