How To Resize SVG Icon Using Tailwind CSS ?

Forums CSSHow To Resize SVG Icon Using Tailwind CSS ?
Staff asked 2 years ago

How to resize the SVG icon using Tailwind CSS?

Answers (1)

Add Answer
Umang Ramani Marked As Accepted
Staff answered 2 years ago

As it is XML-based, you can easily resize the SVG icon using Tailwind.

Approach: You can simply customize the class of SVG by changing the height and width of the icons or by changing the values of viewBox attributes of SVG.

 

Note: An SVG viewport’s position and size are specified by the viewBox attribute. The viewBox attribute’s value is a list of four numerical values, including min-x, min-y, width, and height. As a result, the viewBox just chooses the frame or window through which we will view the SVG, not its size.

<svg class="h-30 w-30" viewBox="0 0 24 24">
    <path d=" "/>
</svg>

 

Subscribe

Select Categories