React组件形式的SVG无法通过SCSS调整尺寸问题求助

问题根源在于你引入的SVG文件内部的<svg>标签自带了width和height内联属性，这些属性的优先级高于SCSS类选择器的样式，所以外部设置的宽高被覆盖；而fill属性因为SVG内部未定义，所以能正常生效。不用逐个修改SVG文件，有以下几种解决方式：

方案一：直接给SVG组件传递宽高Props #

React将SVG转换为组件后，支持直接传递width和height属性，这些属性会覆盖SVG内部的默认值：

<CustomerIcon className={styles.icon} width={100} height={100} />

方案二：用!important强制覆盖内联属性 #

在SCSS中通过!important提升样式优先级，强制覆盖SVG的内联宽高：

.icon{
    display:block;
    margin-bottom: 5%;
    fill: red;
    width: 100px !important;
    height: 100px !important;
}

方案三：批量移除SVG内部的宽高属性 #

如果需要统一处理大量SVG，可以用SVG优化工具（比如SVGO）批量移除<svg>标签的width和height属性，只保留viewBox。这样SVG会根据外部CSS的宽高自适应缩放——viewBox定义了SVG的坐标系统和比例，没有固定宽高时会自动适配外部样式。

内容的提问来源于stack exchange，提问作者ion loi