Rendering Custom SVG instead of Inbuilt Chevrons

[JamCodesSometimes]

I'm just starting out with working on react-day-picker and want to change the chevrons to my custom svgs which is:

instead of the inbuilt Chevrons, but I'm unable to do so using the components prop. I tried to follow another discussion about the Chevrons related to the rotation but still haven't found success.

I would appreciate any help. I've not applied personal styling or customization yet.

[owieth]

You could do something like the following:

components={{
  Chevron: ({ orientation }) =>
    orientation === "left" ? (
      <ChevronLeft className="h-4 w-4" />
    ) : (
      <ChevronRight className="h-4 w-4" />
    ),
}}