0
101
VistasHow to change or override common component in React js
I have one common component for which I want to change its color property to use it at other place.
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;
This is common component having primary blue and white color.
<ViewAllIcon className="ml8" fill="white" />
I am using it to change the fill color to white and green.
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
You could put the props directly to fill attribute
Something like this:
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;
Working Example:
·
Juan Pablo Isaza
Denunciar
0
change fill value to "currentColor" and than pass color var to component.
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
Denunciar
Responde la pregunta