search

sschoger / heroicons-ui

MIT License
2.07k stars 547 forks source link

SVG Size #9

Open agentphoenix opened 6 years ago

agentphoenix commented 6 years ago

I've been playing around with Heroicons UI and Tailwind today, but I'm running into a weird issue with the SVG size. When I insert the SVG inline and assign some Tailwind classes, the icon's path is half the size of its parent svg element. I can bump up the sizing on the svg element, but that leads to some really strange line height and padding issues.

When I put a Zondicons icon in with the same Tailwind classes, both the svg and path elements have the same size like I would expect.

https://jsfiddle.net/9zgf0yLf/1/

Am I doing something wrong or is there some distinct difference between Heroicons UI and Zondicons that I'm not seeing. Thanks for any help!

jiblett1000 commented 2 years ago

You are not alone

ctsstc commented 2 years ago

It seems that if I manually set the viewBox to 2 2 16 16 on something like x-circle then it respects the sizing.

It drives me crazy that if I'm using tailwind to size the heroicon I'll end up wanting something that's 16x16 (w-4) so I have to make the outer container 20x20 (w-5) so that I end up with a 16x16 icon.

ctsstc commented 2 years ago

Opened: https://github.com/tailwindlabs/heroicons/issues/664