Acerca de esta herramienta
La herramienta SVG a componente JSX convierte marcado SVG en bruto en un componente React limpio, como lo hace SVGR, pero enteramente en tu navegador sin nada subido. Pega un icono exportado desde una herramienta de diseño y obtén un componente que puedes importar y estilizar. Analiza el SVG con DOMParser e informa de un error claro si el marcado está mal formado.
Cada atributo SVG con guion o con espacio de nombres se pasa a camelCase a su nombre React —stroke-width a strokeWidth, fill-rule a fillRule, clip-path a clipPath, stop-color a stopColor, xlink:href a xlinkHref, xmlns:xlink a xmlnsXlink— mientras que los atributos data-* y aria-* se dejan tal cual. Las cadenas de estilo en línea pasan a objetos de estilo, los elementos vacíos como path y circle se autocierran, y las props se propagan al root <svg {...props}> para que el componente siga siendo configurable. Interruptores opcionales te permiten reemplazar los valores fijos de fill y stroke con currentColor (para que el icono herede el color del texto), quitar el width y height para que escale a su contenedor, y envolver el componente con forwardRef para exponer el nodo <svg> subyacente.
Elige salida JavaScript o TypeScript: la variante TypeScript tipa las props como React.SVGProps<SVGSVGElement> y, con forwardRef activado, usa forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>. El componente se emite como una función flecha exportada (export const Icon = (props) => (...)), con tu nombre e indentación elegidos, listo para pegar en un módulo de iconos.