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

andronocean commented 3 years ago

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 commented 3 years ago

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

LoganDark commented 3 years ago

Looks like heroicons is barely maintained, waiting for the fork

natemate90 commented 2 years ago

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 commented 2 years ago

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!

tailwindlabs / heroicons

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