web-dev-qa-db-fra.com

Taille de l'icône Vuetify

récemment, je travaillais sur une application utilisant Vuetify et j'ai eu du mal à changer les couleurs par défaut de Vuetify. J'ai donc finalement terminé avec ceci:

https://github.com/vuetifyjs/vuetify/issues/299

Comme son nom l'indique, j'ai ajouté le code suivant:

 <style lang="stylus">
  @require '../node_modules/vuetify/src/stylus/settings/_colors.styl'
  $theme := {
    primary: #009688
    accent: #FFC107
    secondary: #00796B
    info: #B2DFDB
    warning: $red.base
    error: $red.base
    success: $green.base
  }
  @require '../node_modules/vuetify/src/stylus/main.styl'
</style>

Dans App.vue

Donc, quand j'ai testé les changements de couleurs dans l'application, cela a fonctionné comme prévu, jusqu'à présent tout va bien. Ensuite, j'ai remarqué que cela a changé la taille des icônes, comme illustré ci-dessous:

Avant

Après

Donc, ma question est:

Existe-t-il un moyen de résoudre ce problème en n'utilisant pas CSS? Si c'est le cas, comment? Ou s'il n'y a aucun moyen, alors, comment dois-je le résoudre en utilisant CSS?

cssvue.jsvuejs2stylusvuetify.js
8
Eternal_N00B

Vous pouvez donner la taille des icônes dans px en utilisant la propriété size dans les icônes Vuetify.

<v-icon size="25">home</v-icon>
6
Isuru Chandrasiri

Malheureusement, dans la version actuelle (0.17.6), vous aurez besoin de CSS pour créer une taille d'icône personnalisée.

Si vous souhaitez définir une taille par défaut personnalisée de vos icônes dans votre application, vous devrez la cibler en CSS.

Pour cibler la taille des icônes, vous pouvez utiliser les éléments suivants:

.icon {
  font-size: 20px;
}

Si vous utilisez Vuetify v1.0.0-alpha.1 ou version ultérieure, <v-icon> le composant possède un attribut size que vous pouvez utiliser pour définir une taille exacte.

4
James Vansteenkiste

voici l'exemple de css en ligne de v-icon

<v-icon style="font-size: 5px;">home</v-icon>

voici mon échantillon de stylo

https://codepen.io/anon/pen/LdpgmY

2
Kent Dela Cruz Fueconcillo

Je recommande simplement d'utiliser un <i> tag et définissez vous-même les classes d'icônes si vous le pouvez. <v-icon> ne fournit de toute façon pas beaucoup d'avantages et la classe d'icônes v est celle qui définit une taille de police spécifique quand tout ce que vous voulez vraiment est la taille de la police: hériter.

0
Sensei