SVG → React
JSX listo para pegar a partir de cualquier archivo SVG — atributos renombrados como los quiere React, props repartidas en la raíz y TypeScript si lo necesitas.
o haz clic para buscar — solo SVG
El nombre del componente sale del nombre del archivo, así que arrow-left.svg se convierte en ArrowLeft.
El mismo componente, tipado como SVGProps<SVGSVGElement>.
Solo el marcado, para pegarlo dentro de un componente que ya tengas.
iconos como componentes
JSX parece marcado, pero es JavaScript. Los atributos con guion como stroke-width no son identificadores válidos, class choca con una palabra reservada y las llaves dentro de un style en línea se leen como expresiones. Un SVG copiado directamente de una herramienta de diseño suele fallar al compilar por al menos una de esas razones.
Este conversor renombra lo que hay que renombrar y deja el resto en paz. Los atributos data- y aria- conservan sus guiones, porque React los pasa tal cual — renombrarlos es una forma habitual de perder sin darte cuenta una etiqueta de accesibilidad.
tres pasos
Elige un archivo .svg — se queda en tu dispositivo.
El componente completo, su gemelo en TypeScript o el JSX pelado.
Impórtalo como cualquier otro componente y dale estilo con props.
respuestas rápidas
Para que gane lo que tú pases. En JSX un atributo posterior sobrescribe al anterior, así que con el spread al final puedes fijar className, width o un onClick desde fuera. Si va primero, los valores grabados en el archivo sobrescribirían los tuyos sin avisar.
Sustituye el fill o el stroke fijo de la salida por currentColor y luego define el color en CSS en cualquier elemento padre. Si el archivo tiene colores repartidos por muchos nodos, pásalo antes por el cambiador de color de SVG: puede pasarlos todos a currentColor de una vez.
No directamente. React Native no tiene DOM, así que allí el SVG necesita react-native-svg y nombres de elemento en mayúscula como Svg y Path. El renombrado de atributos que se ve aquí sigue siendo la forma correcta, pero los imports y las etiquetas son distintos.
Así viene el archivo de origen: un SVG minificado sigue minificado, porque reformatear es otro trabajo. Pásalo antes por el embellecedor de SVG y el componente saldrá con una indentación legible.
No. La conversión es puro trabajo de cadenas de texto hecho en tu navegador.