SVG Icons: Clicking on path prevents click

[melloware]

Describe the bug

Clicking on a SVG version of the icon doesn't always trigger a click event if you click on any painted path of the SVG.

Workaround:

svg.p-icon {
  pointer-events: auto;
}

svg.p-icon g {
  pointer-events: none;
}

Reproducer

https://stackblitz.com/edit/react-gu3eb7

PrimeReact version

9.6.0

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

1. Click on the sort icon in the header.
2. You might have to move your mouse pointer directly over a painted parted of the SVG and keep clicking you will see the click events are "swallowed".

Expected behavior

Clicking on the SVG icon should pass the click event through to the element below it.

See: https://stackoverflow.com/questions/22483643/svg-still-receives-clicks-even-if-pointer-events-visible-painted/

See: https://stackoverflow.com/questions/28282811/how-can-i-pass-only-clicks-through-a-svg-with-pointer-events