search

sschoger / heroicons-ui

MIT License
2.07k stars 547 forks source link

Sizing the icons? #19

Closed vayurobins closed 4 years ago

vayurobins commented 4 years ago

Hi. How do I size the icons? I tried to size them with css width and height. I also tried to use inline width and height attributes and viewbox.

Eriickson commented 4 years ago

@vayurobins FontSize from css

vayurobins commented 4 years ago

Thanks! I'm not getting this to work though. I feel like I've tried everything. There is no fontSize set on the other icons and adding font-size doesn't make any difference. I can't change the size in the console either. Screenshot 2020-01-28 at 14 59 49

vayurobins commented 4 years ago

Is it really just me?

thesmallweb commented 4 years ago

Are you still having this problem? Maybe you could share some code to give an example of what goes wrong.

vayurobins commented 4 years ago

Thanks for asking. I got it fixed at last. It just that the SVG sizing is a bit confusing, making the size bigger, makes the icon smaller. :-)

<svg xmlns="http://www.w3.org/2000/svg" width="100" viewBox="0 0 27 27"><path fill="var(--white)" d="M5.41 16H18a2 2 0 0 0 2-2 1 1 0 0 1 2 0 4 4 0 0 1-4 4H5.41l2.3 2.3a1 1 0 0 1-1.42 1.4l-4-4a1 1 0 0 1 0-1.4l4-4a1 1 0 1 1 1.42 1.4L5.4 16zM6 8a2 2 0 0 0-2 2 1 1 0 0 1-2 0 4 4 0 0 1 4-4h12.59l-2.3-2.3a1 1 0 1 1 1.42-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.42-1.4L18.6 8H6z" class="heroicon-ui"></path></svg>
ayushshrestha commented 1 year ago

@vayurobins if you are using tailwind you can add ex.

         you can change according tailwind styles inside class
ayushshrestha commented 1 year ago

`

          </svg>`
bamoya commented 1 month ago

if you want to change the font size in react, change the property of strokeWidth and it will work for you.