web-dev-qa-db-ja.com

Vuetifyアイコンのサイズ

最近、Vuetifyを使用してアプリを作成していて、Vuetifyのデフォルトの色を変更するのに問題がありました。だから私は最終的にこれで終わりました：

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

それが言うように、私は次のコードを追加しました：

 <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>

App.vueで

したがって、アプリで色の変更をテストしたところ、期待どおりに機能し、これまでのところ良好です。次に、次の図に示すように、アイコンのサイズが変化することに気付きました。

変更前

後

だから、私の質問は：

CSSを使用しないことでこの問題を解決する方法はありますか？もしそうなら、どうですか？または、方法がない場合は、CSSを使用してそれをどのように解決すべきですか？

cssvue.jsvuejs2stylusvuetify.js
8
Eternal_N00B

pxアイコンのsizeプロパティを使用して、Vuetifyにアイコンサイズを指定できます。

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

残念ながら、現在のバージョン（0.17.6）では、カスタムアイコンサイズを作成するためにCSSが必要になります。

アプリ全体でアイコンのカスタムデフォルトサイズを設定する場合は、CSSをターゲットにする必要があります。

アイコンのサイズをターゲットにするには、以下を使用できます。

.icon {
  font-size: 20px;
}

Vuetify v1.0.0-alpha.1以降を使用している場合は、<v-icon>コンポーネントには、正確なサイズを設定するために使用できるsize属性があります。

4
James Vansteenkiste

これはv-iconからのインラインCSSのサンプルです

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

これが私のサンプルペンです

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

2
Kent Dela Cruz Fueconcillo

<i>タグを付け、可能であれば自分でアイコンクラスを設定します。 <v-icon>はとにかく多くの利点を提供していません。v-iconクラスは、本当に必要なすべてがfont-size：inheritである場合に特定のfont-sizeを設定するクラスです。

0
Sensei