网页前端设计

方式一：利用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}

方式三：

或者是使用字体图标库

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