Web site: "Copy JSX" and "Copy SVG" copy SVG in both cases

[nlc616]

Not sure if this is appropriate to report here given that this isn't a bug with the repo itself, but the heroicons.com site is currently copying SVG in both cases if you hover over an icon and click either 'copy JSX' or 'copy SVG.'

Steps to reproduce:

1. Visit heroicons.com
2. Search 'magnifying' to pull up magnifying glass icons.
3. Hover over one
4. Click 'Copy JSX' action.
5. Paste your clipboard contents
6. The clipboard contents you paste will be the SVG.

[adamwathan]

I can't reproduce, here's what I get for each one:

Copy SVG:

<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="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>

Copy JSX:

<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="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>

The top one is SVG like I'd expect, and the bottom one is JSX like I'd expect (notice the attributes like strokeWidth, className,strokeLinecap`, etc.).

This is the intended behavior — copying the code for the whole icon either as SVG or as JSX. Maybe you are expecting it to copy the React/Vue code? If so that's just not what the button is meant to do, it's meant to give you the inline SVG code but as JSX so you can paste it into a JSX file without there being any errors 👍

[nlc616]

@adamwathan Understood, thanks for the clarification. I'll close this.