Instalación de SVGR en un proyecto con Vite

 ¿SVGR se puede usar en un proyecto con Vite y React?

¡Absolutamente! Vite no solo es compatible con SVGR y React, sino que su configuración es increíblemente sencilla y se considera la forma estándar y moderna de gestionar los archivos SVG como componentes de React.

Vite utiliza un sistema de plugins para extender sus capacidades. Para integrar SVGR en tu flujo de trabajo de Vite + React, solo necesitas instalar y configurar el plugin adecuado.

Aquí te explico los pasos y el resultado:

---

Integración de SVGR en Vite + React

1. El Plugin Necesario

El plugin clave para esto es @vitejs/plugin-react-swc. Si usaste la CLI de Vite para crear tu proyecto React, es probable que ya lo tengas instalado. Si no, necesitas vite-plugin-svgr.

2. Configuración en vite.config.js

Debes indicarle a Vite que, cuando vea una importación de un archivo .svg, debe procesarlo con SVGR.

Aquí tienes el archivo de configuración estándar:

Configuración de Vite para SVGR

import { defineConfig } from 'vite';

import react from '@vitejs/plugin-react-swc';

import svgr from 'vite-plugin-svgr'; // Importar el plugin SVGR

// https://vitejs.dev/config/

export default defineConfig({

plugins: [

react(),

svgr() // Añadir el plugin SVGR a la lista

],

});

3. El Flujo de Trabajo

Una vez configurado, tu flujo de trabajo se vuelve muy limpio:

1. Guarda tu SVG (ej. diente-14.svg) en tu carpeta de assets o componentes.

2. En cualquier componente de React, importa el SVG directamente:

Ejemplo de Uso de SVG en React

import React from 'react';

// Vite + SVGR convierte automáticamente este SVG en un componente de React

import DienteIcon from './assets/diente-14.svg';

import { useState } from 'react';

const Diente14 = ({ esCaries }) => {

const [estaSeleccionado, setEstaSeleccionado] = useState(false);

// Usamos Tailwind para el color, pasando la clase directamente al componente SVG

const colorClase = esCaries ? 'text-red-600' : 'text-gray-600';

const handleClick = () => {

setEstaSeleccionado(!estaSeleccionado);

console.log("Diente 14 clicado, listo para actualizar el estado global.");

};

return (

<div className="p-4 border rounded-lg hover:shadow-xl transition-shadow cursor-pointer">

<h3 className="text-xl font-semibold mb-2">Diente 14</h3>

{/* Usamos el SVG importado como un componente.

Le pasamos props como className y onClick directamente.

*/}

<DienteIcon

onClick={handleClick}

className={`w-16 h-16 mx-auto ${colorClase} ${estaSeleccionado ? 'ring-4 ring-blue-500 rounded-full' : ''}`}

title="Superficies del diente"

/>

<p className="text-center mt-2 text-sm">

Estado: {esCaries ? 'Caries' : 'Sano'}

</p>

</div>

);

};

export default Diente14;

Con este enfoque, SVGR te permite mantener tus gráficos vectoriales como archivos separados, mientras te da el control total de React para estilizarlos y manipularlos con el estado, que es la mejor práctica para tu odontograma.

---

¿En dónde me puedo fijar si SVGR ya está instalado en mi proyecto?

¡Esa es una excelente pregunta operativa! Es muy común que, en proyectos modernos, las herramientas de build (como Vite, Next.js o Create React App) incluyan SVGR por defecto o lo instalen automáticamente, por lo que puede que ya esté allí sin que lo sepas.

Puedes verificar la instalación de SVGR en tu proyecto revisando tres lugares clave. Si encuentras la evidencia en cualquiera de estos puntos, ¡es que ya lo tienes!

---

1. Archivo vite.config.js (O webpack.config.js)

Este es el lugar más importante. El plugin de SVGR debe estar listado en la configuración de tu build tool.

• ¿Qué buscar? El archivo de configuración principal de Vite.

JavaScript

// En tu archivo: vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import svgr from 'vite-plugin-svgr'; // <-- ¡Busca esta línea!

// ...

export default defineConfig({
  plugins: [
    react(),
    svgr() // <-- ¡Busca que esté incluido aquí!
  ],
  // ...
});

Si encuentras la importación y el uso de vite-plugin-svgr (o una variación similar como react-svg-loader si usas Webpack), SVGR está instalado y activo.

2. Archivo package.json

Aquí es donde ves la lista de todas las dependencias y herramientas que tu proyecto utiliza.

• ¿Qué buscar? Revisa las secciones dependencies y devDependencies.

JSON

// En tu archivo: package.json

{
  "name": "odontograma-app",
  // ...
  "devDependencies": {
    "vite": "^5.0.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "vite-plugin-svgr": "^4.2.0", // <-- ¡Busca un paquete llamado "svgr" o similar!
    // ...
  }
}

Si el plugin aparece en package.json, significa que está instalado. Si además el paso 1 muestra que está siendo usado, entonces está activo.

3. Flujo de Trabajo (La Prueba de Fuego)

La mejor prueba es intentar usar la funcionalidad directamente. Si el siguiente código funciona sin errores, SVGR está configurado correctamente.

• Paso 1: Asegúrate de tener un archivo SVG sencillo (ej. test.svg) en tu carpeta de componentes.

• Paso 2: Intenta importarlo en un componente de React y pasarle una propiedad:

JavaScript

// En tu archivo: App.jsx
import React from 'react';
import TestIcon from './assets/test.svg'; // <--- Intentar esta importación

const App = () => {
    return (
        // Intentar usarlo como un componente y pasarle una clase de Tailwind
        <TestIcon className="w-10 h-10 text-red-500" /> 
    );
};

Si el ícono SVG aparece en la pantalla y se le aplica el color rojo de la clase de Tailwind (text-red-500), puedes confirmar que SVGR está funcionando perfectamente, incluso si no encontraste el plugin exacto en los archivos de configuración (ya que podría estar anidado dentro de otro preset).

---

¿Cómo instalo SVGR en un proyecto con Vite, npm y React?

¡Excelente pregunta! La configuración de SVGR en un proyecto React con Vite es muy sencilla y requiere solo de un par de pasos, ya que Vite está diseñado para ser muy extensible.

SVGR permite que importes archivos .svg directamente como si fueran componentes de React, algo fundamental para nuestro Odontograma.

Aquí te muestro cómo hacerlo con npm:

1. Instalar la Dependencia de SVGR para Vite

Necesitas un plugin que le enseñe a Vite a transformar los archivos .svg que importes en código JSX.

2. Configurar el Plugin en vite.config.js

Ahora debes abrir tu archivo de configuración de Vite y añadir el plugin que acabas de instalar.

Como expliqué antes, el agregado del plugin svgr se hace de la siguiente manera:

import { defineConfig } from 'vite';

import react from '@vitejs/plugin-react-swc';

import svgr from 'vite-plugin-svgr'; // Importar el plugin SVGR

// https://vitejs.dev/config/

export default defineConfig({

plugins: [

react(),

svgr() // Añadir el plugin SVGR a la lista

],

});

3. Crear el Archivo de Tipos (Opcional, pero Recomendado)

Si estás usando TypeScript o quieres que tu IDE reconozca la importación de archivos .svg como componentes React (y no solo como URLs de string), es buena práctica crear un archivo de declaración de tipos.

Nota: En muchos proyectos de React/Vite, el archivo vite-env.d.ts ya existe. Simplemente añade la declaración de módulo (declare module "*.svg") al final de ese archivo.

/// <reference types="vite/client" />

// Añade esta línea para indicar a TypeScript que los archivos .svg

// son componentes React con sus propiedades típicas (como 'className')

declare module "*.svg" {

import * as React from 'react';

export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement> & { title?: string }>;

// Esto permite la importación por defecto (import Logo from './logo.svg')

const src: string;

export default src;

} 

4. Usar un Componente SVG

¡Listo! Ya puedes importar tus archivos SVG directamente en cualquier componente de React:

---

Con esto, ya tenemos la infraestructura para crear el componente <Diente /> compuesto que definimos antes.

¿Continuamos con la estructura de datos de Firestore para almacenar el estado de cada diente?