-
-
Notifications
You must be signed in to change notification settings - Fork 421
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Option for preserving kebab-case attributes (for Preact) #450
Comments
I need this as well for usage with my library isomorphic-jsx. |
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
Hello @TheKnarf, I am open to extend the support for Preact. The simplest is to add an option Preact and automatically apply the correct configuration. Since I don't use Preact, I trust the community on this! |
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
It seems like, maybe, between the time this issue was opened and closed, this was resolved and then unresolved again? I have been using svgr({
svgrOptions: {
jsxRuntimeImport: {
importSource: 'preact',
specifiers: ['h'],
},
svgProps: {
role: 'img',
},
},
exportAsDefault: true,
}), This was outputting kebab-case attributes. Upgrading to svgr({
svgrOptions: {
exportType: 'default',
jsxRuntimeImport: {
source: 'preact',
specifiers: ['h'],
},
svgProps: {
role: 'img',
},
},
esbuildOptions: {
jsxFactory: 'h',
jsxFragment: 'Fragment',
},
exportAsDefault: true,
}), I tried adding As far as I can tell, this is not an issue with the Vite plugin: the diff between the two versions doesn't seem to show any difference in how options are being passed to |
Just to follow up here: I figured out that my issue was related to Hopefully #927 is a viable solution |
🚀 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 likepreserveKebabCase: true
, svg file having content<path d="..." stroke-width="15%" />
would output JSX having name preserved asstroke-width
instead of mapping it tostrokeWidth
.Maybe even
preact: true
could be considered? Both to preserve kebab-case names and toimport { 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.
The text was updated successfully, but these errors were encountered: