Tengo 2 íconos, uno es un ícono clásico importado de Mui, el otro es un logo.svg personalizado, el problema es que quiero poder hacer que esos 2 íconos sean compatibles con el cambio de tema usando el proveedor de temas, si el tema es oscuro, entonces los íconos deberían cambiar los colores de oscuro a blanco Logré hacer esto con el ícono importado agregando color='primary' , pero el problema es el obstinado svg personalizado, ¿alguien tuvo este problema?
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} />
Hay dos pasos para lograr el objetivo.
Primero, encuentre una manera de pasar color a un icono svg
.
En segundo lugar, utilice las opciones de theming
y color pirmary
para el icono.
Al crear un componente de Logo
y usar el svg
en él:
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;
Es como sus otros componentes, el fill
y otros accesorios se le pasan.
Ahora, tenemos un componente Logo
(con extensión .jsx) igual que otros componentes con algunos accesorios.
Ahora es el momento de agregar el ícono del Logo
a la AppBar
de aplicaciones y pasar los accesorios de color relacionados:
<Logo fill={ theme ? darkTheme.palette.primary.light : darkTheme.palette.primary.dark } width="16" height="16" />
Es posible que también deba pasar la propiedad de width
y height
con el componente Logo
.
Versión de trabajo en CodeSandBox .