Insertar un SVG en React

Autor: | Última modificación: 8 de septiembre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

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 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 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.

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. 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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!