Este pequeño artículo está inspirando en el desarrollo de un producto personal donde el UI Engineer me entrego todos los assets para mi aplicación web en formato SVG. El formato SVG (Scalable Vector Graphics) permite tener gráficos vectoriales y escalables que se adaptarán correctamente a tu proyecto.

Sin embargo, este asset requiere presentarse en diversos colores por lo que esta próxima receta de instrucciones te ayudará a cambiar el color de las imágenes que utilices en la aplicación. ¡Manos a la obra!

Agregar la imagen a tu archivo html y asignarle el nombre de una clase.

<img src="assets/img/addMore.svg" class="addMore-img" />

Crearemos un archivo .scss con la siguiente clase llamada addMore-img e ingresaremos el siguiente código:

addMore-img {
    &::before {
        opacity: 1;
    }
    filter: brightness(0) saturate(100%) invert(39%) sepia(3%) saturate(0%) hue-rotate(255deg) brightness(94%) contrast(89%);
}

Implementando este código te mostrará el asset en una tonalidad naranja. Si deseas personalizarlo a otro color, puedes utilizar la siguiente app donde podrás ingresar el código RGB y te devolverá los valores que utilizarás en la propiedad filter.

Qué tengas un ¡Happy coding!