如何在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属性（使用fill="currentColor"）。

因此您只需要在color上设置.v-icon 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(),
})

i.v-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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-content>
      <v-icon>mdi-domain</v-icon>
    </v-content>
  </v-app>
</div>

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

---

很显然，如果要内联，则可以始终使用内联样式的anti-pattern：

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