SVG para React
Converter SVG em React, JSX ou TSX
Transforme arquivos SVG em marcação JSX, um componente React pronto para importar em TypeScript ou JavaScript ou um módulo que exporta SVG como uma string. O conversor corrige atributos JSX, converte estilos embutidos, preserva o viewBox e suporta downloads em lote.
A editar predefinições para novos ficheiros
Pré-visualização
Sem pré-visualização. Adicione e selecione arquivos para ver os resultados.
Ainda não há arquivos. Solte arquivos acima ou clique em SELECIONAR ARQUIVOS.
O que é SVG?
SVG (Scalable Vector Graphics) é um formato de imagem vetorial baseado em XML. Em vez de pixels, um SVG descreve matematicamente formas, caminhos, preenchimentos e contornos, podendo ser renderizado em qualquer tamanho sem perda de qualidade.
SVG é o formato vetorial padrão da web. Todos os navegadores modernos oferecem suporte nativo; ele pode ser estilizado com CSS ou animado com JavaScript ou SMIL. Costuma ser compacto para logotipos, ícones e ilustrações, embora arquivos SVG complexos possam ficar grandes.
Quando converter SVG para React
Os bundlers não concordam sobre o que a importação de um arquivo .svg devolve: marcação embutida, uma URL, ou nada sem o loader certo. Um componente versionado junto com o resto do seu código contorna isso. O ícone vira JSX comum, que passa pela checagem de tipos, some no tree-shaking quando não é usado e aceita props como qualquer outro componente. A conversão também cuida do que o JSX exige e o SVG cru não traz: stroke-width vira strokeWidth, class vira className, xlink:href vira xlinkHref, e uma string de estilo inline vira um objeto. Ative Usar currentColor e todo fill e todo stroke herdam a propriedade color do CSS, então um único componente serve para todas as cores em que você o usa.
Como converter um SVG para React online
- 1
Solte seus arquivos SVG, ou clique em SELECIONAR ARQUIVOS, para adicioná-los à fila. Até 40 por vez.
- 2
Escolha JSX, React Component ou String SVG, depois defina o nome do componente, a linguagem e se quer usar currentColor. O código gerado se atualiza conforme você muda as opções.
- 3
Copie o código da pré-visualização, ou clique em SALVAR TUDO para baixar um arquivo por SVG, num único ZIP quando a fila tiver mais de um.
Privacidade: seus arquivos não saem do navegador
A conversão é executada localmente em seu navegador usando JavaScript e WebAssembly. Não há upload de arquivos ou conversão no servidor, portanto, os arquivos adicionados permanecem no seu dispositivo.
O processamento local ajuda a proteger logotipos confidenciais, documentos internos e obras de arte não divulgadas de clientes. As páginas e o código de conversão são armazenados em cache à medida que você os utiliza, para que as ferramentas que você já abriu possam continuar funcionando sem uma conexão de rede.
Perguntas frequentes
Qual é a diferença entre as três saídas?
JSX devolve só a marcação svg, para colar dentro de um componente que você já tem. React Component devolve um módulo completo, com os imports e o export, pronto para salvar como HomeIcon.tsx ou HomeIcon.jsx. String SVG (TypeScript) é um módulo .ts que exporta a marcação como uma string simples, para injetar em HTML, em templates de e-mail ou em qualquer coisa que não seja React.
O componente aceita props como className e onClick?
Sim, enquanto Espalhar props estiver ativado. O componente recebe React.SVGProps<SVGSVGElement> e espalha tudo no elemento svg raiz, depois dos atributos vindos do arquivo, então className, style, onClick, width e aria-label valem e sobrescrevem o que o arquivo dizia. Ative também o forwardRef e uma ref chega ao próprio elemento svg.
O que Usar currentColor muda?
Todo fill e todo stroke que nomeia uma cor é trocado por currentColor, então o desenho é pintado com o valor que a propriedade color do CSS resolver, e passar color="red" para o componente funciona. fill="none" fica como está e continua significando "não pintar". Vem desativado, porque uma ilustração multicolorida é achatada em uma cor só quando você ativa a opção.