web-dev-qa-db-fra.com

Styliser une icône définie avec prepend-icon dans Vuetify

Normalement, pour styliser une icône dans Vuetify, nous ferons quelque chose comme

<v-icon large color="primary">comment</v-icon>

Comment obtenir le même effet en utilisant le prepend-icon accessoire comme ici

<v-list-group prepend-icon="comment">

La documentation indique prepend-icon utilise la même syntaxe que v-icon mais aucun exemple concret n'est fourni pour mon cas d'utilisation

vuejs2vuetify.js
7
Hippolyte Fayol

Ciblez-le correctement et appliquez le style.
Par exemple dans v-list-group:

.v-list__group__header__prepend-icon .v-icon {
    color: red;
}

Mais notez par exemple v-text-field append icône

.v-input__icon--append .v-icon { 
    color: purple;
}

REMARQUE: Si cela ne fonctionne pas et que vous utilisez des styles de portée, voir comment le résoudre .

Attention à ne pas utiliser seulement.v-icon car, par exemple, vous pouvez également remplacer l'icône d'ajout, ce qui n'est peut-être pas ce que vous voulez.
Aussi, !important n'est pas une bonne pratique et nous n'avons pas besoin de l'utiliser ici.
Il suffit donc de faire pivoter .v-list__group__header__prepend-icon classe selon le composant ou même ajoutez votre propre classe. Inspectez l'élément et voyez quelle est la classe pour l'icône de préfixe/ajout car ce n'est pas toujours la même chose.
(si vous utilisez des styles de portée, il n'est peut-être pas nécessaire d'ajouter vos propres sélecteurs supplémentaires pour cibler les icônes spécifiques).

Exemple codepen

Remarque: je ne connais pas les propres classes ou accessoires de vuetify pour styliser les icônes de pré-ajout/ajout. Donc, si ceux-ci existent ou sont mis en œuvre à l'avenir, utilisez-les.

11
Traxo

Utilisant un v-icon à l'intérieur de l'emplacement prependIcon du v-list-group modèle (au lieu du prepend-icon prop) vous donnera toute la flexibilité dont vous avez besoin:

<v-list-group>
  <v-icon slot="prependIcon" large color="primary">comment</v-icon>
</v-list-group>
3
Stefan Haberl

Cela peut être un peu tard, mais la bonne façon d'appliquer un style de couleur aux `` polices '' (c'est-à-dire les icônes de matériau) en utilisant v-icon tag utilise le système de classes de Vuetify.

text--{lighten|darken}-{n}https://vuetifyjs.com/en/styles/colors#classes

<v-icon class="primary--text">comment</v-icon>
<v-icon class="red--text">comment</v-icon>
<v-icon class="green--text lighten-3">comment</v-icon>

Vous pouvez définir primary, secondary, {custom}... couleurs du thème dans votre constructeur Vuetify.

0
Jason Haddix