Simplifique seu fluxo de trabalho: Pesquise miniwebtool.
Adicionar
Veja também
Playground TypeScriptCalculadora de Matriz de AdjacênciaExtrator de Coluna de TextoConversor de Caixa de TítuloCalculadora de Elevação de Balão de Hélio
Página Inicial > Ferramentas de webmaster > Conversor de SVG para React/JSX
 

Conversor de SVG para React/JSX

Converta arquivos SVG colados ou enviados em componentes React JSX limpos com atributos em camelCase, propriedades TypeScript opcionais, forwardRef, React.memo, acessibilidade de título, conversão de objeto de estilo e saída higienizada.

Conversor de SVG para React/JSX
Exemplos
Pronto
Cole um elemento <svg> completo. O servidor aceita até 220000 caracteres.
O upload de um arquivo preenche o editor para visualização prévia; em seguida, o arquivo enviado é usado quando você converte.
Entrada <svg>
Normalizar camelCase
React {...props}
Saída Componente
Elementos 0
Atributos 0
ViewBox -
Use PascalCase, por exemplo AlertIcon, BrandMark ou LogoGlyph.
Configurações de saída

Embed Conversor de SVG para React/JSX Widget

Conversor de SVG para React/JSX

O Conversor de SVG para React JSX transforma arquivos SVG brutos em componentes React reutilizáveis. Ele foi criado para desenvolvedores que precisam de componentes de ícones mais limpos, marcas de empresas, ilustrações de produtos e recursos de sistemas de design sem precisar corrigir manualmente cada atributo SVG. Cole a marcação SVG ou faça o upload de um arquivo .svg em UTF-8, escolha as opções de React que você precisa e, em seguida, copie o componente gerado para o seu projeto.

Como Usar

  1. Colar ou fazer upload do SVG. Cole um arquivo SVG completo no editor ou faça o upload de um arquivo .svg em UTF-8.
  2. Nomear o componente. Insira um nome de componente React em PascalCase, como AlertIcon ou BrandMark.
  3. Escolher as opções do React. Selecione as opções de TypeScript, forwardRef, React.memo, acessibilidade de título, conversão de estilo, sanitização e propagação de props.
  4. Converter para JSX. Clique em Converter para Componente React para gerar o código JSX pronto para cópia.
  5. Revisar e copiar. Revise o resumo da conversão, os avisos e o código gerado antes de copiá-lo para o seu projeto React.

O que o Conversor Trata

Limpeza de atributos do ReactAtributos comuns do SVG, como stroke-width, fill-rule e clip-path, são reescritos como strokeWidth, fillRule e clipPath.
Ergonomia de componentesAs opções de {...props}, forwardRef, React.memo, exportação padrão, exportação nomeada e props do TypeScript tornam a saída mais fácil de ser inserida em uma base de código React.
Revisão de saída mais seguraA sanitização remove tags de script, manipuladores de eventos inline e links javascript: por padrão, tornando o JSX gerado mais seguro de inspecionar antes do uso.

Dicas para Melhores Componentes SVG no React

Mantenha o viewBox original sempre que possível, pois ele controla como o SVG é dimensionado. Para sistemas de ícones, width="1em" e height="1em" permitem que o ícone herde o tamanho do texto, ao mesmo tempo que permitem que os chamadores substituam as dimensões por meio de props. Use um nome de componente descritivo em PascalCase, mantenha os SVGs decorativos acessíveis com aria-hidden quando apropriado e use a prop title para ícones significativos que comunicam informações.

FAQ

O que este conversor de SVG para React altera?

Ele analisa o XML do SVG e reescreve os atributos do SVG em JSX amigável para o React, incluindo className, atributos SVG em camelCase, objetos de estilo opcionais, props, forwardRef, acessibilidade de título e sintaxe de exportação.

Posso fazer upload de um arquivo SVG?

Sim. Você pode fazer upload de um arquivo .svg em UTF-8 ou colar a marcação SVG. Os arquivos enviados são lidos como texto e convertidos em JSX no servidor.

Ele sanitiza o código SVG?

A sanitização está ativada por padrão. O conversor remove tags de script, manipuladores de eventos inline e links javascript: para que o componente gerado seja mais seguro de revisar antes do uso.

Por que converter atributos de estilo em objetos?

O React espera que a prop style seja um objeto ao escrever JSX. A conversão de strings de estilo em objetos faz com que a saída seja compilada de forma limpa e mantém os nomes das propriedades CSS em camelCase.

Qual é o melhor formato de nome de componente?

