Issue with SVG attributes typing

[slauzinho]

The following SVG:

<svg
    viewBox="0 0 14 11"
    fill="none"
    stroke="currentColor"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M1 3.50568V6.00319C1 7.56466 2.70698 10 7.13139 10C11.6948 10 13.2628 9.71882 13.2628 8.00203V5.50369"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
    <path
      d="M3.78692 1.0073C3.43831 0.981093 3.08801 1.02562 2.75705 1.13822C2.42608 1.25081 2.12129 1.42913 1.86099 1.66249C1.60068 1.89584 1.39023 2.1794 1.24227 2.49614C1.09431 2.81287 1.01191 3.15625 1 3.50563C1 5.06628 2.70698 7.50166 7.13139 7.50166C11.6948 7.50166 13.2628 7.22126 13.2628 5.50365C13.2628 4.35912 11.591 3.50563 9.91831 3.50563C7.20088 3.50563 7.5148 1.0073 3.78692 1.0073Z"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
    <path
      d="M6.01577 4.00513C6.01577 4.41879 4.94809 4.81693 4.29898 4.69184C4.03235 4.64811 3.78604 4.52218 3.59447 4.33164C3.4029 4.14109 3.27565 3.89546 3.23048 3.62907C3.22979 3.51341 3.25328 3.39889 3.29945 3.29284C3.34563 3.1868 3.41346 3.09158 3.4986 3.01329C3.58373 2.935 3.6843 2.87538 3.79384 2.83824C3.90337 2.80111 4.01946 2.78728 4.13466 2.79765C4.75025 2.79765 6.01577 3.46393 6.01577 4.00513Z"
      fill="#424242"
    />
  </svg>

Results in the error:

Type '{ d: string; strokeLinecap: string; "stroke-linecap": "round"; strokeLinejoin: string; "stroke-linejoin": "round"; }' is not assignable to type 'ElementAttrs<SVGAttributes>'.
  Property 'strokeLinecap' does not exist on type 'ElementAttrs<SVGAttributes>'. Did you mean ''stroke-linecap''?

15       stroke-linecap="round"
         ~~~~~~~~~~~~~~


Found 2 errors in the same file, starting at: src/components/SvgIcon.vue:10

Happening only in "vue-tsc": "^0.36.0"

Repro link: https://stackblitz.com/edit/vitejs-vite-ebcfo6?file=src/components/SvgIcon.vue

[mirsella]

Happening to me too.
Got it for enable-background, which i was useless and deprecated in my case so i just removed it,
but also for font-size which I wasn't able to fix.

thanks

[johnsoncodehk]

Duplicate of #1383

[SegaraRai]

I think the real problem is that Volar always tries to refer to it in camelCase while the type definition uses kebab-case.
I'm not familiar with the implementation, so I don't know if this is correct, but can't we make it work both props, for example by doing the following?

type CamelOrKebab<KC, KK, T> = KC extends keyof T
  ? T[KC]
  : KK extends keyof T
  ? T[KK]
  : never;

interface Foo {
  barCamel: number;
  "bar-kebab": string;
}

type TestCamel = CamelOrKebab<"barCamel", "bar-camel", Foo>;
type TestKebab = CamelOrKebab<"barKebab", "bar-kebab", Foo>;
type TestNever = CamelOrKebab<"bazFoo", "baz-foo", Foo>;

[johnsoncodehk]

@SegaraRai Thanks for the suggestion, I still looking for a solution, please track #929.