web-dev-qa-db-ja.com

Vuetifyでprepend-iconで定義されたアイコンのスタイル設定

通常、Vuetifyでアイコンのスタイルを設定するには、次のようにします

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

ここのようなprepend-iconプロップを使用しているときに同じ効果を得るには

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

ドキュメントには、prepend-iconがv-iconと同じ構文を使用していると書かれていますが、私のユースケースについて具体的な例は提供されていません

vuejs2vuetify.js
7
Hippolyte Fayol

適切にターゲットを設定し、スタイルを適用します。
たとえばv-list-groupの場合：

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

しかし、たとえばv-text-field追加アイコンに注意してください

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

注：動作せず、スコープ付きスタイルを使用している場合は、 解決方法 を参照してください。

only.v-iconを使用しないように注意してください。たとえば、追加アイコンもオーバーライドできますが、これは必要なものではない可能性があります。
また、!importantは良い習慣ではないため、ここで使用する必要はありません。
したがって、コンポーネントに応じて.v-list__group__header__prepend-iconクラスを回転するか、独自のクラスを追加することもできます。要素を検査し、常に同じではないため、追加/追加アイコンのクラスを確認します。
（スコープスタイルを使用している場合、特定のアイコンをターゲットにするために独自のセレクターを追加する必要はおそらくありません）。

codepenの例

注：prepend/appendアイコンをスタイリングするためのvuetify独自のクラスや小道具は知りません。これらが存在するか、将来実装される場合は、それらを使用してください。

11
Traxo

（v-icon propの代わりに）v-list-groupテンプレートのprependIconスロット内でprepend-iconを使用すると、必要な柔軟性がすべて得られます。

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

これは少し遅いかもしれませんが、v-iconタグを使用して「フォント」（つまりマテリアルアイコン）にカラースタイリングを適用する適切な方法は、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>

Vuetifyコンストラクターでprimary, secondary, {custom}...テーマカラーを定義できます。

0
Jason Haddix