Simplifique seu fluxo de trabalho: Pesquise miniwebtool.
Adicionar
> 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// de MiniWebtool, https://MiniWebtool.com/

pela equipe miniwebtool. Atualizado: 2026-05-22

Ferramentas em destaque:

Gerador de Cartelas de BingoRemover espaçosCalculadora de Número de ExpressãoGerador de Letras AleatóriasGerador de Cores AleatóriasGerador de endereços MACCalculadora BináriaGerador de Código Morse📅 Calculadora de DatasGerador de IMEI AleatórioContador de linhasCalculadora de ProporçãoCalculadora de Número de Destinopesquisa-de-endereço-MACCalculadora de Média HarmônicaFormatador de TextoCalculadora de Compatibilidade AmorosaCalculadora de Combinação📅 Calculadora de Diferença entre DatasPesquisa de ID de Usuário do InstagramClassificar NúmerosCalculadora de 1RM (Repetição Máxima)Calculadora de número de anjoDecodificador de Código MorseGerador de Caça-PalavrasConversor de Hex para BinárioCalculadora de Dia do Ano - Que Dia do Ano é Hoje?Calculadora de Número MestreCalculadora do Teste Qui-QuadradoCalculadora de MedianaGerador de Superpoder AleatórioCalculadora de Erro PercentualGerador de Endereço Falso AleatórioRemover Linhas Vazias do TextoSelecionador de Nomes AleatóriosRemover acentos do textoCalculadora de cálcio corrigidaGerador de Palavras Aleatórias em InglêsCalculadora de Variação PercentualGerador de Cartas de Baralho AleatórioCalculadora de Desvio Padrão Relativoconversor de ppm para porcentagemCalculadora de Desvio Padrão - Alta PrecisãoCalculadora HexGerador de AnagramasCalculadora de Signo Solar, Lunar e Ascendente 🌞🌙✨Conversor de Binário para HexLista de Anos BissextosCalculadora de Dosagem de MedicamentoConversor de Tamanho de ArquivoDivisor de ÁudioGerador de Hora AleatóriaGerador de Números da LoteriaValidador de XMLConversor de endereço IP para binárioGerador de Texto Pequeno ⁽ᶜᵒᵖʸ ⁿ ᵖᵃˢᵗᵉ⁾Pesquisa de ID de Usuário do FacebookAnalisador de Endereço MACConversor Octal para DecimalGerador de Embaralhar PalavrasGerador de País AleatórioFerramenta Online para Remover PontuaçãoCalculadora de Estratégia MartingaleCalculadora de Média GeométricaGerador de Grupos AleatóriosCalculadora de EscadaGerador de Aniversário AleatórioExtrator de Imagem de VídeoCalculadora de Coeficiente de VariaçãoCalculadora de Taxa de Crescimento PercentualConversor de Binário para OctalCalculadora de NumerologiaConversor de Pés e Polegadas em CentímetrosCalculadora de Números Complexos🖱️ Contador de CliquesConversor de BaseCalculadora de raiz quadradaConversor de kPa para psiPrimeiros n Dígitos do PiDivisor de ImagensCalculadora de MóduloCalculadora de Peso de AçoConversor de cm para Pés e PolegadasGerador de Nomes Aleatórioscalculadora-hba1cExtrator de Números de TelefoneGerador de Endereço IP AleatórioConversor de Octal para BinárioAdicionar Quebras de LinhaCalculadora de Número de Desejo da AlmaGerador de CriptogramaGraficador de Função TrigonométricaSimplificador de FraçõesCalculadora de Média, Mediana e ModaConversor de Porcentagem para PPMCalculadora de IdadeLançador de MoedaGerador de LabirintosSimulador de Portas LógicasCalculadora de Retorno de SaturnoCompilador de SCSS para CSSConversor de SVG para React/JSXConstrutor de Query StringAnalisador de URLValidador e Decodificador de UUIDReferência de Códigos de Status HTTPConstrutor de Comandos cURLGerador de Triângulo de SierpinskiPlotador de Superfície 3DPlotador de Equações PolaresGerador de Conjunto de JuliaExplorador do Conjunto de MandelbrotGerador de Fractais L-SystemGerador de Triangulação de DelaunayGerador de Diagrama de VoronoiGerador de EspirógrafoGerador de TesselaçãoCalculadora de Capacidade de Processo Seis SigmaGerador de Gráfico de ParetoCalculadora de NPS (Net Promoter Score)Calculadora de Retenção de CoorteCalculadora de Taxa de RotatividadeCalculadora de Custo de Aquisição de Cliente (CAC)Calculadora de Valor Vitalício do Cliente (CLV)Calculadora de Taxa de ConversãoCalculadora de Tamanho de Amostra para Teste A/BCalculadora de Significância de Teste A/BCalculadora da Equação das LentesCalculadora de Campo Magnético de FioCalculadora de Campo ElétricoCalculadora da Lei de CoulombCalculadora da Lei de SnellCalculadora de Momento de InérciaCalculadora de Velocidade AngularCalculadora de Força CentrípetaCalculadora de Período do PênduloCalculadora de Constante de MolaCalculadora de Efeito DopplerCalculadora do Índice de SortinoCalculadora de Índice de TreynorCalculadora de Beta de AçõesCalculadora de Títulos do Tesouro Protegidos Contra Inflação (TIPS)Calculadora de Recálculo de HipotecaCalculadora de Taxa a TermoCalculadora de Duração do Título (Macaulay e Modificada)Calculadora de Convexidade de TítulosCalculadora de Anuidade Indexada FixaCalculadora de Anuidade VariávelCalculadora de Hipoteca ReversaCalculadora de Pagamento de AnuidadeSimulador de Soroban Ábaco JaponêsMultiplicação Camponesa RussaCalculadora de Truques de Matemática VédicaCalculadora de Multiplicação EgípciaCalculadora de Matemática com Números RomanosTreinador de Matemática MentalQuiz de TabuadaVisualizador de Vai um e EmprestaGerador de Decomposições NuméricasSolucionador de Problemas de MoedasCalculadora do Triângulo Distância-Velocidade-TempoResolvedor de Problemas de Taxa de TrabalhoResolvedor de Problemas de MisturaSolucionador de Problemas de IdadeSolucionador de Problema de Encontro de TrensCalculadora de HidrataçãoCalculadora de Ritmo para CaloriasCalculadora de Calorias do ÁlcoolCalculadora de Recomposição CorporalGerador de Tópicos de Debate AleatóriosGerador de Nomes Aleatórios para Gatos e CãesGerador de Versículos Bíblicos AleatóriosGerador de Problemas de Matemática AleatóriosGerador de Parágrafos AleatóriosGerador de Frases Aleatórias em InglêsCalculadora de Cascalho, Areia e SoloCalculadora de Torque de ParafusoCalculadora de Fluxo em TubosCalculadora de Carga de VigaConversor de Dólar para OuroCalculadora de Probabilidade de OpçõesCalculadora de Desdobramento de AçõesCalculadora de ESPPCalculadora de Multa por Atraso em FaturaCalculadora de Tarifa Horária para FreelancersCalculadora de Leasing vs CompraDivisor de Conta com Gorjeta AvançadoGerador de Lista de BagagemCalculadora de Jet LagCalculadora de Orçamento de ViagemCalculadora de Distância de VooCalculadora de Perda de CalorCalculadora de Custo de Geração de EletricidadeCalculadora de Uso de ÁguaCalculadora de Custo de Energia de EletrodomésticosCalculadora de Auditoria Energética ResidencialCalculadora de ROI SolarCalculadora de Painéis SolaresCalculadora de Compostagem C:NCalculadora de Fertilizante para GramadoCalculadora de Datas de GeadaCalculadora de Solo para Canteiro ElevadoCalculadora de Fertilizante NPKCalculadora de Taxa de Germinação de SementesCalculadora de Bitrate de VídeoTranspositor de Tom MusicalCalculadora de BPM por ToqueEstimador de Tamanho de Arquivo de FotoCalculadora de Megapixel para Tamanho de ImpressãoCalculadora de Fator de CorteCalculadora do Triângulo de ExposiçãoCalculadora de Capacidade de Reboque do VeículoCalculadora de Leasing de CarroCalculadora de 0–60 e Quarto de MilhaCalculadora de Tempo de Carregamento de VECalculadora de Autonomia VECalculadora de Consumo de CombustívelConversor de Tamanhos de RoupasTabela de Tamanhos de PapelConversor de Tamanho de AnelConversor de Unidade AstronômicaConversor de Eficiência de CombustívelConversor de Taxa de Transferência de DadosConversor de Torque (Nm, ft-lb, kgf-cm)Gerador de Texto TachadoVisualizador de Espaços em BrancoCalculadora de Tempo de LeituraCalculadora de Tempo de FalaContador de ParágrafosContador de FrasesContador de SílabasConversor de Texto para Binário/Hex/ASCIIGerador de Imagem Placeholder Lorem PicsumGerador de Arquivo .envGerador de Comandos GitConversor de Códigos de Cor (Todos os Formatos)Gerador e Verificador de Hash BcryptGerador JWTGerador de CSS GridCalculadora de Integração NuméricaCalculadora de Transformada ZCalculadora de Transformada Rápida de Fourier (FFT)Calculadora de Produto TensorialCalculadora de Exponencial de MatrizesCalculadora de Forma Normal de JordanCalculadora de Anéis e CorposCalculadora de Ordem em Teoria dos GruposSolucionador de Sistemas de EDOsCalculadora de EDO de BernoulliCalculadora do Método de EulerPlotter de Campo de Direção e InclinaçãoSolucionador de EDO de Segunda OrdemSolucionador de EDO de Primeira OrdemSolucionador do Problema do Casamento EstávelCalculadora de Fluxo em Rede (Fluxo Máximo)Verificador de Grafo PlanarVerificador de Caminho HamiltonianoSolucionador do Caixeiro Viajante (TSP)Solucionador de Programação LinearCalculadora de Inclusão-ExclusãoSolucionador de Relações de RecorrênciaCalculadora de Matriz de AdjacênciaCalculadora de Ordenação TopológicaCalculadora de Coloração de GrafosSolucionador de Mapa de Karnaugh (K-Map)Simplificador de Álgebra BooleanaCalculadora de Função de PartiçãoCalculadora de Raiz DigitalVerificador de Número de FibonacciCalculadora de Frações EgípciasCalculadora de Função de MöbiusVerificador da Conjectura de GoldbachVerificador de Primo de MersenneLocalizador de Primos GêmeosVerificador de Números AmigáveisVerificador de Número PerfeitoCalculadora de Exponenciação ModularCalculadora de Permutações com RepetiçãoCalculadora de Tamanho de EfeitoCalculadora de Risco RelativoCalculadora de Razão de ChancesCalculadora de Tabela de ContingênciaCalculadora do Teste Exato de FisherCalculadora de Correlação de Postos de SpearmanCalculadora de Distribuição BetaCalculadora de Distribuição de WeibullCalculadora de Distribuição ExponencialCalculadora de Distribuição GeométricaCalculadora de Distribuição Binomial NegativaCalculadora de Distribuição HipergeométricaCalculadora de Teste F e Distribuição FCalculadora do Teorema de BayesCalculadora de Polinômio CaracterísticoCalculadora de Potência de MatrizCalculadora de Decomposição de CholeskyCalculadora de Decomposição QRCalculadora de Diagonalização de MatrizCalculadora Regra de CramerCalculadora de Espaço ColunaCalculadora de Espaço NuloCalculadora de Ângulo Entre VetoresCalculadora de Vetor UnitárioCalculadora de Magnitude de VetorCalculadora de Produto VetorialCalculadora de Produto EscalarCalculadora de Multiplicação de MatrizesCalculadora de Matriz InversaCalculadora RREF (Forma Escalonada Reduzida)Calculadora do Método de NewtonCalculadora de Matriz JacobianaCalculadora de Integral de SuperfícieCalculadora de Integral de LinhaCalculadora de RotacionalCalculadora de DivergênciaCalculadora de Gradiente MultivariávelCalculadora de Otimização (Cálculo)Solucionador de Taxas RelacionadasCalculadora de Taxa de Variação InstantâneaCalculadora de Taxa Média de VariaçãoCalculadora de Soma de Séries InfinitasCalculadora de Teste de Convergência de SériesCalculadora de Séries de PotênciaCalculadora de Série de MaclaurinCalculadora da Regra de L'HôpitalCalculadora de Integral ImprópriaCalculadora da Regra de SimpsonCalculadora da Regra TrapezoidalCalculadora de Soma de RiemannGraficador de Curvas ParamétricasCalculadora de Superfície de RevoluçãoCalculadora de Volume de RevoluçãoCalculadora de Distância em Geometria CoordenadaCalculadora Fórmula de HeronCalculadora de Linha Tangente ao CírculoCalculadora de Bissetriz do ÂnguloCalculadora de Círculo Inscrito (Incírculo)Calculadora de Circunscrição (Circuncírculo)Calculadora de Distância do Grande CírculoCalculadora de Distância 3DCalculadora de TorusCalculadora de Tronco de ConeCalculadora de Área de Polígono IrregularCalculadora de Polígono RegularIdentificador de Seção CônicaCalculadora de HipérboleCalculadora de ParábolaCalculadora de Expansão do Teorema BinomialGerador do Triângulo de PascalCalculadora de Notação de Produto (Notação Pi)Calculadora de Notação Sigma (Somatório)Calculadora do Teorema da Raiz RacionalCalculadora da Regra dos Sinais de DescartesCalculadora de Linhas Paralelas e PerpendicularesCalculadora de Equação da RetaConversor de Forma Padrão para Forma ReduzidaCalculadora de Forma Ponto-InclinaçãoResolvedor de Sistema de Equações Não LinearesSolucionador de Equações RacionaisResolvedor de Equações LiteraisSolucionador de Equações TrigonométricasResolvedor de Equações ExponenciaisResolvedor de Equações LogarítmicasCalculadora de Equação QuárticaSolucionador de Equação CúbicaCalculadora de EstimativaConversor de Número para FraçãoGerador de Contagem SalteadaCalculadora de Taxa UnitáriaCalculadora de Teto e PisoCalculadora de Valor AbsolutoEncontrador de Padrões NuméricosGerador de Gráfico de Valor PosicionalCalculadora de Ordem das Operações (PEMDAS)Calculadora de Adição e Subtração LongaCalculadora de Multiplicação LongaGerador de Tabuada🎮 Conversor de Moeda de Jogo🎲 Calculadora de Probabilidade de Loot🎰 Calculadora de Pity Gacha⚔️ Calculadora de DPS🎮 Conversor de Sensibilidade de Jogos❄️ Calculadora de Dia de Neve🚚 Estimador de Custo de Mudança🔍 Verificador de Plágio📷 OCR / Imagem para Texto📈 Criador de Gráfico de Linha🥧 Criador de Gráfico de Pizza📊 Criador de Gráfico de Barras🔊 Gerador de TomBloco de Notas Online⬛ Calculadora de Proporção de Tela🌍 Calculadora de Pegada de Carbono👙 Calculadora de Tamanho de SutiãCalculadora de Tamanho de PneuCalculadora de Custo de Combustível💧 Calculadora de Ponto de Orvalho🌡️ Calculadora de Índice de Calor🌬️ Calculadora de Sensação Térmica do Vento⏰ Despertador Online⏰ Calculadora de Cartão de Ponto🕐 Conversor de Hora Militar⏱️ Calculadora de Horas⏱️ Cronômetro Online⏱️ Temporizador de Contagem Regressiva🌐 Conversor de Fuso HorárioCalculadora de CarpeteCalculadora de Muro de ContençãoCalculadora de Dimensionamento HVACCalculadora de IsolamentoCalculadora de PavimentaçãoCalculadora de VergalhãoCalculadora de MadeiraCalculadora de Metragem QuadradaCalculadora de Multiplicação CruzadaCalculadora de Resumo de Cinco NúmerosCalculadora de PercentilCalculadora de Distribuição NormalCalculadora de Valor PCalculadora de ProporçãoCalculadora de Completar o QuadradoCalculadora de ArredondamentoCalculadora de Divisão LongaContador de Caracteres Twitter/XSeletor de Comentários do YouTubeExtrator de Tags do YouTubeBaixador de Miniaturas do YouTubeEstimador de Ganhos do YouTubeGerador de Personagem RPG Aleatório