¿Cómo funciona el reenvío de ...props?

El componente toma `{ size, color, ...props }` y hace spread de `{...props}` en el elemento SVG. Eso te deja **pasar cualquier atributo DOM**: ` `. Sin reenvío, los props desaparecerían silenciosamente: tendrías que modificar el componente cada vez.

¿Por qué el nombre del componente debe ser PascalCase?

JSX **decide qué es un tag por su primera letra**: minúscula = elemento HTML (` `, ` `), mayúscula = componente React (` `). Si llamas a tu componente `iconCheck` (minúscula), JSX piensa que es **un tag HTML llamado "iconcheck"** y no renderiza nada. PascalCase es **obligatorio por convención**.

¿Y si el SVG tiene múltiples colores (p. ej. una ilustración)?

La herramienta **solo extrae el primer color o el dominante** como prop. El resto se queda inline en el componente. Puedes luego añadir manualmente más props (como `accentColor`, `backgroundColor`) y sustituir los valores. O desactiva "Extraer color" y deja todo como estaba.

¿Default export o named export?

**Named export** (`export const IconCheck`) es **más común en librerías**: más fácil importar muchos iconos a la vez: `import { IconCheck, IconClose } from "./icons"`. **Default export** (`export default function`) es cómodo cuando un fichero tiene **un solo componente**. Para una librería de iconos **prefiere named**, para un componente de un solo propósito **default está bien**.

¿Qué es React.FC vs una función plana?

`React.FC ` es el **tipo de componente funcional**. Es el enfoque de tipado más antiguo, **algo controvertido** (`children` por defecto en el tipo, algunos patrones funcionan distinto). El código moderno **usa una función plana** con tipos de prop estrictos: `const IconCheck = ({size, color}: IconProps) => ...`. Es más claro. La herramienta ofrece ambas versiones: **elige la función plana** salvo que tu proyecto tenga la otra convención.

¿Puedo usar el componente generado en Next.js?

Sí. **Funciona como Server Component o Client Component**. Si el componente no usa estado ni eventos, **puede ser Server Component** (mejor para SEO). Si conectas `onClick` por fuera, **el wrapper debe ser Client Component** pero el icono no. Simplemente suelta el fichero en `components/icons/` e importa como siempre.

¿Y si el SVG no tiene viewBox?

**Sin `viewBox` el SVG no escala**. El componente renderizará a tamaño fijo pese al prop `size`. Solución: añade un viewBox a mano en el SVG antes de convertir, o edita el componente generado. El valor de `viewBox` es "min-x min-y width height": para un icono típico 24x24 es `"0 0 24 24"`. El optimizador SVG marca un viewBox ausente.

¿Puedo pasar className?

Sí: si mantienes **forward ...props** activo, puedes pasar `className`, `style`, cualquier prop DOM. Ejemplo: ` `: el color se configura vía Tailwind en vez del prop `color`. Recuerda que `currentColor` en el SVG lee el `color` CSS, así que `text-green-500` (es decir `color: green`) funciona.

¿Qué hace "extraer tamaño"?

Reemplaza los `width="24"` y `height="24"` hardcodeados con valores prop-driven: `width={size} height={size}`. Te deja renderizar el mismo componente a distintos tamaños: ` ` o ` `. Sin él el **tamaño queda bloqueado** en el SVG y tienes que sobreescribir vía CSS. El default es 24 (el tamaño de icono estándar).

SVG a componente React - gratis

¿Por qué convertir SVG a un componente React?

SVG en bruto dentro de una app React tiene unas cuantas peculiaridades: `class` debe ser `className`, los atributos con guion (`stroke-width`) se vuelven camelCase, el color va hardcodeado en el SVG. Si quieres renderizar el mismo icono en otro color, necesitas un segundo fichero. ¿Otro tamaño? Otro fichero, o una sobreescritura CSS.

Un componente React con props gestiona esto limpiamente: `<IconCheck size={20} color="red" />`. Un fichero, cualquier color, cualquier tamaño. Más reenvío de `...props`: cuela `aria-label` u `onClick` sin cambiar el componente.

Pega tu SVG (Figma, Iconify, tu propio arte), elige opciones (TypeScript vs JSX, named vs default export, si quieres un prop `color`/`size`) y obtén un componente listo para copiar. Descarga como `.tsx` con nombre de fichero correcto o copia al portapapeles.

Cómo usar

Pega código SVG en el panel izquierdo. Puede ser un icono (24x24), un logo, una ilustración: cualquier SVG.
Introduce un nombre de componente (PascalCase, p. ej. `IconCheck`, `LogoBrand`).
Activa opciones: TypeScript para versión tipada, default export o named.
A la derecha obtienes el componente listo. Debajo una preview en vivo con el tamaño y color actuales.
Pulsa "Copiar" para copiar el código o "Descargar .tsx" para guardar el fichero con el nombre correcto.

Cuándo ayuda

Casos de uso prácticos:

Librería de iconos en un proyecto. La diseñadora exporta 30 iconos de Figma, los conviertes cada uno y acabas con `components/icons/` lleno de ficheros `.tsx`. Cada icono tiene props size/color y es theme-aware.
Logo de empresa. Exporta de Illustrator, convierte, obtienes `<LogoBrand size={32} />` para header, footer, embeds sociales.
Iconos de estado. `<IconSuccess color="green" />`, `<IconError color="red" />`: un fichero, distintos colores por estado.
Ilustraciones custom de hero. Una ilustración SVG en la hero section, ahora un componente con colores de acento editables.
Un reemplazo de lucide-react / heroicons. A veces necesitas un icono que ninguna librería entrega. Convierte el tuyo.
SVG en build-time. En Next.js un componente supera a `<Image src="/icon.svg" />`: menos requests, mejor SSR.
Reenvío de props. `<IconClose onClick={handleClose} aria-label="Cerrar modal" />`: accesibilidad e interacción en uno.

Primero reduce tu SVG con el optimizador SVG. Para HTML a JSX mira el conversor HTML a JSX.

Preguntas frecuentes

`currentColor` es un valor CSS especial que significa "toma el valor del `color` del padre". Así que un icono dentro de `<div style={{color: "red"}}><IconCheck /></div>` será rojo. Es el mejor default porque el icono hereda el styling, funciona con hover (`text-blue-500 hover:text-blue-700`), funciona con theming. Si quieres un color fijo, pásalo explícitamente: `<IconCheck color="#3b82f6" />`.

SVG a componente React