How to resize SVG icon using Tailwind CSS ?
SVG stands for Scalable Vector Graphics and is an XML-based ( can be edited ) vector image format. SVG is commonly used for icons, animations, interactive charts, graphs, and other dynamic graphics in the browser. 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.
Syntax:
<svg class="h-30 w-30" viewBox="0 0 24 24"> <path d=" "/> </svg>
Note: The viewBox attribute defines the position and dimension of an SVG viewport. The value of the viewBox attribute is a list of four numbers, min-x, min-y, width, and height. So the viewBox doesn’t set the size of the SVG, it just determines the frame or window through which we will see the SVG.
Example 1: Using viewBox attribute to resize SVG icon.
HTML
<!DOCTYPE html> < html > < head > < link href = "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel = "stylesheet" > </ head > < body class = "text-center mx-4 space-y-2" > < h1 class = "text-green-600 text-5xl font-bold" > w3wiki </ h1 > < b >Tailwind CSS Resize SVG icon</ b > < div class = " m-4 grid grid-flow-col gap-4 p-5" > <!--- Home Icon ---> < svg xmlns = "http://www.w3.org/2000/svg" class = "text-red-500" fill = "none" viewBox = "0 0 80 80" stroke = "currentColor" height = "100px" width = "100px" > < path stroke-linecap = "round" stroke-linejoin = "round" stroke-width = "2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /> </ svg > <!--- Emoji Icon ---> < svg xmlns = "http://www.w3.org/2000/svg" class = "text-yellow-400" fill = "none" viewBox = "0 0 80 80" stroke = "currentColor" > < path stroke-linecap = "round" stroke-linejoin = "round" stroke-width = "2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> </ svg > </ div > </ body > </ html > |
Output:
Example 2: Simply changing the width and height of the class of an icon.
HTML
<!DOCTYPE html> < html > < head > < link href = "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel = "stylesheet" > </ head > < body class = "text-center mx-4 space-y-2" > < h1 class = "text-green-600 text-5xl font-bold" > w3wiki </ h1 > < b >Tailwind CSS SVG</ b > < div class = " m-4 grid grid-flow-col gap-4 p-5" > <!--- Home Icon ---> < svg xmlns = "http://www.w3.org/2000/svg" class = " text-red-500 h-70 w-50" viewBox = "0 0 80 80" fill = "none" stroke = "currentColor" > < path stroke-linecap = "round" stroke-linejoin = "round" stroke-width = "2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /> </ svg > < svg xmlns = "http://www.w3.org/2000/svg" class = "bg-red-400 text-green-300 h-40 w-20 fill-current" viewBox = "0 0 80 80" fill = "none" stroke = "currentColor" > < path stroke-linecap = "round" stroke-linejoin = "round" stroke-width = "2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l -3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783 .57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00- .363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1 .81h4.914a1 1 0 00.951-.69l1.519-4.674z" /> </ svg > </ div > </ body > </ html > |
Output: