0
250
ViewsHow to change a custom SVG icon color to be compatible with theme provider in Materiel-UI?
I have 2 icons one is a classic icon imported from Mui , the other is a custom logo.svg , the problem is I want to be able make those 2 icons compatible with theme switch using theme provider, if the theme is dark then icons should change colors from dark to white I managed to do this with the imported icon by adding color='primary' , but the problem is the stubborn custom svg, did any one had this issue ?
const useStyles = makeStyles((theme) => ({
icon: {
fontSize: 35,
//color: 'grey',
'&:hover': {
//color: 'white',
backgroundColor: 'transparent',
},
},
}));
const iconStyle = {
padding: 2,
marginTop: 0,
marginBottom: 0,
//backgroundColor: '#ef6c00',
borderRadius: '50%',
//fill: '#222222',
//fill: 'grey',
'&:hover': {
color: 'white',
},
};
// Custom svg icon
<Logo style={iconStyle} width='60' height='60' />
// Mui icon compatible with theme provider.
<EmojiObjectsIcon color='primary' className={classes.icon} onClick={switchTheme} />
1 answers
Answer question0
There are two steps to achieve the goal.
First, find a way to pass color to a svg icon.
Second, use the pirmary color and theming options for the icon.
First
By creating a Logo component and using the svg on it:
const Logo = ({ fill, width, height }) => (
<svg
fill={fill} // ---> here
width={width} // ---> here
height={height} // ---> here
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.707 8.293a1 1 0 0 1 0 1.414L15.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L14 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L12.586 12l-2.293-2.293a1 1 0 1 1 1.414-1.414L14 10.586l2.293-2.293a1 1 0 0 1 1.414 0z"
fill={fill} // ---> here
/>
<path
clipRule="evenodd"
d="M22 5a1 1 0 0 0-1-1H9.46a2 2 0 0 0-1.519.698l-5.142 6a2 2 0 0 0 0 2.604l5.142 6A2 2 0 0 0 9.46 20H21a1 1 0 0 0 1-1V5zm-2 13H9.46l-5.143-6L9.46 6H20v12z"
fill={fill} // ---> here
/>
</svg>
);
export default Logo;
It's like your other components, the fill and other props are passed to it.
Now, we have a Logo component (with .jsx extension) as same as other components with some props on it.
Second
Now time to add Logo icon to the AppBar and pass the related color props:
<Logo
fill={
theme
? darkTheme.palette.primary.light
: darkTheme.palette.primary.dark
}
width="16"
height="16"
/>
You may also need to pass the width and height property with the Logo component.
Working version on CodeSandBox.