Insertar un SVG en React es una forma de añadir logos e iconos a nuestras aplicaciones creadas con esta librería de JavaScript. Por ello, aprender cómo hacerlo es fundamental para el proceso de diseñar nuestra aplicación. En este post, te enseñaremos cómo insertar un SVG en React de una manera sencilla para diseñar tus elementos rápidamente.
Antes de empezar
Antes de insertar un SVG en React, te sugerimos crear una nueva carpeta dentro de la carpeta src que se enfoque en manejar tus medios. A esta carpeta la puedes llamar assets. Dentro de esta carpeta assets crearemos un archivo con el nombre de nuestro icono SVG. En nuestro caso, estamos creando una aplicación que recrea Twitter, por lo que el icono que queremos insertar es el pajarito de esta aplicación.
Crearemos un archivo SVG react dentro de la carpeta assets que se llame Twitter.svg. Dentro de este archivo, debemos copiar el código del icono para insertar un SVG en React. Este código normalmente se compone de una etiqueta svg y una etiqueta g que contiene, a su vez, un path. A continuación, puedes ver un ejemplo:
<svg xmlns= «http://…» viewBox= «0 0 24 24»>
<g>
<path d=» «
</g>
</svg>
Ahora que hemos creado nuestro archivo, es hora de insertar un SVG en React.
¿Cómo insertar un SVG en React?
Con una aplicación creada con create-react-app hay muchas maneras de insertar un SVG en React. Entonces, puedes ir al archivo donde quieres insertar el icono e importar el archivo .svg que hemos creado. A continuación, puedes ver la línea de código que nos permite importar SVG React, este archivo:
import logo from ‘../../assets/twitter.svg’;
Ahora que hemos definido un nombre a este archivo, en nuestro caso logo, podemos llamar al contenido de este archivo usando las llaves. Recuerda que las llaves nos permiten abrir una ventana a JavaScript en React. Entonces, supongamos que queremos insertar este logo dentro del header que hemos creado en nuestro post sobre la maquetación en React.
A continuación, puedes ver las líneas de código en las que insertamos este archivo logo. Estas se encuentran en un archivo que hemos llamado header.js, que se encarga de estructurar la cabecera de nuestra aplicación SVG react al utilizar la opción de importar svg react.
import logo from ‘../../assets/twitter.svg’;
function Header ( ) {
return (
<header>
<div>
<img src={logo}></img>
</div>
<nav></nav>
</header>
);
}
Como puedes ver, para insertar un SVG en React, creamos un elemento img y le decimos que su fuente o src es el archivo SVG que hemos importado en las primeras líneas con la opción importar svg react. Si te aparece una advertencia, seguro que es porque debes agregarle un texto alternativo a la imagen. Entonces, puedes escribir esta línea de la siguiente manera:
<img src={logo} alt = «Twitter»></img>
Una vez que tenemos este archivo importado, podemos darle estilo para ubicarlo convenientemente dentro de nuestra aplicación.
Otra manera de insertar un SVG en React es usando el componente de React. Entonces, importarás el archivo usando la palabra clave ReactComponent. Ahí podrás darle el nombre que quieras a este componente usando as:
import { ReactComponent as Icon} from ‘../../assets/twitter.svg’;
Luego, podemos insertar este componente Icon directamente en nuestro header usando <Icon/>. Al ser un SVG, puedes insertar las propiedades de width y height directamente en el componente para definir su tamaño dentro de tu aplicación.
¿Qué sigue?
Ahora que sabes cómo insertar un SVG en React, ¡puedes usar este conocimiento para desarrollar y personalizar tus proyectos! En KeepCoding estamos para acompañarte en este proceso. Por ello, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás a desarrollar tus propios proyectos con lenguajes como JavaScript, HTML y CSS. ¿A qué esperas para ser un desarrollador web? ¡Inscríbete ya!