Use PascalCase, como AlertIcon ou BrandMark. O conversor limpa caracteres inválidos e garante que o resultado comece com um identificador de componente React válido.

Cite este conteúdo, página ou ferramenta como:

"Conversor de SVG para React/JSX" em https://MiniWebtool.com/br/conversor-de-svg-para-react-jsx/ de MiniWebtool, https://MiniWebtool.com/

pela equipe miniwebtool. Atualizado: 2026-05-22

Ferramentas de webmaster:

Ferramentas em destaque:

Pesquisa de ID de Usuário do InstagramRemover espaçosGerador de Cartelas de BingoGerador de Letras AleatóriasGerador de Cartão de Crédito AleatórioGerador de Código MorseCalculadora de Número de Destino📅 Calculadora de DatasGerador de Superpoder AleatórioCalculadora de Signo Solar, Lunar e Ascendente 🌞🌙✨Gerador de Cores AleatóriasGerador de endereços MACGerador de Números da LoteriaContador de linhasGerador de IMEI AleatórioCalculadora de ProporçãoCalculadora BináriaGerador de Caça-PalavrasPesquisa de Endereço MACCalculadora de Compatibilidade AmorosaGerador de Cartas de Baralho AleatórioFormatador de TextoCalculadora de número de anjoClassificar NúmerosPesquisa de Citações (Inglês)Calculadora de Dia do Ano - Que Dia do Ano é Hoje?Calculadora de Número de ExpressãoCalculadora de CombinaçãoPesquisa de ID de Usuário do FacebookCalculadora de MedianaRemover Linhas Vazias do TextoCalculadora de 1RM (Repetição Máxima)Gerador de Palavras Aleatórias em InglêsConversor de Binário para HexRemover acentos do textoGerador de Endereço IP Aleatório🖱️ Contador de CliquesCalculadora de Taxa de Crescimento PercentualDivisor de ÁudioCalculadora de Variação PercentualGerador de Aniversário AleatórioConversor de Hex para BinárioCalculadora de Desvio Padrão RelativoRandomizador de ListasCalculadora de Monetização do YouTube ShortsEstatísticas do Canal do YouTubeLista de Anos BissextosGerador de Hora AleatóriaCalculadora de Número MestreConversor de kPa para psiConversor de Tamanho de ArquivoFerramenta Online para Remover PontuaçãoGerador de Texto Pequeno ⁽ᶜᵒᵖʸ ⁿ ᵖᵃˢᵗᵉ⁾Calculadora de cálcio corrigidaGerador de Pedra Papel TesouraCalculadora de HbA1cGerador de Grupos AleatóriosCalculadora de Números ComplexosExtrator de Imagem de VídeoCalculadora de Celsius para Fahrenheit Calculadora de Número do Caminho da VidaCalculadora de Média, Mediana e ModaDecodificador de Código MorseConversor de Binário para OctalGerador de AnagramasCalculadora de Desvio Padrão - Alta PrecisãoGerador de Comandos GitGerador de Embaralhar PalavrasGerador de Coordenadas AleatóriasCalculadora de Estratégia MartingaleCalculadora de Coeficiente de VariaçãoCalculadora de EscadaSelecionador de Filmes AleatórioCalculadora de Erro PercentualGerador de Hash SHA256Calculadora de Ritmo de Corridaconversor de ppm para porcentagemGerador de Endereço Falso AleatórioGirar VídeoConversor de Octal para BinárioGerador de Personagem RPG AleatórioCalculadora de MultiplicaçãoCalculadora de Número de Desejo da AlmaExtrator de Tags do YouTubeRemover Números de Linha do TextoGerador de País AleatórioRandomizador de Nomes OnlineBaixador de Miniaturas do YouTubeCalculadora de Log (Logaritmo)Mesclar VídeosGerador de Sequência AleatóriaReverter VídeoRemovedor de Caracteres Invisíveis⬛ Calculadora de Proporção de TelaCalculadora de Número de Personalidade🔊 Gerador de TomRandomizador de Linhas de Texto de EntradaCalculadora de Custo de ImpressãoCalculadora de Fahrenheit para CelsiusCalculadora de redução de porcentagemCalculadora de Ingestão de ProteínaConversor Octal para DecimalCalculadora de Divisão LongaCalculadora de Dosagem de MedicamentoDivisor de ImagensCalculadora de alavancagem criptoCalculadora de Tempo de LeituraCalculadora de ÁreaConversor de Códigos de Cor (Todos os Formatos)Calculadora de Número de DígitosQual é o meu signo do zodíaco?Validador de XMLBola Mágica 8Calculadora de NumerologiaConversor de FPSAdicionar Quebras de LinhaQual é o meu Número da Sorte?Calculadora de Média GeométricaCalculadora de bônusCalculadora de Tamanho de Impressão e Resolução (DPI/PPI)Conversor de Fração para PercentualConversor de Número para PalavraConversor Decimal para OctalQual é o meu Signo Chinês?⏰ Calculadora de Cartão de PontoCalculadora de CoberturaCalculadora de Posição do Sol👙 Calculadora de Tamanho de SutiãCalculadora do Teste Qui-QuadradoCalculadora de LinhaContador de SílabasConversor de números romanosConversor de Porcentagem para PPMGerador de LabirintosCalculadora de Aumento de PorcentagemCalculadora de Ritmo de Natação🎮 Conversor de Sensibilidade de JogosGerador de CriptogramaGerador de Nomes AleatóriosGerador de Quadrado MágicoGerador de Texto TachadoCalculadora de Resistores em ParaleloCalculadora HexCalculadora de reduzir fraçõesconversor de palavra para número de telefoneQuebra de Linha por Contagem de CaracteresSimulador de Soroban Ábaco JaponêsVerificador de Número Par ou ÍmparCalculadora de Declive e GrauCalculadora de IdadeCalculadora de Número da SemanaCalculadora de raiz quadradaConversor de Pés e Polegadas em CentímetrosCalculadora de Octal para HexadecimalExtrator de Números de TelefoneGerador de Chaves de Torneio AleatórioGerador de Frases Aleatórias em InglêsGerador de Texto Zalgo📅 Calculadora de Diferença entre DatasCalculadora de Percentil de Crescimento do BebêGraficador de Função TrigonométricaPrimeiros n Dígitos do PiCalculadora de Déficit CalóricoCalculadora de Intervalo InterquartilCalculadora de Overdose de CafeínaExtrator de URLExtrator de ÁudioGerador de Acordes AleatóriosGerador de Data AleatóriaVerificador de Nome de Usuário de Mídia SocialConversor de cm para Pés e PolegadasGerador de Verdade ou Desafio AleatórioVerificador de Contraste de CoresAnalisador de Currículo com IACalculadora de ChurrascoCalculadora de dia da semana de nascimentoConversor de Decimal para HexRandomizador de NúmerosAdicionar Números de Linha ao TextoCalculadora de ComissãoCalculadora de Ganhos do Twitch⏱️ Calculadora de HorasCalculadora de Log Base 10Calculadora de Taxa de Compressão do MotorGerador de Arte ASCIIGerador de Desculpas AleatóriasSelecionador AleatórioCalculadora de FraçõesCalculadora de MolaridadeCalculadora de Média HarmônicaCalculadora de Retorno de SaturnoConversor de endereço IP para binárioConversor de Notação Científica para DecimalConversor de Radiano para GrauDecodificador de URLGerador de Tabela VerdadeGerador de Texto EstilizadoQuiz de TabuadaCalculadora de Percentil de AlturaCalculadora de quociente e restanteConversor de PT para PXConversor de PX para REMConversor de Tola para GramasConversor de Unidades de Terra IndianasConversor de mcg para mgGerador de Letras de Música com IAGerador de Poemas com IAGerador de Histórias com IATradutor de IAResumidor de texto com IAConversor de mg para mLConversor de MPH para KMH / KMH para MPHConversor de Nós para MPHConversor de Metros Cúbicos para Pés CúbicosConversor de Pés Cúbicos para Jardas CúbicasConversor de Pés Quadrados para Metros QuadradosConversor de Metros Quadrados para Pés QuadradosConversor de Oz para MLConversor de ML para OzConversor de Galões para LitrosConversor de Litros para GalõesConversor de Kg para StoneConversor de Stone para KgConversor de Polegadas para MilímetrosConversor de Milímetros para PolegadasConversor de Milhas para KmConversor de Km para MilhasConversor de Fahrenheit para CelsiusConversor de Celsius para FahrenheitCalculadora de Tamanho de MochilaCalculadora de Volume de Prancha de SurfeCalculadora de Tamanho da Empunhadura de TênisCalculadora de Tamanho de CapaceteCalculadora de Tamanho de LuvasConversor de Tamanhos de ChapéusCalculadora de Tamanho de SnowboardCalculadora de Tamanho de EsquiCalculadora de Tamanho de BicicletaCronômetro de Splits para SpeedrunCalculadora de StablefordCalculadora de Checkout de DardosCalculadora de Economia de Bowling no CríqueteCalculadora de Strike Rate no CríqueteCalculadora de Net Run RateCalculadora de Ratio K/DCalculadora de Rating EloCalculadora de Recuperação da Frequência CardíacaCalculadora de Tempo de CaminhadaCalculadora de Ritmo de RemoCalculadora de Corrida Ajustada por IdadeCalculadora de FTP e Zonas de PotênciaCalculadora de Beep TestCalculadora de Pontuação do ACFTCalculadora Wilks & DOTSCalculadora de Offset de RodaConsulta de Índice de Carga e Classificação de Velocidade do PneuCalculadora de Custo por MilhaCalculadora de Compra de LeasingCalculadora de Mistura de OctanagemCalculadora de Mistura de Óleo 2 TemposCalculadora de Cilindrada do MotorCalculadora de Sofá na PortaCalculadora de Cordas de LenhaCalculadora de CADR de Purificador de ArCalculadora de Tamanho de DesumidificadorCalculadora de Tamanho de Ventilador de TetoCalculadora de Tamanho de CortinaCalculadora de Tamanho de TapeteCalculadora de Altura para Pendurar QuadrosCalculadora de Altura de Instalação de TVCalculadora de Tamanho de TVCalculadora de Volume e Lona de LagoCalculadora de Sal para PiscinaCalculadora de Volume de PiscinaCalculadora de Tamanho de Aquecedor de ÁguaCalculadora de Resina EpóxiCalculadora de Espaçamento de BalaústresCalculadora de Rodapé e AcabamentoCalculadora de RevestimentoCalculadora de Verniz para DeckCalculadora de Sementes de GramaCalculadora de GramaCalculadora de AsfaltoCalculadora de Jardas CúbicasCalculadora de Comprimento de AntenaCalculadora de Preenchimento de ConduíteCalculadora de Capacitores em Série e ParaleloCalculadora de Reatância IndutivaCalculadora de Iluminação de AmbientesCalculadora de Lux para LumensConversor de Lumens para WattsCalculadora de Tamanho de GeradorConversor de mAh para WhCalculadora de Potência TrifásicaCalculadora de kVACalculadora de Amperes para WattsCalculadora de Watts para AmpèresCalculadora de Resistores em SérieCalculadora de AtritoCalculadora de Plano InclinadoCalculadora de Vantagem MecânicaCalculadora de Velocidade do SomCalculadora de Velocidade da OndaCalculadora de EmpuxoCalculadora de Velocidade TerminalCalculadora de Comprimento de Onda de de BroglieCalculadora de Energia do FótonCalculadora E=mc²Calculadora de Dilatação do TempoCalculadora da Terceira Lei de KeplerCalculadora de Velocidade de EscapeCalculadora de Força GravitacionalCalculadora da Lei de Beer-LambertCalculadora da Equação de NernstCalculadora de Pressão OsmóticaCalculadora de Elevação do Ponto de EbuliçãoCalculadora de Depressão do Ponto de CongelamentoCalculadora de Composição PercentualCalculadora de NormalidadeCalculadora de MolalidadeConversor de pKa para KaCalculadora de Henderson-HasselbalchCalculadora de Rendimento TeóricoCalculadora de Reagente LimitanteCalculadora de Configuração EletrônicaTabela Periódica InterativaGerador de Plano de Aula com IAGerador de Quiz com IAGerador de Citações (APA/MLA/Chicago)Calculadora de Porcentagem de PresençaCalculadora de Pontuação APCalculadora de Pontuação ACTCalculadora de Pontuação do SATConversor de Porcentagem para CGPAConversor de CGPA para PorcentagemCorretor de Provas Fácil (EZ Grader)Calculadora do Custo de Criar um FilhoCalculadora de Consumo de Leite do BebêCalculadora de Tamanho de FraldasGerador de Nomes de BebêPreditor de Cor dos Olhos do BebêCalculadora de Percentil de IMC InfantilPreditor de Altura InfantilCalculadora de Tempo de Duplicação do hCGCalculadora de Data de Parto FIVCalculadora de ImplantaçãoPreditor Chinês de Sexo do BebêFormatador de Data ISO 8601Conversor de Data JulianaCalculadora de CochiloMoon Phase CalculatorCalculadora de Nascer e Pôr do SolRelógio MundialConversor de Data para Números RomanosContagem Regressiva para AposentadoriaCalculadora de SobriedadeCalculadora de Meio AniversárioCalculadora de AniversárioCalculadora de Divisão de GorjetasCalculadora de ROI de Email MarketingCalculadora de Custo por LeadCalculadora de Capital de GiroEstimador de Ganhos do YouTube