Inline css var support

[Leonewu]

I just use a svg file which declares css variable in style attribute.

for example:
test.svg:
<svg><path style="--index: 1"></path><path style="--index: 2"></path></svg>

but it throws an error while transforming: Expected identifier but found "-"

[open-collective-bot]

Hey @Leonewu 👋,
Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers.
If you use SVGR at work, you can also ask your company to sponsor us ❤️.

[mthines]

+1 for this issue.

icon.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="--color-1: var(--c-alert-light-1); --color-2: var(--c-alert-text);">
  <circle cx="12" cy="12" r="12" fill="var(--color-1)"/>
  <path d="M8.5 11A1.5 1.5 0 107 9.5 1.5 1.5 0 008.5 11zm7 0A1.5 1.5 0 1014 9.5a1.5 1.5 0 001.5 1.5zM7 15a1 1 0 011-1h8a1 1 0 010 2H8a1 1 0 01-1-1z" fill="var(--color-2)" fill-rule="evenodd"/>
</svg>

console

Syntax error: Unexpected token

  3 | function SvgNeutral(props) {
  4 |   return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style={{
> 5 |     -color1: "var(--c-alert-light-1)",
    |     ^
  6 |     -color2: "var(--c-alert-text)"