Invalid HTML attributes rendered using Astro + Preact

[moritzlang]

Describe the bug

Hey!

I encountered a problem when rendering an icon in a Preact component using Astro. In the StackBlitz project you can see that the rendered SVG contains attributes in camel-case (strokeWidth instead of stroke-width), which causes a visual bug since the HTML is not valid.

Any idea on how to fix this?

Thanks for your help! Moritz

Reproduction

https://stackblitz.com/edit/github-wpq4zq?file=astro.config.mjs

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm

Used Package Manager

npm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• [X] The provided reproduction is a minimal reproducible of the bug.

[userquin]

It seems a problem with Astro: https://stackblitz.com/edit/github-wpq4zq-wuz3k4?file=src%2Fpages%2Findex.astro