Vuetify 3：使用 Svg 作為 v 圖標

Question

我想使用我的自訂 svg 作為 v 圖標，但我在 Vuetify v3 文件中沒有找到任何解決方案。

在 vuetify v2 中，我可以在 vuetify.js 中執行此類操作：

export default new Vuetify({
  icons:{
    values: {
      test: {
        component: Test,
      },

我可以這樣使用它：

<v-icon size="40">$vuetify.icons.test</v-icon>

我如何在 Vuetify v3 中做同樣的事情？感謝您的幫助:)

Answer 1

下面的程式碼顯示了將自訂圖示與 mdi 圖示集一起新增至 Vuetify 並透過別名在元件中使用這兩個圖示的範例。

vuetify.js

#

import { createVuetify } from 'vuetify'

import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'

import folder from '@/customIcons/folderIcon.vue'
const aliasesCustom = {
  ...aliases,
  folder,
}

export const vuetify = createVuetify({
  icons: {
      defaultSet: 'mdi',
      aliases: {
        ...aliasesCustom
      },
      sets: {
        mdi,
      },
    },
})

folderIcon.vue（您的自訂圖示）

<template>
 <svg>...</svg>
</template>

任何證監會

#

<template>
  <v-icon>$folder</v-icon>
  <v-icon>$mdiGithub</v-icon>
</template>

原始來源：Vuetify Discord 頻道中的線程