使用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相同的语法，但没有为我的用例提供具体示例。

- Hippolyte Fayol

---

据我所知，无法使用属性来对它们进行样式设置，因此您必须使用CSS来为前置/后置图标设置样式。 - Traxo

Answer 1

在v-list-group的模板中使用v-icon替代prepend-icon属性放置在prependIcon插槽中，将为您提供所需的所有灵活性：

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

顺便提一下，还有一个appendIcon插槽可用。官方的Vuetify文档列出了可用的插槽，但对任何详细信息都保持沉默。

- Stefan Haberl

---

我似乎找不到这个的文档。你能否提供一个链接，让我查看相关内容？ - Ole Aldric

找到了：https://vuetifyjs.com/zh-Hans/components/text-fields#icon-slots - Ole Aldric

这是正确的答案，应该被接受为最佳答案。 - ladorm

插槽在2.6.0+中已经更新。现在，“slot”是一个弃用的语法，应该使用v-slot。 https://vuejs.org/v2/guide/components-slots.html#Named-Slots - lesovsky

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

注意: 如果不起作用，并且您正在使用作用域样式，请参见如何解决。

请勿仅使用.v-icon，因为例如可能会覆盖附加图标，这可能不是您想要的。
此外，！important不是一个好习惯，在这里我们不需要使用它。
所以根据组件旋转.v-list__group__header__prepend-icon类，甚至添加自己的类。检查元素以了解前置/附加图标的类别，因为它们并不总是相同的。
（如果您正在使用作用域样式，则可能无需添加自己的其他选择器来针对特定的图标进行目标化）。

代码示例

注意：我不知道有关于vuetify用于样式化前置/附加图标的专用类或属性。因此，如果这些存在或将来实现，可以使用它们。

- Traxo

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

- Bharath Ranganathan

Answer 4

我不能对Annes' answer发表评论，但我猜想重要的是要补充说明，在Vue 3中，您可以这样做来创建内部附加/前置：

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

- Nats

Answer 5

在开发vuetify 3时，我遇到了相同的问题，为了解决它，我给我的元素添加了一个类，然后使用了:deep。

例如：

<style scoped>
.item-icon :deep(.v-icon) {
    margin-right: 10px;
  } 
</style>

- Lynexor

Answer 6

这将起作用（取自官方文档）：

您可以使用插槽来扩展输入功能，而不是使用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>

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

- Billal Begueradj