Toolipedia Incorporar
PT
← Todas as ferramentas de texto

SVG para componente React

Transforme um SVG em um componente React com props, pronto para colar.

  • Grátis
  • Sem cadastro
  • Funciona em qualquer dispositivo

Cerca de SVG para componente React

Cole um SVG e obtenha um componente React que aceita props como width, height e color. Os atributos viram camelCase (stroke-width vira strokeWidth) e class vira className. Substitua as cores fixas por currentColor para que o ícone acompanhe a cor do texto ao redor.

Como usar: SVG para componente React

  1. Cole sua marcação SVG.
  2. Escolha opções como TypeScript e nome do componente.
  3. Copie o componente para o seu projeto React.

Por que usar esta ferramenta?

Também conhecido como

Perguntas frequentes

Como altero a cor de um ícone SVG no React?

Defina fill ou stroke como currentColor no SVG e depois altere a color do CSS no elemento pai ou passe uma prop de cor.

Quais atributos SVG mudam no React?

Nomes com traços viram camelCase, como stroke-width para strokeWidth, e class vira className. A ferramenta aplica isso para você.

Como posso tornar o tamanho do ícone ajustável?

O componente aceita props, então informe a largura e a altura, ou deixe-o usar 1em para herdar o tamanho do texto ao redor.

SVG para componente React é grátis?

Sim. SVG para componente React no Toolipedia é de uso gratuito, sem cadastro e sem marca d'água.

É seguro usar?

Sim. Tudo é calculado no seu navegador, e nada do que você digita é enviado ao nosso servidor.

Funciona no meu celular?

Sim. Funciona em qualquer navegador moderno no Android e no iPhone, além de tablets e computadores. Não é preciso instalar nada.

Preciso de uma conta?

Não. É só abrir a página e usar a ferramenta. Sem cadastro e sem e-mail.

Posso colocar SVG para componente React no meu próprio site?

Sim. Use o botão «Incorporar no seu site» abaixo da ferramenta para copiar um trecho curto de código e colá-lo na sua página. É grátis, não precisa de conta e a ferramenta continua funcionando dentro da sua página.

Ferramentas relacionadas