#1 - Utilizar un archivo SVG y personalizar sus colores en una aplicación de Bubble

En esta guía voy a explicar brevemente cómo utilizar un SVG en Bubble y cambiar sus colores dinámicamente.

¡Hola!

Primero que nada, quería agradecerte el tiempo que te has tomado para llegar hasta aquí y prestarme unos minutos de tu tiempo.

Si te interesa el contenido en español relacionado con Bubble y el no-code, te animo a suscribirte. Y si no te interesa... Pues te dejo un GIF de un gatito para que al menos la visita haya merecido la pena 😻

---

Estreno Bubbleando con una guía muy cortita sobre cómo trabajar con archivos SVG y cambiarles el color. No creo que sea la única forma de hacerlo porque Bubble tiene muchas maneras diferentes de abordar un problema… pero es la que (de momento) conozco.

Empecemos por el principio.

Subir un archivo SVG

Para utilizar un SVG en Bubble no he encontrado mejor forma que la de copiar y pegar directamente el código del vector en cuestión. Creamos un grupo, arrastramos dentro de él un bloque HTML y pegamos ese código largo y horrible. Tal cual.

Aplicar un valor dinámico en el SVG

Bueno, ya tenemos ese montón de código en nuestra aplicación de Bubble, ¿y ahora qué? Pues bien, ahora vamos a añadir un input para poder escribir el valor hexadecimal del color que queremos utilizar. Yo he llamado a este campo Color primario.

Una vez tenemos el input para escribir el valor que queramos, toca revisar el código del SVG e ir reemplazando el valor hexadecimal de la propiedad fill por el que escribamos en el input del color primario. En este caso, como el color que quiero modificar es el negro, busco todas las propiedades fill con el valor #000000.

De esta manera, conseguimos que el color de nuestro SVG automáticamente vaya cogiendo los valores que escribimos en el input.

Añadir un color picker

Como podrás comprobar, es un poco tedioso tener que buscar y escribir el código hexadecimal que quieres, pero... ¡Bubble tiene la solución! Tan solo tienes que instalar un plugin desarrollado por Zeroqode que se llama Air Color Picker.

A mi personalmente me parece el más completo de los que he probado. Es súper configurable y se puede utilizar en los workflows de la aplicación como un input más. Una vez instalado aparecerá como un bloque más en el editor de Bubble. Simplemente tienes que arrastrarlo y colocarlo donde quieras.

¡Y ya lo tenemos! Ahora es mucho más sencillo elegir el color que quieres.

---

Hasta aquí lo que tenía que contar. Espero que te haya resultado interesante y que te sirva de ayuda en tus aplicaciones de Bubble.

Si es así recuerda suscribirte para recibir en tu email el próximo artículo.

Si quieres darme cualquier feedback o comentar cualquier cosa, estaré encantado de leerte. Tengo los MD de Twitter abiertos para todo el mundo.

Bueno... y como no sé muy bien cómo despedir esto, he pensado en dejar una canción que me guste al final de cada post. Porque si te he descubierto algo nuevo de Bubble, quizá también te descubra algo nuevo en Spotify 🙃

¡Hasta la próxima!