Convert SVG attributes for React?

[justingrant]

Feature request: it'd be great if this extension would also convert SVG attributes like fill-rule to JS-friendly camelCase. React will throw console warnings if you try to use an inline SVG image that uses a kebab-case attribute. Repro: https://codesandbox.io/s/determined-ishizaka-col9bc?file=/src/index.js

Here's an example:

const PinIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="9" height="17" fill="currentColor" viewBox="0 0 9 17">
    <path
      fill-rule="evenodd"
      d="M1 0h7s0 2.134-1.5 2.802v5.11C8.48 8.559 9 11.8 9 11.8H5.75l-.85 5h-.8l-.85-5H0s.41-3.277 2.5-3.899V2.788C1.064 2.104 1 0 1 0Zm4.1 8.767v-6.44c.457-.287.65-.827.65-.827h-2.5s.206.53.65.818v6.449C2.71 8.945 2.25 10.5 2.25 10.5h1.8l.45 2 .45-2h1.8S6.234 8.948 5.1 8.767Z"
      clip-rule="evenodd"
    />
  </svg>
);

Render this in a React app. Result:

react-dom.development.js:86 Warning: Invalid DOM property `fill-rule`. Did you mean `fillRule`?
    at path
    at svg
    ...

Instead, I need to convert to this:

const PinIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="9" height="17" fill="currentColor" viewBox="0 0 9 17">
    <path
      fillRule="evenodd"
      d="M1 0h7s0 2.134-1.5 2.802v5.11C8.48 8.559 9 11.8 9 11.8H5.75l-.85 5h-.8l-.85-5H0s.41-3.277 2.5-3.899V2.788C1.064 2.104 1 0 1 0Zm4.1 8.767v-6.44c.457-.287.65-.827.65-.827h-2.5s.206.53.65.818v6.449C2.71 8.945 2.25 10.5 2.25 10.5h1.8l.45 2 .45-2h1.8S6.234 8.948 5.1 8.767Z"
      clipRule="evenodd"
    />
  </svg>
);