Presentation attributes in Svg tag show TS error

[rubenvar]

Describe the bug

In a TS project, when defining any presentation attribute in a <Svg> element, I get the following TS error:

(JSX attribute) strokeWidth: string
No overload matches this call.
  Overload 1 of 2, '(props: SVGProps | Readonly<SVGProps>): Svg', gave the following error.
    Type '{ children: Element[]; width: number; height: number; viewBox: string; strokeWidth: string; strokeLinecap: string; strokeLinejoin: string; style: { marginRight: number; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Svg> & Readonly<SVGProps> & Readonly<{ children?: ReactNode; }>'.
      Property 'strokeWidth' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Svg> & Readonly<SVGProps> & Readonly<{ children?: ReactNode; }>'.
  Overload 2 of 2, '(props: SVGProps, context: any): Svg', gave the following error.
    Type '{ children: Element[]; width: number; height: number; viewBox: string; strokeWidth: string; strokeLinecap: string; strokeLinejoin: string; style: { marginRight: number; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Svg> & Readonly<SVGProps> & Readonly<{ children?: ReactNode; }>'.
      Property 'strokeWidth' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Svg> & Readonly<SVGProps> & Readonly<{ children?: ReactNode; }>'.ts(2769)

The svg is rendered correctly.

To Reproduce

1. Use a presentation attribute in a <Svg> tag, ie. <Svg strokeWidth={2}>...</Svg>.
2. See the TS error.

See the reproduction in a TS codesandbox project. Note that the small svg icon is rendered correctly.

Expected behavior

It shouldn't show a TS error in these (as per the docs) allowed attributes.

Desktop (please complete the following information):

• I see the error in my VSCode (1.67.2) editor (in MacOS 11.6.6), as well as in codesandbox online.
• React-pdf 2.1.1

[papack]

i create a Pullrequest with a Solution in #2082

[papack]

INFO: this issue should be solved see PR #1798

[jeetiss]

@papack can i close this issue then?

[papack]

@jeetiss my problem is fixed. this bug should also be fixed with it. i found this ticket via google when i had the problem. In my opinion it can be closed. But i am not the ticket creator or a maintainer. if i was a maintainer i would close it and ask @rubenvar to open it again if his problem still exists :)

[rubenvar]

I can't re-open the issue, but the issue still exists. Please check the basic reproduction in codesandbox.

After updating @react-pdf/renderer to the last version (3.1.3) I get the following TS error when using valid presentation attributes:

No overload matches this call.
  Overload 1 of 2, '(props: PropsWithChildren<SVGProps> | Readonly<PropsWithChildren<SVGProps>>): Svg', gave the following error.
    Type '{ children: Element[]; width: number; height: number; viewBox: string; strokeWidth: string; strokeLinecap: string; strokeLinejoin: string; style: { marginRight: number; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Svg> & Readonly<PropsWithChildren<SVGProps>> & Readonly<...>'.
      Property 'strokeWidth' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Svg> & Readonly<PropsWithChildren<SVGProps>> & Readonly<...>'.
  Overload 2 of 2, '(props: PropsWithChildren<SVGProps>, context: any): Svg', gave the following error.
    Type '{ children: Element[]; width: number; height: number; viewBox: string; strokeWidth: string; strokeLinecap: string; strokeLinejoin: string; style: { marginRight: number; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Svg> & Readonly<PropsWithChildren<SVGProps>> & Readonly<...>'.
      Property 'strokeWidth' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Svg> & Readonly<PropsWithChildren<SVGProps>> & Readonly<...>'.ts(2769)

[rubenvar]

Ok, I found out that adding the presentation attributes in the SVGProps interface declaration here would solve the issue:

interface SVGProps extends NodeProps {
  /**
  * Enables debug mode on page bounding box.
  * @see https://react-pdf.org/advanced#debugging
  */
  debug?: boolean;
  width?: string | number;
  height?: string | number;
  viewBox?: string;
  preserveAspectRatio?: string;
+ strokeWidth?: string;
}

Of course adding just one changes the TS error to show on the next attribute. All the valid attributes (as per the docs) should be added I guess.

Would this be the right way to do it? I can try to send a PR if it will help :)

[jeetiss]

Sounds like a great plan! I will merge it

[TheMikeyRoss]

strokeLinejoin works but throws a TS warning