Giters

sschoger / heroicons-ui

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

SVG Size

agentphoenix opened this issue · comments

commented

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!

commented

You are not alone

commented

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.