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 color属性。有没有办法用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/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使用 color 的特异性（即2 × class）设置图标的.theme--light.v-icon，因此我们需要使用稍微更高的{{1} }（ i.v-icon.v-icon ）。

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

1 × el + 2 × class

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

Answer 2

也许这可以帮助

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

或者，如果您想使用内部CSS更改颜色，则可以在末尾添加一个样式标签。

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

如何在CSS中更改Vuetify V图标颜色

2 个答案: