Importar SVGs en una app React y Vite: Tutorial completo

La importación de SVGs a una aplicación web es una tarea esencial en el desarrollo frontend. En este tutorial completo, aprenderemos cómo importar SVGs en una aplicación React con Vite.

¿Qué es React y Vite?

React es una biblioteca de JavaScript de código abierto utilizada para construir interfaces de usuario en aplicaciones web. Por otro lado, Vite es una herramienta de construcción y desarrollo frontend extremadamente rápida y modular. Ambos se han convertido en herramientas populares en el mundo de la programación.

¿Por qué SVGs?

Los SVGs o Scalable Vector Graphics son archivos de imagen vectorial que se escalan sin pérdida de calidad. Además, pueden ser manipulados fácilmente usando CSS o JavaScript, lo que los convierte en una excelente opción para gráficos y animaciones en la web.

Pasos para importar SVGs en una app React con Vite

Primero, debemos instalar las dependencias necesarias para utilizar React con Vite.
```
npm install --save react react-dom vite
```
A continuación, creamos una carpeta llamada public en el directorio raíz de nuestro proyecto. Dentro de ella, creamos otra carpeta llamada icons, que es donde almacenaremos nuestros SVGs.
Para importar los SVGs en nuestro proyecto, instalamos @svgr/webpack y svg-url-loader.
```
npm install --save-dev @svgr/webpack svg-url-loader
```

Configuramos nuestro archivo vite.config.js para que pueda importar nuestros SVGs correctamente. Esto se logra agregando el siguiente bloque de código:

export default {
    plugins: [react(), svgr()],

    optimizeDeps: {
        include: ["@mdi/svg"],
    },

    resolve: {
        alias: {
            "@/icons": "/src/assets/icons",
        },
    },

    css: {
        preprocessorOptions: {
            scss: {
                additionalData: '@import "~@/assets/scss/common.scss";',
            },
        },
    },
};

Finalmente, podemos importar nuestros SVGs en cualquier componente de React utilizando el siguiente código:

import { ReactComponent as Icon } from "@/icons/icon.svg";

export function MyComponent() {
    return (
        <div>
            <Icon />
        </div>
    );
}

Con estos pasos, nuestros SVGs se pueden importar y utilizar fácilmente en nuestra aplicación React con Vite.

La importación de SVGs en una aplicación React con Vite es un proceso sencillo y facilita mucho la creación y manipulación de gráficos en la web. Con estos tutoriales se busca brindar una guía de implementación.

Descubre lo fácil que es agregar imágenes vectoriales a tu aplicación React

Agregar imágenes a una aplicación React puede parecer complicado, pero en realidad es muy sencillo gracias a la importación de SVGs en Vite. En este tutorial completo, te mostraremos cómo hacerlo en unos simples pasos.

Para comenzar, es importante tener en cuenta que Vite es un frontend build tool que permite crear aplicaciones React más rápidas y eficientes que otros predecesores como Webpack o Create React App. Por otro lado, SVG (Scalable Vector Graphics) es un formato de imagen vectorial que permite la escalabilidad sin perder calidad y es especialmente útil para elementos como iconos o logos.

Pasos para importar un SVG en react con Vite

Agregar el plugin que nos permitirá importar SVGs en nuestro archivo vite.config.js

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "@svgr/rollup";

export default defineConfig({
    plugins: [react(), svgr()],
});

En nuestro componente React, importamos el archivo SVG y lo renderizamos como un componente.

import MiLogo from "./mi-logo.svg";

function App() {
    return (
        <div>
            <MiLogo />
        </div>
    );
}

export default App;

¡Y eso es todo! Con estos sencillos pasos, ya podemos agregar cualquier imagen en formato SVG a nuestra aplicación React. Además, gracias a la escalabilidad de los SVGs, no tendremos que preocuparnos por la calidad de la imagen en diferentes dispositivos o tamaños de pantalla.

Agregar imágenes vectoriales a una aplicación React con Vite es un proceso simple y rápido que nos permite mejorar la calidad y eficiencia de nuestra aplicación. Con estas herramientas de programación frontend, podemos crear aplicaciones más rápidas y eficientes que satisfagan las necesidades de nuestros usuarios de manera más efectiva. ¡Inténtalo tú mismo con tu próxima aplicación React y verás cómo mejora tu desarrollo frontend!

Instalando la dependencia necesaria para importar SVGs en tu proyecto

Si estás trabajando en un proyecto frontend utilizando React y Vite, probablemente te hayas topado con el desafío de importar archivos SVG en tu aplicación. Afortunadamente, podemos resolver este problema fácilmente mediante la instalación de una dependencia específica.

Para importar archivos SVG en nuestra aplicación, necesitamos la dependencia @svgr/webpack. Esta dependencia nos permitirá utilizar archivos SVG como componentes de React y usarlos en nuestra aplicación.

Instalar esta dependencia es muy sencillo, simplemente abrimos nuestra terminal y escribimos el siguiente comando:

npm install --save-dev @svgr/webpack

Una vez instalada la dependencia, debemos asegurarnos de que nuestro archivo de configuración de Vite tenga la configuración adecuada para manejar los archivos SVG. En nuestro archivo vite.config.js, debemos agregar la siguiente configuración:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "@svgr/webpack";

export default defineConfig({
    plugins: [react(), svgr()],
});

Con esta configuración, ya estamos listos para comenzar a importar archivos SVG en nuestra aplicación React. Para importar nuestro archivo SVG, simplemente lo importamos como si fuera un módulo de JavaScript:

