How to change or override common component in React js-CodePudding

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.

CodePudding user response：

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;

CodePudding user response：

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: