🚀 Feature Proposal

I'd like to see webpack loader support optionally preserving kebab-case attribute names. Maybe with a opt-in boolean flag in loader options (to be used together with babel: false as shown here.

Motivation

I'm using @svgr/webpack for a Preact project (not using preact/compat) and ran into problems when kebab-case attributes used in svg file are transformed into react-style camelCase. As a result in Preact these attributes appear in html as-is (camelCased) and have no effect.

My current solution is to use babel: false and a custom babel config doing auto-import preact when JSX is seen (with babel-plugin-jsx-pragmatic). To fix the casing problem I had to add a custom babel plugin to transform these JSX attributes names back.

Example

When @svgr/webpack loader is used with an option possibly something like preserveKebabCase: true, svg file having content <path d="..." stroke-width="15%" /> would output JSX having name preserved as stroke-width instead of mapping it to strokeWidth.

Maybe even preact: true could be considered? Both to preserve kebab-case names and to import { h } from 'preact';. That would probably fit easier into existing babel configs if auto-import plugin is not used and only transform-react-jsx is present.

Pitch

To make this library more versatile. And not to have to use a additional custom babel plugin to transform names back and forth.