Tool Hub

SVG to Code

Convierte marcado SVG a código HTML / JSX / Vue SFC

Pega marcado SVG y conviértelo en código HTML, JSX o Vue limpio. Maneja automáticamente la conversión de atributos (p. ej., class → className para JSX).

Cómo usar

  1. Seleccione un modo de salida: HTML, JSX (React) o Plantilla de Vue.
  2. Pegue su marcado SVG en el campo de entrada.
  3. Lea el código convertido en el cuadro de salida, donde el modo JSX renombra class a className y convierte atributos kebab-case a camelCase.
  4. Copie la salida con el botón de copia.
  5. Verifique la vista previa SVG en vivo a continuación de la salida para confirmar que el gráfico se ve correcto.

Ejemplos

  • Pegar un SVG con class="icon" y stroke-width="2" en modo JSX genera className="icon" y strokeWidth="2".
  • Cambiar la misma entrada al modo de plantilla Vue reemplaza class= con :class= mientras mantiene todos los otros atributos sin cambios.

Verifica las salidas antes de usar en producción. Sin garantía — ver Términos.