I am currently working on a component that involves changing the color of an SVG icon from black to white when a color prop is given.
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 am looking for a way to change the color of the icon from black to white using the color prop here
// perhaps something like
<img src={icon} width={25} height={25} color={color} />
</TextIconContainer>
)
);
}
Is there a CSS method that can achieve this, or any other approach to modify the color of the SVG component?