Hoy vamos a ver como hacer que un svg se comporte como un icono de fontawesome, bootstrap icons, material icons,… y que cambie de color cuando pase el ratón por encima del botón.
Para lograr que un SVG se comporte como un ícono de FontAwesome y cambie de color cuando pases el ratón por encima de un botón, puedes utilizar CSS y HTML. Aquí hay un ejemplo de cómo hacerlo:
- Primero, crea un archivo HTML e inserta tu SVG directamente en el código HTML, dentro de un elemento
<button>o<a>:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG como ícono</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<button class="boton-icono">
<svg class="icono" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
</svg>
</button>
</body>
</html>En este ejemplo, he utilizado un SVG de un ícono de información, pero puedes reemplazarlo con tu propio SVG.
- A continuación, crea un archivo CSS llamado «estilos.css» en el mismo directorio que tu archivo HTML y agrega el siguiente código CSS:
/* Estilos generales del botón */
.boton-icono {
border: none;
background-color: transparent;
cursor: pointer;
padding: 8px;
outline: none;
}
/* Estilo del ícono SVG */
.icono {
transition: fill 0.2s ease-in-out;
}
/* Cambiar el color del ícono al pasar el ratón por encima del botón */
.boton-icono:hover .icono {
fill: #FF0000; /* El color que deseas al pasar el ratón por encima */
}Este código CSS aplica estilos básicos al botón y al ícono SVG.
Cuando pases el ratón por encima del botón, el color del ícono SVG cambiará al color que hayas especificado en la regla .boton-icono:hover .icono.
Eso es todo. Ahora deberías tener un SVG que se comporta como un ícono de FontAwesome o similar y que cambia de color al pasar el ratón por encima del botón.
Puedes modificar los estilos y colores según tus necesidades.
