Preact: SVG strokeWidth is not templated to stroke-width

[DimitryDushkin]

In react strokeWidth templates to valid svg prop stroke-width, but it's not the case for preact. Cannot find in code how to fix it.(

[developit]

Hiya - SVG property renaming is handled in preact-compat. Preact core simply uses attributes for SVG, since SVG reflected properties are read-only.

That said, it might be worth exploring the idea of applying a simple transform (here) when we know we're mutating an SVG:

name = name.replace(/([A-Z])/g, '-$1')

[JayAndCatchFire]

Is this documented anywhere? I wouldn't have known that I needed preact-compat for SVG stuff if I hadn't read this ticket.

[developit]

No - definitely something that needs to be stated somewhere, or that fix needs to be applied so it's a non-issue. FWIW using stroke-width as the prop name works fine.

[suhasdeshpande]

If I were to fix it, how do I go about? beginner-friendly makes me want to contribute but would love some guidance @developit

[NateRadebaugh]

@developit is this what you had in mind for this change? Are there other types for SVG we would want to translate?

[sanpoChew]

What's the current status of this out of interest? I saw that the @NateRadebaugh closed his merge request. We just ran into issues with this while using svg icons from preact-feather, stroke-linecap and stroke-linejoin were an issue too. Just replicated the attributes in css for now.

[NateRadebaugh]

I did some investigation into the spec for SVG and it looks like there isn't any clear pattern for what formats are expected/valid. It seems like if we were to support these, we'd need to explicitly define a mapping. This would likely add more bloat to the preact source than is preferred.

Perhaps if there is interest it may be worthwhile to create a separate compat sort of addon that would support SVG?

[studentIvan]

stroke-width, etc, forces https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md if you do eslinting of your project with react plugin
it was working before and it works sometimes now, after few page updates, strange situation

[marvinhagemeister]

Just checked this with Preact X and it correctly converts strokeWidth to stroke-width :tada: An alpha is already out and can be installed via preact@next.