网页前端设计

http://www.86y.org

搜索文章

用css修改svg图标的的颜色

用声音读出全文关注我吧
 2022/8/9 9:34:36 阅读次数:1545

方式一:利用drop-shadow

给icon加样式 (利用原图标的阴影区域,同时将原图标移动超过之前父元素范围)

filter: drop-shadow(red 80px 0); transform: translateX(-80px); 给父元素加样式 (父元素超范围隐藏,正好把原图标的隐藏掉,显示阴影区域) overflow:hidden;

<div class="svg">
   <img src="./loading.svg" class="svg-color">
</div>

//css
.svg {
  width: 30px;
  height: 30px;
  overflow: hidden;
}
.svg-color {
  transform: translateX(30px);
  filter: drop-shadow(#ff0000 -30px 0px 0px);
}

如果想建立不同颜色的图标库的话,不推荐此方式

在angular material中使用时

import {MatIconRegistry} from '@angular/material';
import {DomSanitizer} from '@angular/platform-browser';
 
constructor( iconRegistry:MatIconRegistry ,domSanitizer:DomSanitizer ){
 iconRegistry.addSvgIcon('newIcon',domSanitizer.bypassSecurityTrustResourceUrl('assets/newIcon.svg'));
}
// 图标使用时
<mat-icon svgIcon="newIcon:icon1"></mat-icon>

方式二:

或者是直接修改svg内容里的fill填充颜色,也可以把svg内容复制到页面这样也可以用样式控制

.loading svg path{fill:red}

方式三:

或者是使用字体图标库


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