Vuetify 3: Menggunakan ikon Svg untuk v
P粉440453689
P粉440453689 2023-08-28 21:34:41
0
1
570
<p>Saya mahu menggunakan svg tersuai saya sebagai ikon v tetapi saya tidak menemui sebarang penyelesaian dalam dokumentasi Vuetify v3. </p> <p>Dalam vuetify v2 saya boleh melakukan sesuatu seperti ini dalam vuetify.js: </p> <pre class="brush:php;toolbar:false;">eksport lalai Vuetify baharu({ ikon:{ nilai: { ujian: { komponen: Ujian, },</pre> <p>Saya boleh menggunakannya seperti ini:</p> <pre class="brush:php;toolbar:false;"><v-icon size="40">$vuetify.icons.test</v-icon></pre> <p>Bagaimanakah saya boleh melakukan perkara yang sama dalam Vuetify v3? Terima kasih atas bantuan anda :)</p>
P粉440453689
P粉440453689

membalas semua(1)
P粉676821490

Kod di bawah menunjukkan contoh menambahkan ikon tersuai pada Vuetify bersama set ikon mdi dan menggunakan kedua-dua ikon dalam komponen melalui alias.

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 (ikon tersuai anda)

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

Mana-mana SFC

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

Sumber asal: Thread

dalam saluran Vuetify Discord
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan