如何在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>
      )
    );
  }

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

在此处输入图片说明

托比

我不认为有一种方法可以通过图像标签放置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>
)

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

更改 img 标签的颜色

我想在外部文件中更改 svg 的颜色并使用 img 标签导入

如何在离子应用程序中更改标签的颜色?

如何在git log中更改标签/分支名称的颜色?

如何在Shiny Dashboard中更改textInput的标签颜色

如何在Flutter中更改Slider标签的颜色?

如何在ConEmu中更改标签栏颜色

如何在Xcode中更改标签文本的颜色

如何在tvOS 13中更改标签的背景颜色?

如何在 Swift 中更改 tableViewCell 中标签的文本颜色?

如何在Kivy中动态更改标签背景颜色

如何在Mac的终端中更改活动标签的颜色?

如何在SwiftUI中更改标签项的颜色

如何在Angular中更改svg元素的颜色?

如何在 CSS 中更改 ::marker SVG 颜色?

如何在Donut Morris图表中更改标签颜色(自定义标签颜色)

如何使用js将<svg>标签更改为<img>标签?

更改img src SVG颜色

如何在文本中用*更改标签的颜色

如何在python pyqt5中连续更改标签颜色颜色

如何在R中的DT :: Datatable中更改这些按钮的标签并更改行的颜色?

如何更改 amcharts 中的标签文本颜色

如何更改SVG图像中的背景颜色?

如何更改没有“fill”标签的“svg”文件的颜色

如何更改svg的颜色?

如何在R中的轮廓图颜色栏中更改刻度标签的字体大小?

如果它在 css 中的伪类中,如何在悬停时更改外部 svg 颜色

如何在Android中更改ImageView源

如何在轴标签中获取颜色