search

tailwindlabs / heroicons

A set of free MIT-licensed high-quality SVG icons for UI development.
https://heroicons.com
MIT License
21.04k stars 1.26k forks source link

JSX Copy `class` instead of `className` #820

Closed joshmedeski closed 1 year ago

joshmedeski commented 1 year ago

I used the heroicon website today and clicked "Copy JSX" on an icon and I got this.

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />
</svg>

The class property on the svg element has to be renamed to className to be valid jsx.

adamwathan commented 1 year ago

Hmm I just copied the same icon and got this:

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
  <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />
</svg>

...which has all of the correct attributes. Going to close since I can't reproduce but if this isn't just a fluke and happens for you every time, please open a new issue and include some details like browser version, which icon, etc. so we can try and reproduce ourselves.

joshmedeski commented 1 year ago

Thanks for the quick response, if it keeps happening to me I'll share more of my context.