¿Vale? Entonces, tengo un SVG con el icono de GitHub, pero quiero enseñarte cómo lo voy a transformar en un componente de React para utilizarlo fácilmente en nuestro proyecto.
Este. ¿Vale? Este es un proyecto que está muy bien porque lo que te permite es arrastrar un SVG que tengas por ahí y te lo convierte en un componente de React para que lo utilices fácilmente sin necesitar de utilizar un loader de webpack ni nada raro.
¿Vale? En este caso, como me gustaría evitar al máximo tocar la configuración de Next.js, lo que vamos a hacer es convertirlo en un componente de React.
Así que voy a arrastrar aquí mi fichero y ya me lo ha convertido aquí a la derecha en un componente de React.
Así que lo voy a copiar, que además es bastante configurable. Podéis aquí toquetear cositas, por ejemplo, para que optimice el SVG, para que le quite ciertas props.
Además, el componente de React te lo prepara de forma que le puedas pasar props como los colores y tal, aunque hay veces que no es perfecto.
Y hay que toquetearlo, pero bueno, creo que está bastante bien.
En los componentes, pues voy a hacer el truco que os he enseñado antes. ¿Vale?
Icons barra github.js.
Entonces me ha creado la carpeta Icons y el archivo github.
Voy a pegar aquí este componente que hemos creado.
Lo voy a toquetear un poco porque no me gusta el nombre que le ha puesto y a mí me gusta que el export default esté arriba del todo.
No me gusta repetir cosas.
Voy a probar si esto funciona tal cual, pero hay veces que no funciona tal cual.
Y luego os explico un poco por qué.
De hecho, este quiz, bueno, seguro que hay que hacer algo con el quiz.
Esto es el icono de bithub.
Me lo ha importado automáticamente.
Vamos a guardar los cambios.
¡Bum!
Vamos al icono.
Lo primero es que es enorme.
Lo primero es que es enorme.
Que a ver, eso seguramente lo podemos solucionar.
Esto por un lado.
Luego está el color, ¿no?
Si yo aquí le pongo el fill, o sea, no es color, ¿vale?
Sería o stroke o fill, ¿no?
En el SVG.
Y le pongo que sea blanco, o sea, le decimos white o en hexadecimal, ¿eh?
Lo que prefiráis.
No funciona, ¿vale?
Y esto es un problema que suele haber porque, claro, aquí en el SVG vemos que este fill non lo tiene aquí,
que sí que lo sobrecribe con las props.
Pero luego, aquí está este fill que está a fuego aquí, ¿vale?
Pues este es el que tiene que venir de las props porque es el que queremos cambiar, ¿vale?
Así que lo vamos a tener que toquetear y, bueno, ya lo tendríamos.
Ahora vamos a arreglar nuestro botón, ¿vale?