svg-icon图片修改颜色的两种方法

  • Post author:
  • Post category:其他





1:直接添加css

<svg-icon … style=“fill:currentColor; color:gray;” >


.svg{
    fill:currentColor; 
    color:gray;
  }
  
// 添加类名  这种方法会使一部分图片无法修改颜色。原因是svg图片源的path标签内有默认的fill属性(如下)
<pant fill="#000000" ......>
 或者是
<pant fill="rgb(153, 153, 153)" ......>



2:修改svg图片源

1:选中svg图片,使用记事本或者编辑器打开

2:找到里面


所有




path标签

里的

fill属性

并且删除,

然后再以第一种方法设置颜色即可

<pant fill="#000000" ......>
 或者是
<pant fill="rgb(153, 153, 153)" ......>

为了防止推荐受到影响,以下内容请忽略

< el-row>

< el-col :span=“24”>< div class=“grid-content bg-purple-dark”>< /div>< /el-col>

< /el-row>

< el-row>

< el-col :span=“12”>< div class=“grid-content bg-purple”>< /div>< /el-col>

< el-col :span=“12”>< div class=“grid-content bg-purple-light”>< /div>< /el-col>

< /el-row>

< el-row>

< el-col :span=“8”>< div class=“grid-content bg-purple”>< /div>< /el-col>

< el-col :span=“8”>< div class=“grid-content bg-purple-light”>< /div>< /el-col>

< el-col :span=“8”>< div class=“grid-content bg-purple”>< /div>< /el-col>

< /el-row>

< el-row>

< el-col :span=“6”>< div class=“grid-content bg-purple”>< /div>< /el-col>

< el-col :span=“6”>< div class=“grid-content bg-purple-light”>< /div>< /el-col>

< el-col :span=“6”>< div class=“grid-content bg-purple”>< /div>< /el-col>

< el-col :span=“6”>< div class=“grid-content bg-purple-light”>< /div>< /el-col>

< /el-row>

< el-row>

< el-col :span=“4”>< div class=“grid-content bg-purple”>< /div>< /el-col>

< el-col :span=“4”>< div class=“grid-content bg-purple-light”>< /div></ el-col>

< el-col :span=“4”>< div class=“grid-content bg-purple”>< /div>< /el-col>

< el-col :span=“4”>< div class=“grid-content bg-purple-light”>< /div></ el-col>

< el-col :span=“4”>< div class=“grid-content bg-purple”> < /div></ el-col>

< el-col :span=“4”>< div class=“grid-content bg-purple-light”>< /div>< /el-col>

< /el-row>



版权声明:本文为SYXZSs原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。