[英]How to change Vuetify v-icon color in css
Vuetify v-icon
usually takes its color with a class. Vuetify
v-icon
通常采用类的颜色。 In my case, I am trying to change its color with a css class menu-icon
when my router link is active.就我而言,当我的路由器链接处于活动状态时,我试图使用 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 ;
}
The problem is v-icon
does not seems to accept css color attribute.问题是
v-icon
似乎不接受 css 颜色属性。 Is there a way to change it with css ?有没有办法用 css 改变它?
<v-icon>
uses the value of its CSS color
property and maps it into the fill
property of it's SVG children (using fill="currentColor"
). <v-icon>
使用其 CSS color
属性的值并将其映射到它的 SVG 子fill="currentColor"
的fill
属性(使用fill="currentColor"
)。
So you only need to set the color
CSS value on .v-icon
, and it will work:所以你只需要在
.v-icon
上设置color
CSS 值,它就会起作用:
Simple example:简单的例子:
<v-icon large>mdi-domain</v-icon>
In CSS:在 CSS 中:
i.v-icon.v-icon {
color: red;
}
Working example:工作示例:
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>
I advise against using !important
.我建议不要使用
!important
。
By default, Vuetify sets the color
of icons using a 2 × class
specificity (ie: .theme--light.v-icon
), so we need to use something slightly higher iv-icon.v-icon
( 1 × el + 2 × class
).默认情况下,Vuetify 使用
2 × class
特异性(即: .theme--light.v-icon
)设置图标的color
,因此我们需要使用稍高一些的iv-icon.v-icon
( 1 × el + 2 × class
)。
Obviously, if you want to do it inline you can always go with the anti-pattern of inline style:显然,如果你想内联,你总是可以使用内联样式的反模式:
<v-icon large style="color: red;">mdi-domain</v-icon>
Like any anti-pattern, it's not recommended .像任何反模式一样,不推荐使用。 But it's possible.
但这是可能的。
Maybe this can help也许这可以帮助
<v-icon large color="green darken-2">mdi-domain</v-icon>
Or if you want to change color using internal css, you can add a style tag like this at the end.或者如果你想使用内部css改变颜色,你可以在最后添加一个这样的样式标签。
<style lang="scss" >
.classname {
color: red !important;
}
</style>
In my case, didn't work putting the color's name, but it worked putting the hexadecimal value:就我而言,输入颜色名称不起作用,但输入十六进制值却起作用:
<v-icon color="#933">mdi-close</v-icon>
Despite the fact that in the documentation of the Vuetify icons , you find that it works by putting the names.尽管在Vuetify 图标的文档中,您发现它通过放置名称来工作。
You should add to your css file:您应该添加到您的 css 文件中:
.theme--light.v-icon,
.theme--dark.v-icon {
color: inherit !important;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.