svg-icon图标不能改颜色

WEB前端 · 2023-10-25 · 478 人浏览

在使用vue3开发的时候 svg-icon图标不能改颜色!

首先为什么svg-icon图标不能改颜色 因为在下载图标的时候自己选了颜色里面有一控制颜色的属性:fill 因此我们在外部使用css如:svg{color:red} 就无法改变颜色了!

改变里面的颜色就有如下方案

1、改变svg-icon图片代码中的fill属性的值(常用)
直接在fill属性中添加颜色;fill="#fff";
或者:在内部改为fill=currentColor;
就可以使用color属性在css代码中,给svg图片改变颜色了
2、在svg标签中定义添加一个fill:currentColor,然后添加color:red,就可以修改svg图标的颜色了
.svg{ fill:currentColor; color:red; }
VUE

上一篇 : gRPC的学习

没有下一篇了

状态 统计 图床 又拍云提供CDN加速和云存储 阿里云提供服务计算服务

Powered by Typecho • Theme Jasmine