¿Por qué no pegar el SVG directamente en React?
Pegar SVG sin procesar en un archivo .jsx suele producir una avalancha de advertencias como «Invalid DOM property stroke-width» o «Invalid DOM property class», o directamente un error de compilación si el archivo contiene un atributo style o una declaración XML. Renombrar cada atributo a mano es lento y propenso a errores en sets de iconos grandes.
Este convertidor hace el renombrado por ti y envuelve el marcado en un componente que acepta props. Como {...props} se propaga sobre el <svg> raíz, puedes pasar className, aria-label, onClick o un ancho personalizado desde el componente padre sin volver a editar el icono.
Ajustes recomendados para iconos de React
Para un componente de icono reutilizable te recomendamos:
- Activar currentColor para que el icono herede el color de texto del padre y funcione en modo oscuro.
- Activar la prop size para controlar ancho y alto con un solo valor, por ejemplo size={20}.
- Mantener el viewBox y quitar width y height fijos para que el icono escale con CSS.
- Usar forwardRef solo cuando el padre necesite el elemento <svg>, por ejemplo para tooltips o animaciones.
Componentes en línea frente a archivos de imagen
Los componentes SVG en línea se pueden estilizar con CSS, animar y cambiar de color al pasar el ratón, y nunca generan una petición de red adicional. Para ilustraciones grandes que no cambian, un simple <img src="/file.svg"> puede salir más barato porque el navegador lo almacena en caché por separado. Usa componentes para iconos y gráficos de interfaz, y etiquetas de imagen para ilustraciones pesadas.