0
102
ViewsCómo cambiar o anular el componente común en React js
Tengo un componente común para el que quiero cambiar su propiedad de color para usarlo en otro lugar.
const ViewAllIcon = (props) => ( <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 26 27" {...props} > <path fill="var(--primary)" d="M13 0C5.832 0 0 5.86 0 13.061c0 7.202 5.832 13.062 13 13.062s13-5.86 13-13.062C26 5.86 20.168 0 13 0z" /> <path fill="#FFF" d="M14.764 13.061l-4.437-4.726c-.48-.512-.48-1.344 0-1.856s1.261-.512 1.742 0l5.357 5.708c.454.483.454 1.266 0 1.749l-5.357 5.707c-.48.512-1.261.512-1.742 0-.48-.512-.48-1.343 0-1.855l4.437-4.727z" /> </svg> ); export default ViewAllIcon;Este es un componente común que tiene un color primario azul y blanco.
<ViewAllIcon className="ml8" fill="white" /> Lo estoy usando para cambiar el color de relleno a blanco y verde. 
·
Juan Pablo Isaza
2 answers
Answer question0
Podrías poner los accesorios directamente para llenar el atributo
Algo como esto:
const ViewAllIcon = (props) => ( <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 26 27" {...props} > <path fill={props.fill} // <--- UPDATE HERE! d="M13 0C5.832 0 0 5.86 0 13.061c0 7.202 5.832 13.062 13 13.062s13-5.86 13-13.062C26 5.86 20.168 0 13 0z" /> <path fill="#FFF" d="M14.764 13.061l-4.437-4.726c-.48-.512-.48-1.344 0-1.856s1.261-.512 1.742 0l5.357 5.708c.454.483.454 1.266 0 1.749l-5.357 5.707c-.48.512-1.261.512-1.742 0-.48-.512-.48-1.343 0-1.855l4.437-4.727z" /> </svg> ); export default ViewAllIcon;Ejemplo de trabajo:
·
Juan Pablo Isaza
Report
0
cambie el valor de relleno a "color actual" y luego pase la variable de color al componente.
ViewAllIcon({ color: 'var(--primary)' }) or <ViewAllIcon color={'var(--primary)'} /> const ViewAllIcon = (props) => ( <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 26 27" {...props} > <path fill="currentColor" d="M13 0C5.832 0 0 5.86 0 13.061c0 7.202 5.832 13.062 13 13.062s13-5.86 13-13.062C26 5.86 20.168 0 13 0z" /> <path fill="currentColor" d="M14.764 13.061l-4.437-4.726c-.48-.512-.48-1.344 0-1.856s1.261-.512 1.742 0l5.357 5.708c.454.483.454 1.266 0 1.749l-5.357 5.707c-.48.512-1.261.512-1.742 0-.48-.512-.48-1.343 0-1.855l4.437-4.727z" /> </svg> ); export default ViewAllIcon;
·
Juan Pablo Isaza
Report
Answer question