SVG → React
JSX pronto para colar a partir de qualquer arquivo SVG — atributos renomeados do jeito que o React espera, props espalhadas na raiz e TypeScript se você precisar.
ou clique para procurar — somente SVG
O nome do componente vem do nome do arquivo, então arrow-left.svg vira ArrowLeft.
O mesmo componente, tipado como SVGProps<SVGSVGElement>.
Só a marcação, para colar dentro de um componente que você já tem.
ícones como componentes
JSX parece marcação, mas é JavaScript. Atributos com hífen, como stroke-width, não são identificadores válidos, class colide com uma palavra reservada e as chaves dentro de um style inline são lidas como expressão. Um SVG copiado direto da ferramenta de design costuma falhar na compilação por pelo menos um desses motivos.
Este conversor renomeia o que precisa ser renomeado e deixa o resto em paz. Atributos data- e aria- mantêm os hífens, porque o React os repassa intactos — renomeá-los é uma forma comum de perder um rótulo de acessibilidade sem perceber.
três passos
Escolha um arquivo .svg — ele fica no seu dispositivo.
O componente completo, o gêmeo em TypeScript ou o JSX puro.
Importe como qualquer outro componente e estilize com props.
respostas rápidas
Para que o que você passa vença. No JSX um atributo posterior sobrescreve o anterior, então com o spread por último você consegue definir className, width ou um onClick de fora. Se ele vier primeiro, os valores gravados no arquivo sobrescrevem os seus silenciosamente.
Substitua o fill ou o stroke fixo da saída por currentColor e defina a cor no CSS em qualquer elemento pai. Se o arquivo tem cores espalhadas por muitos nós, passe-o antes pelo alterador de cor de SVG — ele troca todas por currentColor de uma vez.
Não diretamente. O React Native não tem DOM, então SVG lá precisa de react-native-svg e nomes de elemento com inicial maiúscula, como Svg e Path. A renomeação de atributos mostrada aqui continua sendo a forma certa, mas os imports e as tags são diferentes.
É o arquivo de origem — SVG minificado continua minificado, porque reformatar é outro trabalho. Passe-o antes pelo embelezador de SVG e o componente sai com indentação legível.
Não. A conversão é puro trabalho de texto feito no seu navegador.