Vuetify 3 : Utilisation de Svg pour l'icône v
P粉440453689
P粉440453689 2023-08-28 21:34:41
0
1
567
<p>Je souhaite utiliser mon svg personnalisé comme icône v mais je n'ai trouvé aucune solution dans la documentation Vuetify v3. </p> <p>Dans vuetify v2, je peux faire quelque chose comme ceci dans vuetify.js : </p> <pre class="brush:php;toolbar:false;">exporter le nouveau Vuetify par défaut({ Icônes:{ valeurs: { test: { composant: Test, },</pré> <p>Je peux l'utiliser comme ceci :</p> <pre class="brush:php;toolbar:false;"><v-icon size="40">$vuetify.icons.test</v-icon></pre> <p>Comment faire la même chose dans Vuetify v3 ? Merci pour votre aide :)</p>
P粉440453689
P粉440453689

répondre à tous(1)
P粉676821490

Le code ci-dessous montre un exemple d'ajout d'une icône personnalisée à Vuetify avec le jeu d'icônes mdi et d'utilisation des deux icônes dans un composant via des 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 (votre icône personnalisée)

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

Tout SFC

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

Source originale : Thread

dans la chaîne Vuetify Discord
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal