在 Vuetify 中设置使用前置图标定义的图标样式

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

.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 class，甚至添加您自己的 class。检查元素并查看 class 是什么 prepend/append 图标，因为它并不总是相同的。
（如果您使用的是作用域样式，那么也许不需要添加您自己的额外选择器来定位特定图标）。

Example codepen

注意：我不知道有任何 vuetify 自己的 classes 或样式道具 prepend/append 图标。因此，如果这些存在或将来实施，请使用它们。

Answer 2

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

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

Instead of using prepend / append / append-outer icons you can use slots to extend input's functionality.

<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 字段组件，将工具提示文本留空会很有用，因为它可以在您输入时清除图标（我体验过）

Answer 4

许多 Veutify 项目都提供了用于附加和前置图标的插槽。通过这个图标可以 colored/sized 就像一个普通的 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 5

我无法评论，但我想重要的是要补充一点，在 Vue 3 中你可以这样做来创建一个内部追加/前置：

<v-text-field> 
    <template v-icon:appendInner>
        <font-awesome-icon icon='eye'>
    </template>
</v-text-field>

在 Vuetify 中设置使用前置图标定义的图标样式

Styling an icon defined with prepend-icon in Vuetify

vuejs2

vuetify.js