chevron_right

SVG para JSX

Converta marcação SVG em um componente React JSX com atributos camelCase corretos.

SVG de entrada

Nome do Componente

Deve começar com uma letra maiúscula

TypeScript

Adicionar tipos TypeScript

Saída JSX

jsx

infoExternal fonts referenced in the SVG may not render correctly in browsers. Self-contained SVGs work best.

Ferramentas semelhantes

SVG Traçado para Preenchimento

Converta elementos SVG com traçado em caminhos preenchidos para melhor compatibilidade.

SVG para PNG

Renderize um arquivo SVG como imagem PNG em qualquer tamanho no seu navegador.

Conversor de HPGL para SVG

Converta um arquivo de plotter HPGL ou HPGL-2 em um SVG editável, com cada caneta em seu próprio grupo e escala correta em milímetros.

PNG para SVG

Envolva uma imagem raster em um contenedor SVG ou converta pixel art em retangulos coloridos.

Gerador CSS Grid

Monte layouts CSS Grid responsivos com visualização ao vivo e código pronto para copiar.

Visualizador de PCB Gerber

Sobreponha um pacote de fabricação Gerber/Excellon como uma imagem realista de PCB, com camadas de cobre, máscara, serigrafia e furação que podem ser ativadas ou desativadas.

Validador de endereços IP

Valide endereços IPv4, IPv6 e notação CIDR com detalhes do tipo de endereço e da sub-rede.

apps

Mais ferramentas

Explore nossa colecao completa de ferramentas online gratuitas.

SVG to JSX Converteer

Transforma SVG markup into production-ready React components. This tool automates the conversion of SVG attributes to JSX syntax, eliminating manual refactoring and attribute renaming.

Automatic JSX Transformaations

JSX uses different attribute names than HTML SVG. The class attribute becomes className, for becomes htmlFor, and hyphenated SVG attributes like stroke-width Transforma to camelCase equivalents (strokeWidth). Manual conversion is error-prone and tedious—this tool handles everything automatically.

Style object conversion

Inline style strings in SVG (style="fill: red; stroke: blue") become JavaScript style objects ({ fill: "red", stroke: "blue" }). This maintains your original styling while following React conventions.

TypeScript support

Optionally Gera TypeScript-typed components with props interfaces. This is ideal for component libraries and teams using strict type checking. Gerad components accept SVG attributes and className props for flexibility.

Component integration

Name your component and get copy-paste ready code. The Gerad component works immediately in React and Next.js projects without additional adjustments. Use inline or export as a separate file in your components directory.

Design system workflows

Converte icon libraries to React components for consistent styling, Cria reusable SVG button and form components, build accessible icon systems with proper ARIA attributes, Gera component variations from design tool exports, and maintain TypeScript compliance in enterprise projects.