react-inlinesvg如何动态的修改颜色SVG

这里我想修改颜色

.icon{fill:#ff4d4f;/* 修改填充颜色 */color:red;/* 此时SVG的fill会继承color的值 */}

importstylesfrom'./index.module.scss'importSVGfrom'react-inlinesvg'importclassNamesfrom'classnames'constHeader=()=>{constsiderbarArr=[{name:'海报模版',icon:'https://s2.ssl.qhres2.com/static/0f9e180526acbc8a.svg',},{name:'创建设计',icon:'https://s2.ssl.qhres2.com/static/0f9e180526acbc8a.svg',},{name:'line',},{name:'我的资源',icon:'https://s2.ssl.qhres2.com/static/0f9e180526acbc8a.svg',},]return(<div className={styles.main}>{siderbarArr.map(item=>item.name!=='line'?(<div className={classNames(styles.item,styles.active)}><SVGclassName={styles.icon}src={item.icon||''}/>{item.name}</div>):(<div className={styles.line}></div>))}</div>)}exportdefaultHeader

这样都是无效的

如何解决该问题呢？

filter:invert(14%)sepia(97%)saturate(7483%)hue-rotate(0deg)brightness(91%)contrast(119%);

使用filter颜色滤镜

如何快速生成任意颜色的滤镜值

你可以使用这个在线工具生成对应颜色的滤镜代码：
CSS Filter Generator (codepen.io)


在这里面操作即可