Sobre esta ferramenta
A ferramenta SVG para Componente JSX converte marcação SVG bruta em um componente React limpo, do jeito que o SVGR faz, mas inteiramente no seu navegador sem nada enviado. Cole um ícone exportado de uma ferramenta de design e obtenha um componente que você pode importar e estilizar. Ela analisa o SVG com DOMParser e relata um erro claro se a marcação estiver malformada.
Cada atributo SVG hifenizado ou com namespace é convertido para camelCase para seu nome React — stroke-width para strokeWidth, fill-rule para fillRule, clip-path para clipPath, stop-color para stopColor, xlink:href para xlinkHref, xmlns:xlink para xmlnsXlink — enquanto atributos data-* e aria-* são deixados como estão. Strings de estilo inline viram objetos de estilo, elementos vazios como path e circle são autofechados, e props são espalhadas na raiz <svg {...props}> para que o componente permaneça configurável. Alternadores opcionais permitem substituir valores fixos de fill e stroke por currentColor (para que o ícone herde a cor do texto), remover width e height para que escale ao seu contêiner, e envolver o componente com forwardRef para expor o nó <svg> subjacente.
Escolha saída JavaScript ou TypeScript: a variante TypeScript tipa props como React.SVGProps<SVGSVGElement> e, com forwardRef ativado, usa forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>. O componente é emitido como uma arrow function exportada (export const Icon = (props) => (...)), com o nome e a indentação que você escolher, pronto para colar em um módulo de ícones.