Vuetify 3: SVG für V-Symbol verwenden
P粉440453689
P粉440453689 2023-08-28 21:34:41
0
1
569
<p>Ich möchte mein benutzerdefiniertes SVG als V-Symbol verwenden, habe aber in der Vuetify v3-Dokumentation keine Lösung gefunden. </p> <p>In vuetify v2 kann ich in vuetify.js so etwas tun: </p> <pre class="brush:php;toolbar:false;">export default new Vuetify({ Symbole:{ Werte: { prüfen: { Komponente: Test, },</pre> <p>Ich kann es so verwenden:</p> <pre class="brush:php;toolbar:false;"><v-icon size="40">$vuetify.icons.test</v-icon></pre> <p>Wie mache ich dasselbe in Vuetify v3? Vielen Dank für Ihre Hilfe :)</p>
P粉440453689
P粉440453689

Antworte allen(1)
P粉676821490

下面的代码显示了将自定义图标与 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 频道中的线程

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage