Simplifique su flujo de trabajo: Busque miniwebtool.
Añadir
Véase también
Playground de TypeScriptCalculadora de Matriz de AdyacenciaExtractor de Columnas de TextoConvertidor de Mayúsculas de TítuloCalculadora de elevación de globo de helio
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 AmorosaEliminar acentos del textoConvertidor de Pies y Pulgadas a CentímetrosConvertidor de cm a pies y pulgadasCalculadora del Signo de VenusSelector de Películas AleatorioCalendario del Día del AñoBúsqueda de ID de Usuario de InstagramConvertidor de kPa a psiSelector de Nombre AleatorioBúsqueda de ID de usuario de FacebookCalculadora de Número del Nombre📅 Calculadora de Diferencia entre FechasCalculadora de SumaCalculadora de HbA1cCalculadora de MóduloCalculadora de NumerologíaBola Mágica 8Descargador de Miniaturas de YouTubeExtractor de Imágenes de VideoCalculadora de Desviación Estándar RelativaCalculadora de Número MaestroCalculadora de Duración de TiempoSelector AleatorioGenerador de Cartas de Baraja AleatorioBúsqueda de Direcciones MACCalculadora de Posición del SolEliminar espaciosCalculadora de Promedio - Alta PrecisiónGenerador de Superpoder Aleatorioconvertidor ppm a porcentajeGenerador de Palabras DesordenadasGenerador de Código MorseCalculadora de Combinación¿Cuál es mi signo del zodiaco?🖱️ Contador de ClicsCalculadora de Cambio PorcentualDivisor de imágenes¿Cuál es mi número de la suerte?Calculadora de Edad GestacionalCalculadora de Aumento PorcentualVerificador de Nombre de Usuario en Redes SocialesGenerador de números de loteríaConvertidor de FPSGenerador Aleatorio de ListasOrdenar NúmerosCalculadora HexadecimalConvertidor de Porcentaje a PPMCalculadora de CírculosCalculadora de pendiente y gradoCalculadora de Grupo SanguíneoConvertidor de Decimal a TiempoConvertidor de psi a kPa🌐 Convertidor de Zona HorariaCalculadora de cociente y residuoDivisor de AudioConvertidor de Tiempo a DecimalEstadísticas del Canal de YouTubeCalculadora de reducción porcentualCalculadora de notación científicaCalculadora CPMConvertidor de Tamaño de ArchivoCalculadora de Número del AlmaCalculadora de Número de SemanaCalculadora de Percentil de EstaturaCalculadora de PermutaciónGenerador de Números Decimales AleatoriosPrimeros n Dígitos de PiConvertidor de CMYK a hexadecimalContador de líneasFormateador de TextoGenerador de Fechas AleatoriasGenerador de Nombres AleatoriosCalculadora de Coeficiente de VariaciónConvertidor de fracción a número mixtoCalculadora OctalCalculadora de Promedio de BateoGenerador de Hash SHA256Generador de Verdad o Reto AleatorioGenerador de direcciones MACCalculadora de Área de Polígono IrregularCalculadora del día de la semana de nacimientoCalculadora del Signo de MarteGenerador de ContraseñaCalculadora de Número de Trayecto de VidaCalculadora de Número de DestinoAñadir prefijo y sufijo al textoCalculadora de ERAValidador XMLCalculadora de Compatibilidad de Signos LunaresConversor de HTML a TextoCalculadora de Monetización de YouTube ShortsRotar VideoLista de Años BisiestosCalculadora de Prueba tConvertidor de Número a FracciónGenerador de cartones de bingoDivisor de videoConvertidor de Notación Científica a DecimalGenerador de hora aleatoriaCalculadora de número de dígitosCalculadora de Duración de BateríaGenerador de Plantilla de Cono DesarrolladoCalcular tiempo entre dos fechasGenerador de LaberintosLanzador de MonedasCalculadora de Retorno de SaturnoConvertidor de Número a PalabraCalculadora de Error PorcentualCalculadora de media aritméticaGenerador de Coordenadas AleatoriasGenerador de PIN AleatorioGenerador de sopa de letrasCalculadora de Crecimiento Exponencial de Alta PrecisiónCalculadora de edadContar el número de caracteresConvertidor Decimal a HexadecimalConversor de Calendario HebreoGenerador de Números AleatoriosCalculadora Celsius a Fahrenheit Calculadora de Tasa de Crecimiento PorcentualCalculadora de Tasa de Interés EfectivoCalculadora de media, mediana y modaConversor de Marca de Tiempo de Twitter/XCalculadora de RedondeoCalculadora de Hace Cuánto TiempoGenerador de letras aleatoriasGenerador de Texto Pequeño ⁽ᶜᵒᵖʸ ⁿ ᵖᵃˢᵗᵉ⁾Buscador de Citas (Inglés)Generador aleatorio de númerosPredictor de peso de cachorrosCalculadora de Peso de AceroConvertidor de números romanosGit Command GeneratorCalculadora de Ganancias de TwitchCalculadora del signo de mercurioGenerador de Dirección IP AleatoriaConvertidor octal a binarioDecodificador de Código MorseCalculadora de Error EstándarCalculadora de Tipo CorporalCalculadora de talla de bicicletaConvertidor de Decimal a BCDAnalizador de Direcciones MACCalculadora de FraccionesGenerador de Número de PersonalidadGenerador Aleatorio de Nombres en LíneaVerificador de Número Par o ImparExtractor de URLGenerador de Cumpleaños AleatorioGenerador de acordes aleatoriosAnalizador Avanzado de Compatibilidad ZodiacalConvertidor Número Mixto a FracciónGenerador de Piedra Papel TijeraHerramienta en línea para eliminar puntuaciónGenerador de CriptogramaCalculadora de Resistencia para LEDSimulador de Puertas LógicasCalculadora BinariaCalculadora de números de ángelesCalculadora del Método de NewtonConvertidor de decimal a notación científicaCreador de CrucigramasCalculadora de Pasos a DistanciaExtractor de AudioCalculadora de Log Base 10Eliminar saltos de líneaGenerador aleatorio de animalesHerramienta de Cifrado VigenèreConvertidor de tazas a gramosGraficador de Campo de Direcciones e InclinacionesCalculadora de ComisionesCalculadora de DrywallCalculadora de SenoCalculadora del día de la semanaCalculadora Log Base 2Convertidor Binario a Código Grisconvertidor de palabras a números de teléfonoGenerador de Texto InvisibleGenerador y Verificador de Hash BcryptCalculadora de ArcosenoCambio de Tiempo SRTGenerador de anagramasGenerador de País AleatorioCalculadora de Número de ExpresiónConvertidor de Lista de Texto a SQLGenerador de Emoji AleatorioGenerador de Unir los PuntosSolucionador de InecuacionesCalculadora de conversión de decimal a fracciónCalculadora de Fahrenheit a CelsiusCalculadora de fases lunaresCalculadora de la Prueba Exacta de FisherCalculadora de Nutrición de RecetasConvertidor de dirección IP a binarioCalculadora de Estrategia MartingaleConvertidor de PT a PXConvertidor de PX a REMConvertidor de Tola a GramosConvertidor de unidades de tierras indiasConversor de mcg a mgGenerador de letras de canciones con IAGenerador de poemas con IAGenerador de Historias con IATraductor de IAResumidor de Texto con IAConversor de mg a mlConversor de MPH a KMH / KMH a MPHConversor de Nudos a MPHMetros Cúbicos a Pies CúbicosConversor de Pies Cúbicos a Yardas CúbicasConversor de Pies Cuadrados a Metros CuadradosConversor de Metros Cuadrados a Pies CuadradosConversor de Oz a MLConversor de ML a OzConversor de Galones a LitrosConvertidor de Litros a GalonesConversor de Kg a StoneConversor de Stone a KgConvertidor de Pulgadas a MilímetrosConvertidor de Milímetros a PulgadasConversor de millas a kmConversor de km a millasConversor de Fahrenheit a CelsiusConversor de Celsius a FahrenheitCalculadora del tamaño de mochilaCalculadora de volumen de tabla de surfCalculadora de tamaño de grip de tenisCalculadora de talla de cascoCalculadora de talla de guantesConvertidor de tallas de sombreroCalculadora de tamaño de snowboardCalculadora de tamaño de esquíTemporizador de splits para speedrunCalculadora de StablefordCalculadora de checkout de dardosCalculadora de economía de bowling de críquetCalculadora de strike rate de críquetCalculadora de Net Run RateCalculadora de proporción K/DCalculadora de rating EloCalculadora de recuperación de la frecuencia cardíacaCalculadora de Tiempo de SenderismoCalculadora de ritmo de remoCalculadora de Rendimiento por Edad en CarreraCalculadora de FTP y Zonas de PotenciaCalculadora de Beep TestCalculadora de Puntuación ACFTCalculadora de Wilks y DOTSCalculadora de Offset de LlantasBuscador de Índice de Carga y Código de Velocidad de NeumáticosCalculadora de Costo por MillaCalculadora de Compra de LeasingCalculadora de Mezcla de OctanajeCalculadora de Mezcla de Aceite 2 TiemposCalculadora de Cilindrada del MotorCalculadora de Sofá en la PuertaCalculadora de Cuerdas de LeñaCalculadora de CADR de Purificador de AireCalculadora de Tamaño de DeshumidificadorCalculadora de Tamaño de Ventilador de TechoCalculadora de Tamaño de CortinasCalculadora de Tamaño de AlfombraCalculadora de Altura para Colgar CuadrosCalculadora de Altura de Montaje de TVCalculadora de Tamaño de TVCalculadora de Volumen y Lámina de EstanqueCalculadora de Sal para PiscinaCalculadora de Volumen de PiscinaCalculadora de Tamaño de Calentador de AguaCalculadora de Resina EpoxiCalculadora de Espaciado de BalaustresCalculadora de Zócalos y MoldurasCalculadora de RevestimientoCalculadora de Tinte para TerrazasCalculadora de Semillas de CéspedCalculadora de CéspedCalculadora de AsfaltoCalculadora de Yardas CúbicasCalculadora de Longitud de AntenaCalculadora de Llenado de ConductoCalculadora de Condensadores en Serie y ParaleloCalculadora de Reactancia InductivaCalculadora de Iluminación de HabitacionesCalculadora de Lux a LúmenesConversor de Lúmenes a VatiosCalculadora de Tamaño de GeneradorConversor 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 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 TrabajoEstimador de Ganancias de YouTubeGenerador de personaje RPG aleatorio