class attribute is not supported in svg element

[piaoger]

Describe the bug

Nice to see the support SVG.I just pulled the maaster branch and tried a piece of code from a tailwindcss component. The below error will be found in Chrome Devtool.

Uncaught (in promise) TypeError: Cannot set property className of #<SVGElement> which has only a getter
    at imports.wbg.__wbg_setclassName_579da04a76182ffb

After commenting “class” attribute out from svg, everything will be fine as before.

For more details, please see below screenshot and code snippt.

To Reproduce

Use below compoent to reproduce.

#[component]
pub fn Twitter<G: Html>(ctx: Scope) -> View<G> {
    view!{ctx,
        svg (
            width="24",
            height="24",
            viewBox="0 0 24 24",
            xmlns="http://www.w3.org/2000/svg",

           // commenting out will fix the runtime error, fill-current is  tailwindcss predefined 
           // https://tailwindcss.com/docs/fill
            class="fill-current",
        ) {
            path (d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z")
        }
    }
}

Expected behavior

No runtime error

Screenshots

Environment

• Sycamore: master
• Browser: chrome
• OS: Windows

Additional context
N/A

[lukechu10]

Ah it's because there is an internal optimization to use className instead of setting the attribute for html elements. This doesn't work for SVG elements which causes this error.