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

Question

当提供颜色道具时，我正在尝试将 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>
      )
    );
  }

有没有 CSS 方法可以做到这一点？或任何其他方式我可以利用 svg 组件并更改它？

Answer 1

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

import React from 'react'

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

然后在你的组件中使用：

<MySvg color={color} />

我不认为这是一种解决方法，也不是一种黑客行为——恰恰相反。使用这种技术，我已经能够实现一些令人印象深刻的主题化和自定义。

显然你可以扩展这个方法来直接操作填充：

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