Util Monster
Gratis
Pega el marcado SVG para convertirlo en JSX que puedas usar directamente en un componente de React. Convierte los atributos a camelCase (class→className), transforma la cadena style en un objeto y elimina comentarios y DOCTYPE.
La sintaxis de React (JSX) difiere ligeramente de HTML/SVG. Los atributos con guiones (stroke-width) deben convertirse a camelCase (strokeWidth), class pasa a className y style debe ser un objeto de JavaScript en lugar de una cadena. Esta herramienta convierte esas diferencias automáticamente, para que un icono SVG exportado por un diseñador pueda pegarse directamente en un componente de React.
Mapea class→className y for→htmlFor, convierte a camelCase atributos con guiones como stroke-width y fill-opacity, transforma atributos con espacios de nombres como xlink:href en xlinkHref, y deja tal cual los atributos data-/aria-. style="fill:red;stroke-linecap:round" se convierte en el objeto style={{ fill: 'red', strokeLinecap: 'round' }}, mientras que los comentarios, DOCTYPE y la declaración XML se eliminan.
En lugar de usar expresiones regulares, esta herramienta analiza realmente el SVG con el DOMParser integrado del navegador y lo vuelve a serializar, así que la estructura anidada y los atributos se gestionan correctamente. Todo se ejecuta en tu navegador y el código nunca se envía a un servidor. Después de pegar el resultado en un componente, ajústalo según necesites; por ejemplo, pasa width/height como props o cambia fill a "currentColor".