How to set up TypeScript types for interop with libraries like react-icons?

[osdiab]

Hi all, react-icons types for the icons that it exports, their component props extend the React.SVGAttributes type to allow any existing SVG attributes to be applied in addition to the extra that the library contains.

However, after applying this to my tsconfig:

    "paths": {
      "react": ["./node_modules/preact/compat/"],
      "react-dom": ["./node_modules/preact/compat/"]
    }

I found the preact/compat types don't actually export SVGAttributes under the React namespace (as well as a number of other types in the React typings), so I tried creating a react.d.ts file with contents like so:

declare namespace React {
  type SVGAttributes = preact.JSX.SVGAttributes;
}

and then include it in paths like this:

    "paths": {
      "react": ["./node_modules/preact/compat/", "./types/react.d.ts"],
      "react-dom": ["./node_modules/preact/compat/"]
    }

That got it so that VSCode was showing me the types when I control-click on SVGAttributes, but tsc doesn't pick that up and then typechecking fails.

Any suggestions? Thanks!