如何在 css 中更改 Vuetify v-icon 颜色

Question

Vuetify v-icon通常采用类的颜色。 就我而言，当我的路由器链接处于活动状态时，我试图使用 css 类menu-icon更改其颜色。

        <v-btn icon class="menu-btn">
            <router-link to="/client/dashboard">
                <v-icon class="menu-icon">
                    mdi-gauge-full
                </v-icon>
                <div class="menu-titles">Dashboard</div>
            </router-link>
        </v-btn>

    .router-link-active .menu-icon {
        color: #2F80ED ;
    }

问题是v-icon似乎不接受 css 颜色属性。 有没有办法用 css 改变它？

Answer 1

<v-icon>使用其 CSS color属性的值并将其映射到它的 SVG 子fill="currentColor"的fill属性（使用fill="currentColor" ）。

所以你只需要在.v-icon上设置color CSS 值，它就会起作用：

简单的例子：

<v-icon large>mdi-domain</v-icon>

在 CSS 中：

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

工作示例：

 Vue.config.productionTip = false; Vue.config.devtools = false; new Vue({ el: '#app', vuetify: new Vuetify(), })

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

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <div id="app"> <v-app> <v-content> <v-icon>mdi-domain</v-icon> </v-content> </v-app> </div>

我建议不要使用!important 。
默认情况下，Vuetify 使用2 × class特异性（即： .theme--light.v-icon ）设置图标的color ，因此我们需要使用稍高一些的iv-icon.v-icon （ 1 × el + 2 × class ）。

---

显然，如果你想内联，你总是可以使用内联样式的反模式：

<v-icon large style="color: red;">mdi-domain</v-icon>

像任何反模式一样，不推荐使用。 但这是可能的。

Answer 2

也许这可以帮助

    <v-icon large color="green darken-2">mdi-domain</v-icon>

或者如果你想使用内部css改变颜色，你可以在最后添加一个这样的样式标签。

<style lang="scss" >
.classname {
  color: red !important;
}
</style>

Answer 3

就我而言，输入颜色名称不起作用，但输入十六进制值却起作用：

<v-icon color="#933">mdi-close</v-icon>

尽管在Vuetify 图标的文档中，您发现它通过放置名称来工作。

Answer 4

您应该添加到您的 css 文件中：

.theme--light.v-icon,
.theme--dark.v-icon {
    color: inherit !important;
}