A la hora de añadir un icono SVG a un proyecto web, una de las cosas que puedes hacer es modificar el color con CSS.
Para ello, uno de los profesores de nuestro bootcamp, Sergio Jiménez, enseña en el siguiente vídeo cómo llevarlo a cabo. Échale un vistazo para aprender cómo hacerlo.
Aceptar el consentimiento para ver esto
Como se puede apreciar en el vídeo, lo primero que hay que hacer es tener un archivo SVG que queramos modificar. En el ejemplo, Sergio descarga el icono SVG directamente desde Google Fonts.
Una vez tienes el icono preparado, tienes que introducir el código del SVG en el archivo HTML. En nuestro caso, lo añadimos dentro del body y el botón que se ha creado (button).
Después, hay que darle una anchura y una altura dentro del archivo CSS. Para ello, utilizamos un código como el siguiente:
svg {
height: 5rem;
width: 5rem;
}
Esto se puede hacer en la etiqueta de HTML, pero en nuestro caso, lo vamos a hacer todo con CSS. De esta forma, podemos reutilizar el código para más iconos SVG en los que queramos la misma configuración.
Cuando ya se le ha dado un tamaño, se puede cambiar tanto el color del fill (el dibujo del icono) como del stroke (la línea de alrededor del dibujo del icono). Una de las cosas que se puede hacer es escoger un color o heredar el color del botón actual con el valor currentColor. También se puede jugar con la opacidad del icono, el tamaño del stroke, el cambio de color con el hover, etc. De esta forma, quedaría el siguiente código para cambiar el color de un icono SVG en CSS:
svg {
height: 5rem;
width: 5rem;
fill: currentColor;
fill-opacity: 0.8;
stroke: black;
stroke-width: 40px;
stroke-opacity: 0.8;
}
svg:hover {
fill: black;
fill-opacity: 1;
stroke: currentColor;
}
Esta es una de las formas para modificar el color de un icono SVG con CSS y con la que poder hacer más atractiva tu web a la hora de utilizar este tipo de archivos.
Si quieres saber más sobre CSS, HTML y JavaScript, entre otros lenguajes de programación, apúntate a nuestro Bootcamp Full Stack Web Developer y conviértete en profesional del desarrollo web.
