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

Question

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

        <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>使用其 CSScolor属性的值并将其映射到fill其 SVG 子项的属性中（使用fill="currentColor"）。

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

简单的例子：

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

在 CSS 中：

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

工作示例：

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

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

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

我建议不要使用!important.
默认情况下，Vuetifycolor使用2 × class特定性（即：）设置图标的of .theme--light.v-icon，因此我们需要使用稍高的东西i.v-icon.v-icon（1 × el + 2 × class）。

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

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

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