SVG significa Scalable Vector Graphics y es un formato de imagen vectorial basado en XML (se puede editar). SVG se usa comúnmente para íconos, animaciones, cuadros interactivos, gráficos y otros gráficos dinámicos en el navegador. Como está basado en XML, puede editar o cambiar fácilmente los colores del icono SVG con Tailwind.
Enfoque: simplemente puede personalizar la clase de SVG agregando color de texto o color de fondo en los íconos, pero en este proceso, debe usar cuidadosamente las utilidades para diseñar el SVG como relleno y trazo en Tailwind CSS .
Sintaxis:
<svg class=" text-color bg-color" viewBox="0 0 24 24">
<path d=" "/>
</svg>
Nota: El atributo viewBox define la posición y la dimensión de una ventana gráfica SVG. El valor del atributo viewBox es una lista de cuatro números, min-x, min-y, width y height . Entonces viewBox no establece el tamaño del SVG, solo determina el marco o la ventana a través de la cual veremos el SVG.
Ejemplo 1:
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"> GeeksforGeeks </h1> <b>Tailwind CSS Stroke Class</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-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 ---> <svg xmlns="http://www.w3.org/2000/svg" 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>
Producción:
Ejemplo 2: Uso de las utilidades de relleno y trazo para diseñar el icono.
- fill-current se usa para establecer el color de relleno de un SVG en el color de texto actual. Esto facilita la configuración del color de relleno de un elemento al combinar esta clase con una utilidad de color de texto existente.
- stroke-current se usa para establecer el color del trazo de un SVG en el color del texto actual. Esto facilita la configuración del color del trazo de un elemento al combinar esta clase con una utilidad de color de texto existente.
- stroke-width se usa para establecer el ancho del trazo de un SVG.
Sintaxis:
<svg class="stroke-current stroke-current stroke-1">...</svg>
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"> GeeksforGeeks </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="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 ---> <svg xmlns="http://www.w3.org/2000/svg" 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> <svg xmlns="http://www.w3.org/2000/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>
Producción:
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA