Cómo modificar los colores de los iconos svg con Tailwind

Preguntas HTML
⏰ 6 minutos de lectura

Avatar de usuario de Question3r
Pregunta 3r

Estoy usando TailwindCSS y quiero cambiar el color de un svg. Sin Tailwind, esta pregunta se ha hecho antes aquí, para 2020, esta debería ser una buena respuesta, pero Tailwind no admite esos filtros. Hay una guía en los documentos sobre cómo trabajar con iconos svg pero este tutorial funciona sin archivos, solo las rutas de texto sin formato.

Descargué los archivos svg y asigné la ruta al svg a la imagen src etiqueta. El siguiente ejemplo muestra mi problema, quiero que el fondo del ícono sea rojo y el color del ícono sea azul. Lamentablemente, no me es posible cambiar el color del icono.

<link href="https://unpkg.com/tailwindcss@1.8.10/dist/tailwind.min.css" rel="stylesheet" />

<!-- taken from here https://www.iconfinder.com/icons/765208/media_twitter_social_icon -->
<img class="fill-current bg-red-500 text-blue-500" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI2MHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA2MCA2MCIgd2lkdGg9IjYwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iYmxhY2siIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIj48ZyBpZD0ic2xpY2UiLz48ZyBmaWxsPSIjMDAwMDAwIiBpZD0idHdpdHRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMuMDAwMDAwLCAxNi4wMDAwMDApIj48cGF0aCBkPSJNMjguMDUyMTM4NSwyLjQzNjY5NDI3IEMyNi44NDMxODQ2LDEuMDYyMjAxNSAyNS4xMjA1Mzg1LDAuMTg2NDY0MTA1IDIzLjIxNDA2MTUsMC4xNTQ3MzEwMjggQzE5LjU1MzYsMC4wOTM4MDMwOTA1IDE2LjU4NTY1MzgsMy4xODY5MjMzOSAxNi41ODU2NTM4LDcuMDYzMTE2MDQgQzE2LjU4NTY1MzgsNy42MTMyNDExOCAxNi42NDQyOTIzLDguMTQ5NjkzMzcgMTYuNzU3MzY5Miw4LjY2NDY3MzE2IEMxMS4yNDg1ODQ2LDguMzA3MzUyNTcgNi4zNjQ0NjkyMyw1LjQzODc3MDU5IDMuMDk1NDE1MzgsMS4xMTQ3MjE4IEMyLjUyNDg2MTU0LDIuMTUwODYxNyAyLjE5NzkwNzY5LDMuMzYxODgyNzEgMi4xOTc5MDc2OSw0LjY1OTE1MDM3IEMyLjE5NzkwNzY5LDcuMTE0OTg4NDQgMy4zNjgwOTIzMSw5LjI5NDUyNzI0IDUuMTQ2NjMwNzcsMTAuNTgxNDE3NCBDNC4wNjAxMjMwOCwxMC41MzM0NDk5IDMuMDM4MDY5MjMsMTAuMjA0NTM3OCAyLjE0NDQzODQ2LDkuNjY0OTUyMDMgQzIuMTQzNzkyMzEsOS42OTQ0NDQ5NyAyLjE0Mzc5MjMxLDkuNzIzOTQ0OTQgMi4xNDM3OTIzMSw5Ljc1Mzk2MjQ1IEMyLjE0Mzc5MjMxLDEzLjE4MzU0OTcgNC40Mjg1OTIzMSwxNi4wNjA3MDc2IDcuNDYwODMwNzcsMTYuNzMwOTM4MyBDNi45MDQ2NTM4NSwxNi44ODg1MzggNi4zMTkwNzY5MiwxNi45NzEwMTYzIDUuNzE0NiwxNi45NjcwMDggQzUuMjg3NDkyMzEsMTYuOTY0MTc1OCA0Ljg3MjE3NjkyLDE2LjkxNjgxMTggNC40Njc1MjMwOCwxNi44MzE3NjggQzUuMzEwOTE1MzgsMTkuNjQ0Mzc3NyA3Ljc1ODcwNzY5LDIxLjY5Njc2NjMgMTAuNjU5MjkyMywyMS43NjQ2MjggQzguMzkwODA3NjksMjMuNjQ3Njk2MyA1LjUzMjg2OTIzLDI0Ljc2OTE5MzMgMi40MjcyOTIzMSwyNC43NjI3ODcgQzEuODkyMjc2OTIsMjQuNzYxNjgzMyAxLjM2NDY5MjMxLDI0LjcyNzExMiAwLjg0NjE1Mzg0NiwyNC42NjA1OTk2IEMzLjc3OTUzMDc3LDI2LjY3MzMxMzkgNy4yNjM1OTIzMSwyNy44NDUxNzExIDExLjAwNjc2MTUsMjcuODQ2MTUzMSBDMjMuMTk4NTUzOCwyNy44NDkzNTE4IDI5Ljg2NTczMDgsMTcuMjM5NTEwOSAyOS44NjU3MzA4LDguMDM2NzY4NjggQzI5Ljg2NTczMDgsNy43MzQ4MzYzMiAyOS44NTkxMDc3LDcuNDM0NTE5MTIgMjkuODQ2NTA3Nyw3LjEzNTY1MTk1IEMzMS4xNDE1NjE1LDYuMTcwNjY2NDUgMzIuMjY1MjIzMSw0Ljk2MDc4OTE1IDMzLjE1Mzg0NjIsMy41NzkyMTkwMSBDMzEuOTY1MjQ2Miw0LjExNTAxNjE1IDMwLjY4NzYzODUsNC40NzA4Njg2MyAyOS4zNDcwMzA4LDQuNjIwMTM3ODkgQzMwLjcxNTQyMzEsMy43Nzc5NjUxOCAzMS43NjY1NTM4LDIuNDMwMDk2MDcgMzIuMjYxMzQ2MiwwLjgxMzc1ODQwNCBDMzAuOTgwNTA3NywxLjU5MDQ5MjI5IDI5LjU2MjAzODUsMi4xNDc1MTI4NiAyOC4wNTIxMzg1LDIuNDM2Njk0MjcgWiIvPjwvZz48L2c+PC9zdmc+">

¿Cuál es el flujo de trabajo correcto al descargar iconos svg y usarlos directamente al vincular la ruta de los activos? Todo lo que quiero lograr es algo como esto.

<a href="https://twitter.com" target="_blank">
  <img src="pathToSvgInAssetsFolder" />
</a>

y establezca el color del icono en un color Tailwind personalizado, por ejemplo red-500. Entonces, cuando quiera cambiar el color del ícono, simplemente puedo modificar la clase de color.

¿Alguien sabe cómo hacerlo?

  • No existe un flujo de trabajo para usar SVG como imágenes a menos que el SVG esté diseñado exactamente como desea que aparezca. ¿Por qué no usar SVG en línea?

    – JHeth

    5 de octubre de 2020 a las 3:59

  • ¿Lo siento, qué quieres decir? probé esto jsfiddle.net/e0o8ctmg

    – Pregunta3r

    5 de octubre de 2020 a las 5:20

  • esto será útil tailwindcss.com/docs/fill

    – Desarrollador parcial

    18 de mayo de 2021 a las 9:54

El flujo de trabajo para agregar SVG a su proyecto Tailwind debe realizarse usando SVG en línea.

Adam Watham, el creador de Tailwind CSS, hizo una video sobre cómo trabajar con SVG en línea en Tailwind. En el video, muestra un flujo de trabajo que usaría para preparar un SVG no optimizado para un proyecto de Tailwind. Aquí están los pasos con un paso adicional que no mencionó:

  1. Suelte el archivo SVG o pegue el marcado SVG en el optimizador en SVGOMG.
  2. Copie el marcado proporcionado por SVGOMG y péguelo en su proyecto.
  3. Elimine cualquier atributo de relleno o trazo para que Tailwind pueda modificar aquellos con clases (no se muestran en el video).
  4. Elimine cualquier atributo XMLNS o etiquetas XML, estos no son necesarios para SVG en línea.
  5. Agregue clases Tailwind.

Si está utilizando un marco basado en componentes, se recomienda que también extracto los íconos en componentes que se pueden reutilizar en toda su aplicación.

Los beneficios de este enfoque:

  • Control total sobre el tamaño y el color de sus iconos SVG
  • Velocidad de carga más rápida ya que los íconos son parte del HTML

Aquí hay un ejemplo basado en el Fiddle que compartió en los comentarios. Ejecuté los SVG a través de SVGOMG y eliminé los atributos de relleno para que Tailwind pueda controlar eso.

<link href="https://unpkg.com/tailwindcss@1.8.10/dist/tailwind.min.css" rel="stylesheet" />

<svg class="text-teal-500 fill-current h-16 w-16" viewBox="0 0 60 60">
    <path d="M41.05 18.44a6.6 6.6 0 00-4.84-2.29c-3.66-.06-6.62 3.04-6.62 6.91 0 .55.05 1.09.17 1.6a18.68 18.68 0 01-13.66-7.55 7.33 7.33 0 00-.9 3.55 7.3 7.3 0 002.95 5.92 6.34 6.34 0 01-3-.92v.1c0 3.42 2.28 6.3 5.31 6.97a6.24 6.24 0 01-3 .1 6.74 6.74 0 006.2 4.93 12.8 12.8 0 01-9.81 2.9A17.89 17.89 0 0024 43.85c12.19 0 18.86-10.61 18.86-19.81l-.02-.9c1.3-.97 2.42-2.18 3.3-3.56-1.18.54-2.46.9-3.8 1.04a6.8 6.8 0 002.91-3.8c-1.28.77-2.7 1.33-4.2 1.62z"/>
</svg>

<svg class="bg-red-500 text-red-800 fill-current h-16 w-16 rounded-lg" viewBox="0 0 60 60">
    <path d="M25.46 47.31V30h-3.52v-5.74h3.52v-3.47c0-4.68 1.4-8.06 6.53-8.06h6.1v5.73h-4.3c-2.15 0-2.64 1.43-2.64 2.92v2.88h6.62l-.9 5.74h-5.72V47.3h-5.69z"/>
</svg>

  • El paso 5 dice Agregar clases Tailwind. ¿Hacemos algo más que Llenar, Carrera y Anchura del trazo? Me preguntaba si la respuesta debería ser más específica.

    – notapatch

    27 de enero de 2022 a las 12:11

  • Para mí, la parte que faltaba era la corriente de relleno clase

    – Pjotr

    26 de agosto de 2022 a las 11:03

  • Intenté esto y el svg no capta el color. ¿Estas instrucciones siguen siendo precisas?

    – mel

    hace 2 días

  • @Mel todavía funciona en Tailwind Play play.tailwindcss.com/vsSEXCEuTq que ejecuta la versión más actual de Tailwind. ¿Se está ejecutando el proceso de creación de la CLI de Tailwind?

    – JHeth

    hace 2 días

En términos simples, use text-<color> y fill-current

<svg class="h-16 w-16 rounded-full bg-cyan-400 fill-current text-white" viewBox="0 0 60 60">
  <path d="M25.46 47.31V30h-3.52v-5.74h3.52v-3.47c0-4.68 1.4-8.06 6.53-8.06h6.1v5.73h-4.3c-2.15 0-2.64 1.43-2.64 2.92v2.88h6.62l-.9 5.74h-5.72V47.3h-5.69z" />
</svg>

Producción:

ingrese la descripción de la imagen aquí

¿Ha sido útil esta solución?