SVG → Vue
Envuelve cualquier SVG en un componente de archivo único .vue — o quédate solo con el bloque de plantilla para un componente que ya tengas.
o haz clic para buscar — solo SVG
El nombre del componente sale del nombre del archivo. El bloque script solo le pone nombre al componente — bórralo si no lo necesitas.
Solo el marcado, para pegarlo dentro de un componente que ya tengas. Si el SVG traía un elemento style en línea, su CSS está en el bloque style del archivo de arriba, no aquí.
sin renombrar nada
Las plantillas de Vue se analizan como HTML, así que un SVG puede entrar exactamente como fue escrito. stroke-width sigue siendo stroke-width, class sigue siendo class y un atributo style en línea sigue funcionando. La conversión consiste sobre todo en envolver el archivo, y por eso la salida se parece tanto a la entrada.
El resto lo hace la propagación de atributos. Con un único elemento raíz, todo lo que pongas en el componente acaba en la etiqueta svg, así que width, class o un manejador de clic funcionan sin declarar ni una sola prop.
tres pasos
Elige un archivo .svg — se queda en tu dispositivo.
Un archivo .vue completo o solo la plantilla.
Impórtalo como cualquier otro componente y dale tamaño desde fuera.
respuestas rápidas
Porque no hace falta. Un componente de raíz única pasa cualquier atributo que le des directamente a la etiqueta svg, así que width, height, class y los escuchadores de eventos ya funcionan. Declara props solo cuando quieras calcular algo a partir de ellas.
Solo para darle nombre al componente, que aparece en las devtools de Vue y en los mensajes de advertencia. Sin él el componente se renderiza igual, así que borrarlo es totalmente seguro.
Al bloque style con scoped del final del componente. Vue descarta las etiquetas style y script que encuentra dentro de una plantilla, así que un SVG exportado desde Illustrator o Figma — que casi siempre lleva una hoja de estilos incrustada — se renderizaría sin ningún color. Sacar el CSS lo mantiene en funcionamiento, y scoped evita que se filtre al resto de tu aplicación.
Sustituye el fill o el stroke fijo por currentColor y define el color en CSS en un elemento padre. El cambiador de color de SVG puede pasar todos los colores del archivo a currentColor antes de convertirlo.
Para esta salida sí: script setup y defineOptions son funciones de Vue 3. En Vue 2 el bloque de plantilla sigue sirviendo: pégalo en el template de un componente normal con la API de opciones.
No. La conversión es puro trabajo de cadenas de texto hecho en tu navegador.