Vuetify에서 프리펜드 아이콘으로 정의된 아이콘 스타일링

Vuetify에서 프리펜드 아이콘으로 정의된 아이콘 스타일링

보통 Vuetify에서 아이콘을 스타일링하기 위해 다음과 같은 작업을 합니다.

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

이 기능을 사용하여 동일한 효과를 얻을 수 있는prepend-icon여기와 같은 소품

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

문서에는 다음과 같이 기재되어 있습니다.prepend-icon는 와 같은 구문을 사용합니다.v-icon사용 사례에 대한 구체적인 예는 제공되지 않습니다.

사용방법v-icon내부prependIcon의 슬롯v-list-grouptemplate(의 템플릿)prepend-icon필요한 유연성을 모두 제공합니다.

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

여기도 있어요.appendIcon슬롯 사용 가능, btw.공식 Vuetify 문서에서는 사용 가능한 슬롯에 대해 언급하고 있지만 자세한 내용은 언급하지 않았습니다.

잘 겨냥해서 스타일링 해주세요.
예를 들어,v-list-group:

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

단, 예를 들면v-text-field추가 아이콘

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

메모: 동작하지 않고, 스코프 스타일을 사용하고 있는 경우는, 해결 방법을 참조해 주세요.

사용만 하지 않도록 주의한다. .v-icon예를 들어 추가 아이콘도 재정의할 수 있지만 원하는 아이콘이 아닐 수 있습니다.
또한.!important좋은 방법이 아니므로 여기서 사용할 필요가 없습니다.
그러니까 그냥 회전해.v-list__group__header__prepend-icon컴포넌트에 따라 클래스를 추가하거나 자신의 클래스를 추가할 수도 있습니다.요소를 검사하고 프리펜드/추가 아이콘의 클래스가 항상 동일하지는 않으므로 어떤 것인지 확인합니다.
(스코프 스타일을 사용하고 있는 경우는, 특정의 아이콘을 대상으로 하는 독자적인 실렉터를 추가할 필요는 없습니다).

코드펜의 예

주의: vuetify 자체 클래스나 스타일링 프리펜드/어펜드 아이콘 소품 등은 모릅니다.따라서 이러한 기능이 존재하거나 향후 구현될 경우 이를 사용하십시오.

많은 Veutify 항목에는 아이콘을 추가하거나 추가하는 슬롯이 있습니다.또한 이 아이콘을 통해 일반 v-icon 구성 요소처럼 색상과 크기를 지정할 수 있습니다.

<v-text-field>
  <template v-slot:append>        
    <v-icon color="green"> mdi-arrow-up-bold </v-icon> 
  </template>
</v-text-field>       

사이드 노트:또한 슬롯이므로 아이콘만 추가할 수 있는 것이 아닙니다.단, 툴팁 등 어떤 것도 추가할 수 있습니다.

문서: https://vuetifyjs.com/en/components/text-fields/ #icon-timeout

이 방법은 (공식 매뉴얼에서 인용) 다음과 같이 동작합니다.

프리펜드/추가/추가 아이콘을 사용하는 대신 슬롯을 사용하여 입력 기능을 확장할 수 있습니다.

<v-list-group>
<template v-slot:prepend>
    <v-tooltip bottom>
        <template v-slot:activator="{ on }">
          <v-icon v-on="on" color="yellow">place</v-icon>
        </template>
        tooltip text
      </v-tooltip>
    </template>
</v-list-group>

예를 들어 텍스트 필드 구성요소의 경우 입력 시 아이콘을 지울 수 있으므로 도구 설명 텍스트를 비워 두면 유용합니다(이 작업을 경험했습니다).

언급URL : https://stackoverflow.com/questions/50282241/styling-an-icon-defined-with-prepend-icon-in-vuetify