Set outline icons' stroke-width on <svg> for Tailwind compatibility

[andronocean]

This PR makes Heroicons' outline icons compatible with Tailwind's stroke-width stroke-1, etc. classes, as well as any CSS styles applying the stroke-width property.

It fixes the problem discussed in #241, #236, and #263, by moving the stroke-width attribute from the <path> nodes to the <svg> element. This allows CSS inheritance to work properly when styles with higher specificity (like the Tailwind classes) are applied to the <svg>. (Link to the stroke-width spec for reference.)

Included are changes to all outline icons, plus the compiled optimized svgs. I've confirmed it works properly out-of-the-box and with the Tailwind classes.

I've built the react and vue versions from this too, and they look right to me, but since I don't use those it would be good to have someone double-check them closely before merging this.

[arpitjacob]

When can we get this merged, looking to incorporate this in a project I am working on.

[LoganDark]

Looks like heroicons is barely maintained, waiting for the fork

[natemate90]

I added this to my global css:

@layer base {
  /* stroke-width: 2 is a browser default and can be overridden with class="stroke-1" etc. */
  svg {
    stroke-width: 2;
  }

  path,
  circle,
  ellipse,
  line,
  polygon,
  polyline,
  rect {
    stroke-width: inherit;
  }
}

[bradlc]

Hey @andronocean. Really appreciate the work you've put into this! Rather than update the source SVG files we were able to update the SVGO configuration to automate this change and make it easier to maintain going forward. I hope you don't mind, but we've gone ahead and merged that PR instead, and credited you in the commit history 👍 Thanks again!