在Vuetify中使用prepend-icon定义的图标样式

Question

通常在Vuetify中设置一个图标,我们会做类似的事情

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

我们如何在使用prepend-icon这里的道具时获得相同的效果

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

文档说prepend-icon使用相同的语法,v-icon但没有为我的用例提供具体的例子

Answer 1

使用模板v-icon的prependIcon插槽内部v-list-group（而不是prepend-icon道具）将为您提供所需的所有灵活性：

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

还有一个appendIcon插槽可用，顺便说一句。官方Vuetify 文档提到了可用的插槽，但对任何细节都没有提及。

Answer 2

许多 Veutify 项目都提供了用于附加和前置图标的插槽。通过此图标可以像普通 v 图标组件一样设置颜色/大小。

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

Answer 3

正确定位并应用风格.
例如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自己的类或道具用于样式前置/追加图标.因此,如果这些存在或将来实施,请使用它们.