gpt4 book ai didi

javascript - 如何更改 img 标签中 svg 源的颜色?

转载 作者:行者123 更新时间:2023-12-04 10:43:59 29 4
gpt4 key购买 nike

当提供颜色 Prop 时,我试图将 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 组件并更改它?

enter image description here

最佳答案

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

关于javascript - 如何更改 img 标签中 svg 源的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59797062/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com