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 edit or change the SVG icon colors with Tailwind.
Approach: You can simply customize the class of SVG by adding text-color or background-color in icons, but in this process, you have to carefully use the utilities for styling the SVG like fill and stroke in Tailwind CSS.
Syntax:
<svg class=" text-color bg-color" 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:
<!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">
GeeksforGeeks
</h1>
<b>Tailwind CSS Stroke Class</b>
<div class=" m-4 grid grid-flow-col gap-4 p-5">
<!--- Home Icon --->
class="text-red-500 h-16 w-16" fill="none" viewBox="0 0 24 24" 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>
<!--- Emoji Icon --->
class="text-yellow-400 h-16 w-16" fill="none" viewBox="0 0 24 24" 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: Using fill and stroke utilities for styling icon.
- fill-current is used to set the fill color of an SVG to the current text color. This makes it easy to set an element’s fill color by combining this class with an existing text color utility.
- stroke-current is used to set the stroke color of an SVG to the current text color. This makes it easy to set an element’s stroke color by combining this class with an existing text color utility.
- stroke-width is used to set the stroke width of an SVG.
Syntax:
<svg class="stroke-current stroke-current stroke-1">...</svg>
<!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">
GeeksforGeeks
</h1>
<b>Tailwind CSS SVG</b>
<div class=" m-4 grid grid-flow-col gap-4 p-5">
<!--- Home Icon --->
class="fill-current text-red-500 h-16 w-16" fill="none" viewBox="0 0 24 24" 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>
<!--- Emoji Icon --->
class="stroke-current stroke-2 text-yellow-400
h-16 w-16" fill="none" viewBox="0 0 24 24" 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>
class="bg-red-400 text-green-300 h-16 w-16" fill="none" viewBox="0 0 24 24" 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: