svg-icon图片修改颜色的两种方法
修改svg图片颜色
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>
更多推荐
所有评论(0)