import { ReactComponent as Logo } from "./logo.svg";

El archivo SVG se importa como un componente de React, lo que significa que podemos utilizarlo en cualquier lugar de nuestra aplicación donde necesitemos mostrar un logo. Por ejemplo:

function MyComponent() {
    return (
        <div>
            <h1>Bienvenido a mi sitio web</h1>
            <Logo />
        </div>
    );
}

¡Y eso es todo! Con la dependencia @svgr/webpack instalada y la configuración adecuada en nuestro archivo vite.config.js, podemos importar y utilizar archivos SVG en nuestro proyecto React con Vite. Ahora puedes agregar iconos y otros elementos gráficos a tu aplicación sin mayor problema.

Creando un componente para renderizar tus SVGs en tu aplicación React

En la programación frontend, una de las tareas comunes es importar imágenes y otros recursos en nuestra aplicación. En particular, importar archivos SVGs en una aplicación React puede ser un poco más complicado que importar imágenes regulares, pero no es imposible. En este tutorial completo, vamos a crear un componente para renderizar tus SVGs en tu aplicación React, utilizando la herramienta Vite como nuestro bundler.

Primero, asegurémonos de tener instalado React y Vite en nuestro entorno de desarrollo. Luego, creamos un nuevo componente en nuestra aplicación React y llamémoslo “SvgIcon”. Vamos a definirlo como una función, como cualquier otro componente funcional en React. Dentro de nuestro componente, podemos importar nuestro SVG utilizando la sintaxis de importación de ES6.

import miSvg from "../ruta/a/miSvg.svg";

function SvgIcon() {
    return (
        <div>
            <img src={miSvg} alt="Mi SVG" />
        </div>
    );
}

export default SvgIcon;

Observen que no hemos cambiado nada en el archivo SVG. Simplemente lo estamos importando y renderizando como cualquier otra imagen en nuestro componente React.

Sin embargo, aquí es donde las cosas pueden ponerse un poco más complicadas. Algunos archivos SVG pueden incluir código que no es compatible con React. Para evitar esto, podemos configurar Vite para que procese nuestros SVGs utilizando una herramienta llamada “svgr”.

Para hacer esto, primero debemos instalar “svgr” como dependencia de desarrollo:

npm install -D @svgr/webpack

Luego, agregamos la siguiente configuración en nuestro archivo “vite.config.js”:

import svgr from "@svgr/webpack";

export default {
    // otras configuraciones ...
    plugins: [svgr()],
};

Con esta configuración, Vite procesará automáticamente nuestros archivos SVG y los convertirá en un formato más compatible con React. Ahora podemos importar nuestros archivos SVG como un componente React válido y usarlos en nuestra aplicación como cualquier otro componente React.

import MiIcono from "../ruta/a/miIcono.svg";

function App() {
    return (
        <div>
            <MiIcono />
        </div>
    );
}

export default App;

¡Y eso es todo! Con estos sencillos pasos, hemos creado un componente para importar y renderizar nuestros archivos SVG en nuestra aplicación React utilizando Vite y svgr.

La importación de archivos SVG en una aplicación React puede ser un poco más difícil que importar imágenes normales. Pero con la configuración adecuada y el uso de herramientas como svgr, podemos integrar nuestros SVGs en nuestra aplicación sin ningún problema. Dicho esto, ¡esperamos que este tutorial completo te haya resultado útil en tu trabajo diario de programación frontend!

Añadiendo estilos CSS personalizados a tus SVGs importados en React y Vite

En la programación frontend, la importación de SVGs es una tarea común para mejorar la apariencia de una aplicación. Si bien ya hemos visto cómo importar SVGs en React y Vite en el tutorial anterior, en este artículo veremos cómo podemos añadir estilos CSS personalizados a nuestros SVGs importados.

Primero, crearemos un archivo CSS y agregaremos nuestros estilos personalizados. En nuestro ejemplo, agregaremos una clase CSS llamada .icon que establecerá un tamaño de fuente de 50px y un color de fondo gris.

.icon {
    font-size: 50px;
    background-color: gray;
}

Luego, en nuestro archivo App.js, importaremos nuestro SVG como un componente y asignaremos la clase CSS que acabamos de crear.

import { ReactComponent as Logo } from "./logo.svg";
import "./App.css";

function App() {
    return (
        <div className="App">
            <Logo className="icon" />
        </div>
    );
}

export default App;

Al asignar la clase .icon al componente SVG, aplicamos nuestros estilos personalizados al SVG importado. Ahora, nuestro SVG tendrá un fondo gris y se verá más grande debido al aumento de tamaño de fuente.

También podemos aplicar otros estilos CSS, como ajustar el tamaño de nuestro SVG o cambiar su color de relleno. Por ejemplo, podemos utilizar la siguiente regla CSS para cambiar el color de relleno de nuestro SVG a verde:

.icon path {
    fill: green;
}

Esto selecciona todos los elementos path dentro de nuestro componente SVG y cambia el color de relleno a verde.

Agregar estilos CSS personalizados a nuestros SVGs importados en React y Vite es una tarea sencilla que puede mejorar significativamente la apariencia de nuestra aplicación. Al utilizar reglas CSS simples, podemos personalizar nuestros SVGs importados y hacer que se integren perfectamente en nuestro diseño. En la próxima sección, veremos cómo animar nuestros SVGs importados para crear una experiencia de usuario más atractiva.

Importar SVGs en una app React y Vite: Tutorial completo