Convertir SVG a JSX

Convierte marcado SVG en un componente funcional de React: SVGO optimiza el SVG en tu navegador y después SVGR lo convierte en el servidor. Los atributos pasan a camelCase (stroke-width a strokeWidth), los tamaños numéricos pasan a números y {...props} se propaga en el <svg> raíz.

Convertir un icono exportado desde Figma o Illustrator en un componente de React.

SVG

SVGO optimization is turned on. You can turn it off or configure it in settings. SVG to JSX code is converted on the server.

Original

Result

JSX

Cuándo usarla

Convertir un icono exportado desde Figma o Illustrator en un componente de React.
Comprobar cómo reescribirá SVGR un SVG antes de añadir SVGR a un pipeline de build.

Cómo usarla

Pega marcado SVG o carga un archivo .svg; la entrada que no sea SVG válido se rechaza con un error.
Abre Configuración para desactivar la optimización de SVGO o activar y desactivar plugins como remove title o merge paths; la vista previa bajo el editor compara el SVG original y el optimizado.
Copia el componente y cambia el nombre de SvgComponent; pasa className, width o fill como props.

SVG

<!-- Generator: Adobe Illustrator -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <title>Minus</title>
  <path fill="none" stroke="currentColor" stroke-width="2.000" stroke-linecap="round" d="M5.000 12.000 L19.000 12.000"/>
</svg>

Componente de React (JSX)

import * as React from "react"
const SvgComponent = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={24}
    height={24}
    viewBox="0 0 24 24"
    {...props}
  >
    <path
      fill="none"
      stroke="currentColor"
      strokeLinecap="round"
      strokeWidth={2}
      d="M5 12h14"
    />
  </svg>
)
export default SvgComponent

Detalles y limitaciones

SVGO se ejecuta en un Web Worker en tu navegador; después, el SVG optimizado se envía al endpoint /api/svg-to-jsx de este sitio, donde SVGR genera el componente. No pegues gráficos confidenciales.

Con la configuración predeterminada se eliminan los comentarios, <title>, <desc> y los metadatos del editor, y los datos de los paths se acortan (M5.000 12.000 L19.000 12.000 se convierte en M5 12h14). Desactiva la optimización para convertir el SVG tal como lo pegaste.

Las cadenas style pasan a objetos style y class pasa a className.

La salida está pensada para React DOM; usa SVG a React Native para react-native-svg.

FAQ

¿Por qué la raíz conserva width y height?

remove dimensions está desactivado en la configuración de SVGO y SVGR usa las opciones predeterminadas, así que las dimensiones se mantienen como números (width={24}). Sobrescríbelas mediante props, ya que {...props} va después de ellas.

¿fill="currentColor" me permite definir el color desde CSS?

Sí. currentColor se conserva, así que el icono sigue el color CSS de su elemento padre. Los colores fijos dentro de los paths no se sustituyen.

¿Por qué falta el <title> en mi componente?

remove title de SVGO está activado por defecto. Desactívalo en Configuración, o desactiva la optimización por completo, si necesitas el <title> por accesibilidad.

¿Hay salida en TypeScript?

No. La página genera un componente JavaScript sin anotaciones de tipo.

Especificaciones y referencias

SVGR documentation

SVG