在 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-list-group 模板的prependIcon 插槽内使用v-icon（而不是prepend-icon 属性）将为您提供所需的所有灵活性：

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

顺便说一句，还有一个appendIcon 插槽可用。官方Vuetify documentation 提到了可用的插槽，但对任何细节都保持沉默。

Answer 2

正确定位并应用样式。
比如v-list-group：

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

但请注意例如v-text-field附加图标

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

注意：如果它不起作用，并且您使用的是作用域样式，请参阅how to resolve it。

注意不要只使用 .v-icon，因为例如您也可能会覆盖附加图标，这可能不是您想要的。
另外，!important 不是一个好习惯，我们不需要在这里使用它。
因此，只需根据组件旋转 .v-list__group__header__prepend-icon 类，甚至添加您自己的类。检查元素并查看前置/附加图标的类是什么，因为它并不总是相同。
（如果您使用的是范围样式，那么可能不需要添加您自己的额外选择器来定位特定图标）。

Example codepen

注意：我不知道任何 vuetify 自己的类或道具用于样式前置/附加图标。因此，如果这些存在或将来实施，请使用它们。

Answer 3

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

Answer 4

这会起作用（取自official documentation）：

您可以使用 prepend / append / append-outer 图标而不是使用 插槽来扩展输入的功能。

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

例如，对于 tex 字段组件，将工具提示文本留空会很有用，因为它可以在您输入时清除图标（我经历过这种情况）