Simplifique su flujo de trabajo: Busque miniwebtool.
Añadir
Herramientas relacionadas
Optimizador de SVGPlayground de TypeScript
Página de inicio > Herramientas para administradores web > Conversor de SVG a React/JSX
 

Conversor de SVG a React/JSX

Convierta archivos SVG pegados o subidos en componentes JSX limpios de React con atributos en camelCase, props opcionales de TypeScript, forwardRef, React.memo, accesibilidad de título, conversión de objetos de estilo y salida saneada.

Conversor de SVG a React/JSX
Ejemplos
Listo
Pega un elemento <svg> completo. El servidor acepta hasta 220000 caracteres.
Subir un archivo llena el editor para la vista previa, luego el archivo subido se utiliza cuando realizas la conversión.
Entrada <svg>
Normalizar camelCase
React {...props}
Salida Componente
Elementos 0
Atributos 0
ViewBox -
Usa PascalCase, por ejemplo AlertIcon, BrandMark o LogoGlyph.
Configuración de salida

Embed Conversor de SVG a React/JSX Widget

Conversor de SVG a React/JSX

El Conversor de SVG a React JSX transforma archivos SVG sin procesar en componentes de React reutilizables. Está diseñado para desarrolladores que necesitan componentes de iconos más limpios, marcas, ilustraciones de productos y activos de sistemas de diseño sin tener que corregir manualmente cada atributo de SVG. Pega el marcado SVG o sube un archivo .svg en formato UTF-8, elige las opciones de React que necesites y luego copia el componente generado en tu proyecto.

Cómo usar

  1. Pegar o subir SVG. Pega un archivo SVG completo en el editor o sube un archivo .svg en formato UTF-8.
  2. Nombrar el componente. Introduce un nombre de componente de React en PascalCase, como AlertIcon o BrandMark.
  3. Elegir opciones de React. Selecciona TypeScript, forwardRef, React.memo, accesibilidad de título, conversión de estilo, desinfección y opciones de propagación de props.
  4. Convertir a JSX. Haz clic en Convertir a componente de React para generar código JSX listo para copiar.
  5. Revisar y copiar. Revisa el resumen de la conversión, las advertencias y el código generado antes de copiarlo en tu proyecto de React.

Qué maneja el conversor

Limpieza de atributos de ReactLos atributos comunes de SVG como stroke-width, fill-rule y clip-path se reescriben como strokeWidth, fillRule y clipPath.
Ergonomía del componenteLas opciones de {...props}, forwardRef, React.memo, exportación predeterminada, exportación nombrada y props de TypeScript facilitan la incorporación del resultado en una base de código de React.
Revisión de salida más seguraLa desinfección elimina las etiquetas de script, los controladores de eventos en línea y los enlaces javascript: de forma predeterminada para que el JSX generado sea más seguro de inspeccionar antes de su uso.

Consejos para mejores componentes de SVG en React

Conserva el viewBox original siempre que sea posible, ya que controla cómo se escala el SVG. Para los sistemas de iconos, usar width="1em" y height="1em" permite que el icono herede el tamaño del texto, al mismo tiempo que permite a quienes lo utilicen anular las dimensiones mediante props. Utiliza un nombre de componente descriptivo en PascalCase, mantén los SVG decorativos accesibles con aria-hidden cuando sea apropiado y utiliza la prop de título para los iconos significativos que transmitan información.

Preguntas frecuentes

¿Qué cambia este conversor de SVG a React?

Analiza el XML de SVG y reescribe los atributos de SVG en JSX compatible con React, incluyendo className, atributos SVG en camelCase, objetos de estilo opcionales, props, forwardRef, accesibilidad de título y sintaxis de exportación.

¿Puedo subir un archivo SVG?

Sí. Puedes subir un archivo .svg en formato UTF-8 o pegar el marcado SVG. Los archivos subidos se leen como texto y se convierten en JSX en el servidor.

¿Desinfecta el código SVG?

La desinfección está activada de forma predeterminada. El conversor elimina las etiquetas de script, los controladores de eventos en línea y los enlaces javascript: para que el componente generado sea más seguro de revisar antes de su uso.

¿Por qué convertir los atributos de estilo en objetos?

React espera que la prop style sea un objeto al escribir JSX. Convertir cadenas de estilo en objetos hace que la salida se compile limpiamente y mantiene los nombres de las propiedades CSS en camelCase.

¿Cuál es el mejor formato para el nombre de un componente?

