Conversor de SVG para React JSX / TSX

Fazendo o ícone se comportar como texto

Um componente de ícone é mais fácil de reutilizar quando obtém sua cor e seu tamanho do local onde é inserido. Substitua cores fill ou stroke fixas por currentColor para que o ícone acompanhe a cor do texto ao redor, e remova width e height, mantendo viewBox, para que o CSS ou uma className defina o tamanho. Executar o arquivo primeiro pelo limpador de SVG remove metadados do editor que, de outra forma, acabariam no seu bundle.

IDs, estilos e acessibilidade

Gradientes, máscaras e clip paths são referenciados por id. Renderize o mesmo componente duas vezes e a página terá IDs duplicados; assim, a segunda cópia pode apontar para o gradiente da primeira. Gere IDs exclusivos com o useId do React quando um ícone usar esses recursos.

Um elemento <style> dentro do SVG quebra o JSX, porque suas chaves são interpretadas como expressões; mova essas regras para atributos ou uma folha de estilos. Para um ícone decorativo, adicione aria-hidden="true"; para um ícone que transmite significado, adicione role="img" e um <title>.

Como usar

1. Cole a marcação SVG bruta.
2. Configure o nome do componente, as interfaces TypeScript e o repasse de props.
3. Copie o código do componente React pronto para uso.

Privacidade e limitações

A transformação da marcação é executada puramente no JavaScript do lado do cliente.