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

Youyzq2025-12-13 8:34

这里我想修改颜色

css 复制代码

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

javascript 复制代码

import styles from './index.module.scss'
import SVG from 'react-inlinesvg'
import classNames from 'classnames'

const Header = () => {
  const siderbarArr = [
    {
      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)}>
            <SVG className={styles.icon} src={item.icon || ''} />
            {item.name}
          </div>
        ) : (
          <div className={styles.line}></div>
        )
      )}
    </div>
  )
}

export default Header

这样都是无效的

如何解决该问题呢？

javascript 复制代码

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

使用filter颜色滤镜

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

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

在这里面操作即可