Usa PascalCase como AlertIcon o BrandMark. El conversor limpia los caracteres no válidos y se asegura de que el resultado comience con un identificador de componente de React válido.

Cite este contenido, página o herramienta como:

"Conversor de SVG a React/JSX" en https://MiniWebtool.com/es/conversor-de-svg-a-react-jsx/ de MiniWebtool, https://MiniWebtool.com/

por el equipo de miniwebtool. Actualizado: 2026-05-22

Herramientas para administradores web:

Herramientas destacadas:

Calculadora de Signo Solar, Lunar y Ascendente 🌞🌙✨Calculadora de día del año - ¿Qué día del año es hoy?Generador de IMEI Aleatorio📅 Calculadora de FechaCalculadora de Compatibilidad AmorosaCalculadora del Signo de VenusConvertidor de cm a pies y pulgadasConvertidor de Pies y Pulgadas a CentímetrosCalendario del Día del AñoSelector de Nombre AleatorioSelector de Películas AleatorioBúsqueda de ID de Usuario de InstagramEliminar acentos del textoBúsqueda de ID de usuario de Facebookcalculadora-de-hba1cCalculadora de SumaConvertidor de kPa a psiCalculadora de Desviación Estándar RelativaCalculadora de Duración de TiempoBola Mágica 8Generador de Cartas de Baraja AleatorioCalculadora de Número MaestroCalculadora de NumerologíaExtractor de Imágenes de VideoDescargador de Miniaturas de YouTube📅 Calculadora de Diferencia entre Fechasbúsqueda-de-direcciones-MACCalculadora de Promedio - Alta PrecisiónSelector Aleatorioconvertidor ppm a porcentajeConvertidor de Decimal a TiempoEliminar espaciosCalculadora de Número del NombreGenerador de Palabras DesordenadasGenerador de Tabla de Valor PosicionalConvertidor de Porcentaje a PPMCalculadora de CombinaciónCalculadora de reducción porcentualCalculadora del Signo de Marte¿Cuál es mi signo del zodiaco?¿Cuál es mi número de la suerte?Generador de Código MorseCalculadora de Número del AlmaDivisor de imágenesCalculadora CPMCalculadora de cociente y residuoCalculadora Hexadecimal🌐 Convertidor de Zona HorariaConvertidor de Tiempo a DecimalCalculadora de notación científicaCalculadora de Aumento PorcentualCalculadora de CírculosGenerador Aleatorio de Listas🖱️ Contador de ClicsCalculadora de Velocidad de CiclismoGenerador de Superpoder AleatorioContador de líneasOrdenar NúmerosCalculadora de Número de Trayecto de VidaCalculadora de Coeficiente de VariaciónLista de Años BisiestosDivisor de AudioGenerador de números de loteríaCalculadora de Número de DestinoCalculadora de pendiente y gradoCalculadora de PermutaciónCalculadora de Área de Polígono IrregularVerificador de Nombre de Usuario en Redes SocialesPrimeros n Dígitos de PiConvertidor de FPSConvertidor de Tamaño de ArchivoConvertidor de psi a kPaConvertidor de BaseEstadísticas del Canal de YouTubeGenerador de Cumpleaños AleatorioCalculadora del día de la semana de nacimientoCalculadora de Cambio PorcentualCalculadora de Percentil de EstaturaGenerador de hora aleatoriaGenerador de Nombres AleatoriosCalculadora de Duración de BateríaCalculadora de Promedio de BateoGenerador de Números Decimales AleatoriosConvertidor de fracción a número mixtoFormateador de TextoGenerador de direcciones MACDivisor de vídeoEliminar saltos de líneaGenerador de Plantilla de Cono DesarrolladoCalculadora de Edad GestacionalCalculadora de Hace Cuánto TiempoConvertidor de dirección IP a binarioGenerador de ContraseñaLanzador de DadosCalculadora de MóduloLanzador de MonedasConversor de HTML a TextoConvertidor de Número a FracciónCalculadora de números de ángelesCalculadora de ERAVerificador de Número Par o ImparCalculadora de Log Base 10Generador de letras aleatoriasCalculadora OctalGenerador de Números Enteros AleatoriosGenerador de Coordenadas Aleatoriasconvertidor de palabras a números de teléfonoSimulador de Puertas LógicasCalculadora de Grupo SanguíneoCalcular tiempo entre dos fechasRotar VideoCalculadora de edadConvertidor de Número a PalabraGenerador de Números AleatoriosCalculadora de Posición del SolConvertidor de Notación Científica a DecimalCalculadora de Compatibilidad de Signos LunaresGenerador de Hash SHA256Calendario de Mercurio RetrógradoGenerador de Texto Pequeño ⁽ᶜᵒᵖʸ ⁿ ᵖᵃˢᵗᵉ⁾Calculadora de Peso de AceroContar el número de caracteresConvertidor de dirección IP a hexadecimalGenerador aleatorio de númerosCalculadora de RedondeoCalculadora de Retorno de SaturnoCalculadora Log Base 2Validador XMLInvertir TextoCalculadora del día de la semanaCalculadora de Error PorcentualCambio de Tiempo SRTGenerador de Unir los PuntosCalculadora de Diferencia de ListasCalculadora de Tasa de Interés EfectivoGenerador de Nonogramas (Picross)Calculadora de número de dígitosFusionar vídeosGenerador de PIN AleatorioProbador de fuerza de contraseñaCalculadora del signo de mercurioCalculadora de CosenoCalculadora de media aritméticaConversor de Calendario HebreoGenerador de LaberintosCalculadora de Número de SemanaConvertidor de Decimal a BCDGenerador de cartones de bingoCalculadora de Error EstándarCalculadora de EstimaciónCalculadora de media, mediana y modaGenerador de Número de PersonalidadCreador de Diagramas de Caja y BigotesGenerador de Comidas AleatoriasConvertidor de Porcentaje a DecimalDecodificador de Código MorseCalculadora de Tasa de Crecimiento PorcentualHerramienta en línea para eliminar puntuaciónCalculadora de EscaleraCalculadora de Flujo en TuberíasConvertidor de tazas a gramosCalculadora de Resistencia para LEDCalculadora de Carga de Vigas⚔️ Calculadora de DPSCalculadora de Horas de TrabajoGenerador de Dirección IP AleatoriaExtractor de AudioGenerador de Piedra Papel TijeraCalculadora de Equilibrio de Elementos AstrológicosCalculadora de PendienteCalculadora de SenoGenerador de sopa de letrasGraficador de Curvas ParamétricasCalculadora de ComisionesCalculadora de la Conjetura de CollatzCalculadora de ProporcionesGraficador de funciones trigonométricasExtractor de URLAnalizador de Direcciones MACCalculadora de Pintura🎰 Calculadora de Pity GachaConvertidor Número Mixto a FracciónGenerador de Fechas AleatoriasGenerador de Texto InvisibleGenerador de CriptogramaCalculadora de Fuerza de Cilindro HidráulicoCalculadora de la Ley de OhmGenerador de Verdad o Reto AleatorioCalculadora de FraccionesCalculadora de Pasos a DistanciaCalculadora de Punto de EbulliciónCalculadora de OPSGenerador Aleatorio de Nombres en LíneaCalculadora de Estrategia MartingaleCalculadora de recargoCalculadora de TangenteGenerador aleatorio de animalesGenerador y Verificador de Hash Bcrypt⏱️ Calculadora de HorasConvertidor binario a BCDConversor de mAh a WhCalculadora de Potencia TrifásicaCalculadora de kVACalculadora de Amperios a VatiosCalculadora de Vatios a AmperiosCalculadora de Resistencias en SerieCalculadora de FricciónCalculadora de Plano InclinadoCalculadora de Ventaja MecánicaCalculadora de Velocidad del SonidoCalculadora de Velocidad de OndaCalculadora de flotabilidadCalculadora de Velocidad TerminalCalculadora de Longitud de Onda de de BroglieCalculadora de Energía del FotónCalculadora E=mc²Calculadora de Dilatación del TiempoCalculadora de la Tercera Ley de KeplerCalculadora de Velocidad de EscapeCalculadora de Fuerza GravitacionalCalculadora de la Ley de Beer-LambertCalculadora de la Ecuación de NernstCalculadora de Presión OsmóticaCalculadora de Elevación del Punto de EbulliciónCalculadora de Descenso del Punto de CongelaciónCalculadora de Composición PorcentualCalculadora de NormalidadCalculadora de MolalidadConversor de pKa a KaCalculadora de Henderson-HasselbalchCalculadora de Rendimiento TeóricoCalculadora de Reactivo LimitanteCalculadora de Configuración ElectrónicaTabla Periódica InteractivaGenerador de Planes de Lecciones con IAGenerador de Cuestionarios con IAGenerador de Citas APA MLA ChicagoCalculadora de Porcentaje de AsistenciaCalculadora de Puntuación APCalculadora de Puntuación ACTCalculadora de Puntuación del SATConversor de Porcentaje a CGPAConversor de CGPA a PorcentajeCalificador Fácil (EZ Grader)Calculadora del Costo de Criar un HijoCalculadora de Consumo de Leche para BebésCalculadora de Talla de PañalesGenerador de Nombres de BebéPredictor del Color de Ojos del BebéCalculadora de Percentil de IMC InfantilPredictor de Altura InfantilCalculadora de Tiempo de Duplicación de hCGCalculadora de Fecha de Parto FIVCalculadora de ImplantaciónPredictor de Sexo ChinoFormateador de Fechas ISO 8601Conversor de Fecha JulianaCalculadora de SiestaCalculadora de fases lunaresCalculadora de amanecer y atardecerWorld ClockConvertidor de Fechas a Números RomanosCuenta Regresiva para la JubilaciónCalculadora de SobriedadCalculadora de Medio CumpleañosCalculadora de AniversarioCalculadora de Reparto de PropinasCalculadora de ROI de Email MarketingCalculadora de Costo por LeadCalculadora de Capital de TrabajoCalculadora de Margen de ContribuciónCalculadora FIFO / LIFOCalculadora de Stock de SeguridadCalculadora de Punto de PedidoCalculadora de Cantidad Económica de Pedido EOQCalculadora de DepreciaciónCalculadora de Precios de ArtesaníaCalculadora de Precio MayoristaCalculadora de Beneficios de ShopifyCalculadora Amazon FBACalculadora de Tarifas de eBayCalculadora de Tarifas de EtsyCalculadora de Comisiones de StripeCalculadora de Comisiones de PayPalConversor de Cuotas de ApuestasCalculadora de DiezmoCalculadora de ZakatCalculadora del Impuesto de Timbre del Reino UnidoCalculadora de Exención de HRACalculadora de GratificaciónCalculadora NPSCalculadora EPFCalculadora PPFCalculadora de RDCalculadora SWPCalculadora de Gross-UpCalculadora de Comparación de PréstamosCalculadora de Utilización de CréditoCalculadora de Escalera de CDCalculadora de Letras del Tesoro T-BillCalculadora de Bonos ICalculadora de Ahorros Universitarios 529Calculadora de HSACalculadora de Indemnización por DespidoCalculadora de Aumento de SueldoGenerador de FacturasCalculadora de ViáticosCalculadora de Reembolso de MillajeCalculadora de Aumento de AlquilerCalculadora de Alquiler ProrrateadoCalculadora de Alquiler AsequibleCalculadora de Precio Final del CocheCalculadora de Asequibilidad de CocheCalculadora de Préstamos para MotocicletasCalculadora de Préstamos para AutocaravanasCalculadora de Préstamo para BarcoCalculadora de Préstamo para TerrenoCalculadora de Préstamo de ConstrucciónCalculadora de Hipoteca de Solo InterésCalculadora de Préstamo GloboCalculadora de Puntos HipotecariosCalculadora de PMICalculadora de Pago Quincenal de HipotecaCalculadora de Hipoteca ARMCalculadora de Préstamos VACalculadora de Sueldo Neto (Pago Neto)Generador de consultas SQL con IAGenerador de RegEx con IAVisualizador de Datos con IA (Pegar CSV)Analizador de Tono de Texto con IAAnalizador de Currículum con IAConversor de Unidades con IA (Lenguaje Natural)Generador de Cartas de Disculpa con IAGenerador de Excusas Educadas con IAGenerador de Itinerarios de Viaje con IAGenerador de Listas de Lectura con IAGenerador de Planes de Entrenamiento con IAGenerador de Plan de Comidas con IAGenerador de Ideas de Regalos con IAGenerador de Recetas con IA a Partir de IngredientesCalculadora de ROI de BecasCalculadora de Costos UniversitariosCalculadora de Horas de Estudio para la Fluidez en un IdiomaGenerador de cuestionarios de vocabularioGenerador de Notas CornellCalculadora de Curva de AprendizajeProgramador de Repetición Espaciada de TarjetasCalculadora de Mezcla de Colores de PinturaCalculadora de LechadaCalculadora de Capacidad de Proceso Seis SigmaEstimador de Ganancias de YouTubeGenerador de personaje RPG aleatorio