为什么引入SVG文件,给它定义属性不生效原理分析

背景: 我使用antd 的Icon组件引入SVG图片,但给svg图片定义styles样式时,不生效,为什么呢? 我们平时用antd组件库的 < ArrowRightOutlined  style={{color: 'red '}}>时为什么会生效呢,但我图一这样定义就不生效呢? 

原因:是因为这个SVG 文件的原因,是因为UI给我们生成的文件,就不能接收style属性(粗暴说法,其实Icon会转化这些属性)。 如图二所示, fill = 'none'  改为 fill="currentColor" 就可以接收color属性了,并把path标签上的fill属性删掉。

   
import { ReactComponent as RightArrow2 } from '@/assets/images/home/rightArrow2.svg'

 } alt="" />

为什么引入SVG文件,给它定义属性不生效原理分析_第1张图片

你可能感兴趣的:(前端,javascript)