Simplifique su flujo de trabajo: Busque miniwebtool.
Añadir
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

Otras herramientas relacionadas:

Embellecedor CSSNuevo
Compresor CSS en línea
Laboratorio CSS FlexboxNuevo
Generador de CSS GridNuevo
Codificador/Decodificador de Entidades HTML
Convertidor de Imagen a Arte ASCIINuevo
Convertidor de Imagen a Base64Nuevo
Trazador de Imagen a SVGNuevo
Minificador/Embellecedor de JavaScriptNuevo
Formateador y Validador de JSONNuevo

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?📅 Calculadora de FechaCalculadora de Compatibilidad AmorosaGenerador de IMEI AleatorioConvertidor de cm a pies y pulgadasCalculadora del Signo de VenusConvertidor de Pies y Pulgadas a CentímetrosSelector de Nombre AleatorioCalendario del Día del AñoCalculadora de Número del NombreGenerador de Cartas de Baraja Aleatoriocalculadora-de-hba1cCalculadora de Promedio - Alta PrecisiónCalculadora de Sumabúsqueda-de-direcciones-MACCalculadora de NumerologíaBúsqueda de ID de Usuario de InstagramCalculadora de Duración de TiempoEliminar acentos del textoSelector de Películas AleatorioExtractor de Imágenes de VideoConvertidor de kPa a psiGenerador de Código MorseBúsqueda de ID de usuario de FacebookSelector AleatorioCalculadora de Desviación Estándar RelativaCalculadora de CombinaciónConvertidor de BaseCalculadora HexadecimalEliminar espaciosCalculadora de Aumento PorcentualConvertidor de Porcentaje a PPMconvertidor ppm a porcentaje¿Cuál es mi número de la suerte?Bola Mágica 8Calculadora de Número MaestroDescargador de Miniaturas de YouTubeGenerador Aleatorio de ListasConvertidor de Decimal a TiempoGenerador de Palabras DesordenadasCalculadora de Suma de Riemann¿Cuál es mi signo del zodiaco?Convertidor de números romanosPrimeros n Dígitos de PiContador de líneasCalculadora de MóduloConvertidor de FPSGenerador de Nombres AleatoriosCalculadora de edadCalculadora de cociente y residuoCalculadora de Número del AlmaConvertidor de fracción a número mixtoDivisor de imágenesCalculadora CPMCalculadora de Coeficiente de VariaciónCalculadora de Cambio PorcentualCalculadora del Signo de MarteGenerador de hora aleatoriaCalculadora de reducción porcentualConvertidor de Número a PalabraDivisor de AudioConvertidor de Notación Científica a DecimalConvertidor de Tiempo a DecimalCalculadora de CírculosGenerador aleatorio de animalesCalculadora OctalCreador de Diagramas de Caja y BigotesCalculadora de Promedio de BateoCalculadora de Compatibilidad de Signos LunaresSimulador de Puertas Lógicas📅 Calculadora de Diferencia entre FechasOrdenar NúmerosGenerador de Fechas AleatoriasCalculadora de Área de Polígono IrregularCalcular tiempo entre dos fechasGenerador de números de loteríaVerificador de Nombre de Usuario en Redes SocialesEstadísticas del Canal de YouTubeGenerador de anagramasCalculadora de Mínimo Común MúltiploCalculadora de Número de Trayecto de VidaCalculadora de notación científicaCalculadora del día de la semana de nacimientoGenerador de Superpoder AleatorioCalculadora de PermutaciónGenerador de letras aleatoriasGenerador de LaberintosCalculadora de media, mediana y modaCalculadora de números de ángelesGenerador de Verdad o Reto AleatorioLista de Años BisiestosConvertidor de Tamaño de ArchivoLanzador de MonedasCalculadora de Retorno de SaturnoGenerador de Unir los PuntosFormateador de TextoConversor de HTML a TextoConvertidor hexadecimal a binarioCalculadora de Error PorcentualAnalizador Avanzado de Compatibilidad ZodiacalCalculadora BinariaGenerador de cartones de bingoGenerador de Números Decimales AleatoriosGenerador de sopa de letrasCalculadora de EscaleraCalculadora de Número de DestinoCalculadora de ERACalculadora de Percentil de EstaturaConvertidor de dirección IP a binarioCalculadora de Pasos a DistanciaExtractor de URLCalculadora de media aritméticaConvertidor Decimal a HexadecimalCalculadora Log Base 2🖱️ Contador de ClicsCalculadora de pendiente y gradoCreador de CrucigramasGenerador de direcciones MACConversor de Libras a KilogramosCalculadora de Edad GestacionalGenerador de Cumpleaños AleatorioGenerador de Colores AleatoriosValidador XMLDecodificador de Código MorseCalculadora de Log Base 10Convertidor Decimal a OctalConvertidor de Metros a PiesGenerador de CriptogramaGraficador de FuncionesGenerador de Hash SHA256Calculadora de RedondeoDivisor de vídeoGraficador de funciones trigonométricasConvertidor de libras a gramosVerificador de Número Par o ImparGenerador de Plantilla de Cono DesarrolladoCalculadora de Tipo CorporalGenerador de Distribución GaussianaGenerador de Números AleatoriosCalculadora de número de dígitosGenerador de Texto Invisiblegenerador-de-texto-al-revésGenerador de Dirección IP AleatoriaGenerador de Coordenadas AleatoriasCalculadora de raíz cuadradaConvertidor de CMYK a hexadecimalCalculadora de ComisionesEliminador de Caracteres InvisiblesConvertidor Número Mixto a FracciónHerramienta en línea para eliminar puntuaciónConvertidor de dirección IP a hexadecimalCompresor de VideoCalculadora de distribución binomialSimplificador de FraccionesGenerador de PIN AleatorioSolucionador de Inecuacionesconvertidor de palabras a números de teléfonoRotar VideoConvertidor de Porcentaje a DecimalConvertidor de psi a kPa🌐 Convertidor de Zona HorariaConvertidor octal a binarioGenerador aleatorio de númerosGenerador de Tarjeta de Crédito AleatorioGenerador de Texto Pequeño ⁽ᶜᵒᵖʸ ⁿ ᵖᵃˢᵗᵉ⁾Herramienta de Cifrado CésarExtractor de AudioGenerador de Versículos Bíblicos AleatoriosCalculadora de Integral DobleConvertidor de Fracción a PorcentajeCalculadora de Dosis de MedicamentosCalculadora de Duración de BateríaCalculadora de HipérbolaCalculadora de Horas de TrabajoCalculadora de Log (Logaritmo)Convertidor de Lectura BiónicaCalculadora de ArcosenoGenerador de País AleatorioCalculadora de Camino más Corto de DijkstraConvertidor de Decimal a BCDPredictor de peso de cachorrosBalanceador de Ecuaciones QuímicasRepetición de TextoFusionar vídeosGenerador de Grupos AleatoriosCalculadora de Tronco de ConoConvertidor de Gramos a LibrasCalculadora de CosenoGenerador de cuadrado mágicoCalculadora de Coeficiente de CorrelaciónConvertidor de pulgadas a cmContador de SílabasCalculadora de Comparación de FraccionesContar el número de caracteresConversor de HEX a CMYK📷 OCR / Imagen a TextoCalculadora de Interés SimpleGenerador de Número de PersonalidadCambio de Tiempo SRTCalculadora de Ribete para ColchasCalculadora de Hilo para Punto de CruzCalculadora de Patrones de PuntoConversor de Tallas de Agujas de TejerConversor de Tamaño de GanchilloCalculadora de Heno para CaballosBuscador de Tamaño de Transportín de Viaje para MascotasCalculadora de UVB para Hábitat de ReptilesCalculadora de Tamaño de Jaula para PájarosCalculadora de Vatios del Calentador de AcuarioCalculadora de Areneros para GatosCalculadora de Alcance del Haz de FarosCalculadora de Relación de Compresión del MotorCalculadora de Desgaste de la Banda de Rodadura del NeumáticoCalculadora de Peso en la Lanza del RemolqueCalculadora de Distribución de Peso del VehículoDivisor de Gastos de ViajeCalculadora de Distancia de FrenadoCalculadora de Compensación LaboralCalculadora de distribución de bienes testamentariosBuscador de Clases de MarcasCalculadora de Tasas de Presentación de PatentesVerificador de Nexo de Impuesto sobre las VentasCalculadora de Reducción de CondenaCalculadora de PrescripciónOptimizador de Precios de AirbnbDivisor de Alquiler entre Compañeros de CuartoCalculadora de Alquiler de la Sección 8Calculadora del Método BRRRRCalculadora de Retorno de Efectivo sobre EfectivoCalculadora de Rentabilidad de AlquilerCalculadora de Intercambio 1031Visualizador de Crecimiento de PatrimonioCalculadora de Costo del AlmuerzoCalculadora de Costo de Gimnasio vs Entrenamiento en CasaCalculadora de Costo del Hábito de CaféCalculadora de Ahorro del Trabajo RemotoCalculadora de ROI de Trabajo ExtraRastreador de Costos de SuscripcionesCalculadora de Precios SaaSCalculadora de Precios de Proyectos FreelanceGuía de Maridaje de Maderas para AhumarCalculadora de Tiempo de FermentaciónCalculadora de Tiempo de MarinadoFiltro de Recetas por Restricción DietéticaBuscador de Sustitutos de EspeciasRastreador de Vida Media de la CafeínaCalculadora de Bebidas EstándarSugeridor de Maridaje de VinosConversor de Grados de EscaladaCalculadora de Relación de Marchas de BicicletaCalculadora de Resistencia de Nudos de PescaTemporizador de Posturas de YogaCalculadora de SWOLF de NataciónPredictor de Tiempo de CarreraCalculadora de Potencia de Golpe de BoxeoCalculadora de Puntos de RugbyCalculadora de Run Rate de CríquetCalculadora de xG (Goles Esperados) de FútbolMarcador de TenisCalculadora de Escala de Wells TVP/EPCalculadora de la Escala de Coma de GlasgowCalculadora de Puntuación APGARCalculadora de FFMICalculadora de Carrera de 12 Minutos de CooperCalculadora del Test de Caminata de una Milla RockportCalculadora de Masa Magra a FuerzaCalculadora de Relación Carbohidratos-InsulinaCalculadora de Factor de Sensibilidad a la InsulinaConversor de Calendario HebreoConversor de Calendario HijriConvertidor de Calendario LunarCalculadora de Edad en CulturasCalculadora de Hace Cuánto TiempoCalculadora Cuánto Falta ParaGenerador de Patrones de FechasCalculadora de Fecha IntermediaSumar Días Hábiles a una FechaCalculadora de Días HábilesAnalizador de Frecuencia de PalabrasAnalizador de Variación de Longitud de OracionesEditor de Legibilidad Estilo HemingwayConvertidor de Pronunciación IPAHerramienta de Cifrado VigenèreHerramienta de Cifrado AtbashCodificador y Decodificador ROT13Visor y Eliminador de Datos EXIFTraductor de Pig LatinGenerador de BackronymsGenerador de AcrónimosVerificador de PangramasVerificador de LipogramaTrazador de Imagen a SVGConvertidor de Imagen a Arte ASCIIGenerador de Esquemas JSONPlayground de TypeScriptCompilador de Less a CSSCompilador de SCSS a CSSConversor de SVG a React/JSXConstructor de Cadenas de ConsultaAnalizador de URLValidador y Decodificador de UUIDReferencia de Códigos de Estado HTTPGenerador de Comandos cURLGenerador de Triángulo de SierpinskiTrazador de Superficies 3DTrazador de Ecuaciones PolaresGenerador de Conjunto de JuliaExplorador del Conjunto de MandelbrotGenerador de Fractales L-SystemGenerador de Triangulación de DelaunayGenerador de Diagramas de VoronoiGenerador de espirografoGenerador de TeseladosCalculadora de Capacidad de Proceso Seis SigmaGenerador de Diagramas de ParetoCalculadora de NPS (Net Promoter Score)Calculadora de Retención por CohortesCalculadora de Tasa de AbandonoCalculadora de Coste de Adquisición de Cliente (CAC)Calculadora de Valor del Tiempo de Vida del Cliente CLVCalculadora de Tasa de ConversiónCalculadora de Tamaño de Muestra para Test A/BCalculadora de Significancia de Pruebas A/BCalculadora de la Ecuación de las LentesCalculadora de Campo Magnético de un CableCalculadora de Campo EléctricoCalculadora de la Ley de CoulombCalculadora de la Ley de SnellCalculadora de Momento de InerciaCalculadora de Velocidad AngularCalculadora de Fuerza CentrípetaCalculadora del Periodo del PénduloCalculadora de Constante de ResorteCalculadora de Efecto DopplerCalculadora de Ratio de SortinoCalculadora de Ratio de TreynorCalculadora de Beta de AccionesCalculadora de Bonos del Tesoro Protegidos contra la Inflación (TIPS)Calculadora de Recálculo de HipotecaCalculadora de Tasa ForwardCalculadora de Duración del Bono (Macaulay y Modificada)Calculadora de Convexidad de BonosCalculadora de Anualidad Indexada FijaCalculadora de Anualidad VariableCalculadora de Hipoteca InversaCalculadora de Pagos de AnualidadSimulador de Soroban Ábaco JaponésMultiplicación Campesina RusaCalculadora de Trucos de Matemática VédicaCalculadora de Multiplicación EgipciaCalculadora de Matemáticas con Números RomanosEntrenador de Cálculo MentalExamen de Tablas de MultiplicarVisualizador de Llevadas y PrestadasGenerador de Descomposiciones NuméricasSolucionador de Problemas de MonedasCalculadora del Triángulo de Distancia, Velocidad y TiempoResolutor de Problemas de Tasa de TrabajoResolutor de Problemas de MezclasSolucionador de Problemas de EdadSolucionador de Problemas de Encuentro de TrenesCalculadora de HidrataciónCalculadora de Ritmo a CaloríasCalculadora de Calorías del AlcoholCalculadora de Recomposición CorporalGenerador de Temas de Debate AleatoriosGenerador de Nombres Aleatorios para Gatos y PerrosGenerador Aleatorio de Problemas de MatemáticasGenerador de Párrafos AleatoriosGenerador de Oraciones Aleatorias en InglésCalculadora de Grava, Arena y Tierra VegetalCalculadora de Peso de AceroCalculadora de Par de Apriete de PernosCalculadora de Flujo en TuberíasCalculadora de Carga de VigasConvertidor de Dólares a OroCalculadora de Probabilidad de OpcionesCalculadora de División de AccionesCalculadora de ESPPCalculadora de Recargo por Mora en FacturaCalculadora de Tarifa por Hora para FreelancersCalculadora de Leasing vs CompraDivisor de Propinas AvanzadoGenerador de Lista de EquipajeCalculadora de Jet LagCalculadora de Presupuesto de ViajeCalculadora de Distancia de VueloCalculadora de Pérdida de CalorCalculadora de Costo de Generación de ElectricidadCalculadora de Consumo de AguaCalculadora de Costo de Energía de ElectrodomésticosCalculadora de Auditoría Energética del HogarCalculadora de ROI SolarCalculadora de Paneles SolaresCalculadora de Compost (Relación C:N)Calculadora de Fertilizante para CéspedCalculadora de Fechas de HeladasCalculadora de Tierra para Bancal ElevadoCalculadora de Fertilizante NPKCalculadora de Tasa de Germinación de SemillasCalculadora de Bitrate de VideoTranspositor de Tonalidad MusicalCalculador de BPM por ToquesEstimador de tamaño de archivo de fotoCalculadora de Megapíxeles a Tamaño de ImpresiónCalculadora de Factor de RecorteCalculadora del Triángulo de ExposiciónCalculadora de Capacidad de Remolque del VehículoCalculadora de Arrendamiento de AutoCalculadora de 0–60 y Cuarto de MillaCalculadora de Tiempo de Carga de VECalculadora de Autonomía de VECalculadora de Distancia 3DCalculadora de ToroCalculadora de Polígono RegularIdentificador de Sección CónicaCalculadora de División LargaContador de Caracteres Twitter/XSelector de Comentarios de YouTubeExtractor de Etiquetas de YouTubeEstimador de Ganancias de YouTubeGenerador de personaje RPG aleatorio