0
242
Views¿Cómo cambiar el color de un icono SVG personalizado para que sea compatible con el proveedor de temas en Material-UI?
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} /> 
1 answers
Answer question0
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.
Primero
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.
Segundo
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 .