SVG viewBox broken

[Spioune]

Using @kitajs/html, most of my SVG display incorrectly because of the viewBox attribute being transformed to view-box.

This route

app.get("/test", () => (
  <Layout>
    <button class="flex text-white bg-blue-600 rounded-full hover:bg-blue-500">
      <svg
        class="w-10 h-10"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fillRule="evenodd"
          d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z"
          clipRule="evenodd"
        />
      </svg>
    </button>
  </Layout>
));

Returns

...
<button class="flex text-white bg-blue-600 rounded-full hover:bg-blue-500">
  <svg class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" view-box="0 0 20 20" fill="currentColor">
  <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
  </svg>
</button>
...

view-box is not recognized by Google chrome or Safari.

You can reproduce the behavior by replacing viewBox with view-box on play.tailwindcss.com

[arthurfiorette]

Hey @Spioune, can you just use the svg component as string? My pc broke and I cannot fix this issue for you in the next following days...

import Html from '@kitajs/html'

function Svg({children}: PropsWithChildren) {
  return `<svg class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">${Array.isArray(children) ? Html.contentsToString(children) : children}</svg>`
}

[Spioune]

Hi,

Since I have too many SVGs with different attributes (class, viewBox, fill...), creating a component for each of them would be too tedious.
Instead I just render the SVGs as a string and it fix the issue.

Thanks !

<button className="flex text-white bg-blue-600 rounded-full hover:bg-blue-500">
    {`<svg
    class="w-10 h-10"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 20 20"
    fill="currentColor"
  >
    <path
      fillrule="evenodd"
      d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z"
      cliprule="evenodd"
    />
  </svg>`}
</button>

I don't know how react does it, maybe they have a hardcoded list of attributes that they don't escape.
Maybe toKebabCase() could return early if the attribute should not be escaped.

// index.js
...
function toKebabCase (camel) {
  if(no_transform_attributes.includes(camel)) return camel

  const length = camel.length

  let start = 0
  let end = 0
...

[arthurfiorette]

Turns out the auto camel case feature was slow and only had two default uses, so I just removed this feature at all.

It also prevent future problems btw.

[arthurfiorette]

Also added a test for it bebe0e3

[arthurfiorette]

v2.2.1