web-dev-qa-db-fra.com

Comment ajouter une icône SVG personnalisée dans Vuetify - Vue

J'utilise vuetify 1.1.8 et vue 3.0.0-rc.3. J'essaie d'utiliser certaines des icônes SVG personnalisées dans mon projet, que j'ai conçues, au lieu de celles par défaut icônes d'icônes de matériaux ou d'icônes FontAwesome prises en charge par vuetify

J'ai essayé d'utiliser vue-svg-loader pour charger mes icônes svg personnalisées et les utiliser comme composants. Quelque chose comme ça

<template>
    <icon-one></icon-one>
</template>

<script>
    import iconOne from './public/iconOne.svg'
    export default{
        components:{
                 iconOne
          }
    }
</script>

Mais le problème avec vue-svg-loader est que je ne peux pas les utiliser dans <v-text-field>'s append-icon et bien d'autres endroits où j'ai eu la liberté avec <v-icon>.

J'ai également lu les vuetify docs où ils ont mentionné l'utilisation d'icônes personnalisées mais je ne pense pas que cela aide aussi.

Est-ce que quelqu'un peut m'aider avec ça. Peut-être que je devrais essayer les images Sprite comme supporté par le matériau angulaire

TL; DR

J'ai des icônes SVG personnalisées et je veux les utiliser comme <v-icon>customIcon</v-icon> in vuetify

svgvuejs2iconsvuetify.js
9
The Observer Man

Vous pouvez en effet créer une icône vue à l'intérieur de son propre composant Vue single file), puis enregistrer ce composant afin que vuetify puisse l'utiliser à l'intérieur du Composant VICon (v-icon).

Pour créer une icône de composant vue, il vous suffit de placer un SVG à l'intérieur des balises de modèle comme indiqué dans le Vue Cookbook . Ce document devrait vous aider à utiliser le composant dans n'importe quelle application vue, également.

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

Ensuite, vous devez enregistrer ce composant auprès de vuetify. La configuration de Vuetify se trouve parfois dans le fichier d'index, ou dans la vue-cli moderne, elle se trouve dans @/src/plugins/vuetify.js.

Là, vous pouvez enregistrer votre composant comme indiqué sur site de Vuetify (vous avez déjà mentionné ce lien), mais peut-être que cette documentation est une mise à jour ou peu claire.

Maintenant, ce composant sera enregistré et peut être utilisé n'importe où à l'intérieur de VApp. Cependant, contrairement aux icônes standard, vous devez utiliser $ vuetify.icons. [Icon-name] dans l'emplacement de v-icon. Dans l'exemple Vuetify, l'icône est enregistrée en tant que "produit". Pour l'utiliser, vous devez inclure

<v-icon>>$vuetify.icons.product</v-icon>

J'ai ce travail dans un projet en cours. Je vais laisser une branche de l'état actuel ici .

Le composant icône se trouve dans/src/icons. La configuration de Vuetify se trouve dans/src/plugins, et le composant icône svg se trouve dans /src/components/PlotSelector.vue.

14
Jacob Goodwin

Per vuetify v2 docs

Créer un composant personnalisé qui contient le code d'icône svg

// CustomIcon.vue
<template>
  <svg>
    ...
  </svg>
</template>

Incluez le composant d'icône personnalisé dans vuetify config:

// vuetify.ts

import CustomIcon from '@/components/CustomIcon.vue'

export default new Vuetify({
  theme: {/**/},
  icons: {
    values: {
      custom: { // name of our custom icon
        component: CustomIcon, // our custom component
      },
    },
  },
})

Utilisez-le comme ça

<v-icon>$vuetify.icons.custom</v-icon>

Ou raccourci:

<v-icon>$custom</v-icon>

5
Traxo