Javascript 如何更改img标记中svg源的颜色？

当提供颜色道具时，我试图将svg图标的颜色从黑色更改为白色

export class CategoryIconComponent extends React.Component {


static displayName = 'CategoryIcon';

  state = { icon: null };

  static propTypes = {
    title: PropTypes.string,
    color: PropTypes.string,
  };

  static defaultProps = {
    title: null,
    color: '#fff',
  };

  componentDidMount() {
    const { title } = this.props;

    if (getTopCategoryIcon('Concrete Contractors') != null){

    if(typeof getTopCategoryIcon('Concrete Contractors') === 'string'){
      this.setState({ icon: getTopCategoryIcon('Concrete Contractors') });
    }

   else{
      getTopCategoryIcon(title).then((newIcon) => {
        this.setState({ icon: newIcon });
      });
    }
  }
}

  render() {
    const { icon } = this.state;
    const { color } = this.props;

    return (
      icon && (
        <TextIconContainer>

           // I want to be able to change color of the icon from black to white via color prop here
           // something like
          <img src={icon} width={25} height={25} color={color} />
        </TextIconContainer>
      )
    );
  }

导出类categoryIncomponent扩展React.Component{
静态显示名称='CategoryIcon'；
状态={icon:null}；
静态类型={
标题：PropTypes.string，
颜色：PropTypes.string，
};
静态defaultProps={
标题：空，
颜色：“#fff”，
};
componentDidMount（）{
const{title}=this.props；
if（getTopCategoryIcon（“混凝土承包商”）！=null）{
if（getTopCategoryIcon（“混凝土承包商”）的类型==“字符串”）{
this.setState（{icon:getTopCategoryIcon（'Concrete Contractors'）}）；
}
否则{
getTopCategoryIcon（标题）。然后（（新图标）=>{
this.setState（{icon:newIcon}）；
});
}
}
}
render（）{
const{icon}=this.state；
const{color}=this.props；
返回(
图标&&(
//我想能够改变颜色的图标从黑色到白色通过颜色道具在这里
//差不多
)
);
}

有没有一种css方法可以做到这一点？或者我可以点击svg组件并更改它的任何其他方法

---

我认为没有办法通过图像标签放置SVG，但我能够通过将SVG用作简单的组件来实现这一点：

import React from 'react'

export const MySvg = ({ color }) => (
  <svg style={{ fill: color }}>
    ...
    ...
  </svg>
)

从“React”导入React
导出常量MySvg=（{color}）=>(
...
...
)

然后在组件中使用：

<MySvg color={color} />

我不认为这是一个解决办法，或黑客-恰恰相反。我已经能够实现一些令人印象深刻的主题和定制使用这种技术

显然，您可以扩展此方法以直接操纵填充：

export const MySvg = ({ color }) => (
  <svg fill={color}>
    ...
    ...
  </svg>
)

export const MySvg=（{color}）=>(
...
...
)

所以我需要使用svg组件来实现这一点？我如何将外部svg信息传递给它？我从另一个位置获取src为了使此方法工作，您需要svg的源代码。svg只是代码-如果它适合您的使用，您可以下载svg，用文本编辑器打开，您将看到它只是一个H在我的回答中，

…

标记表示SVG文件的代码。