¿Por qué Vue avisa del dentro de mi SVG?

Vue elimina las etiquetas de las plantillas porque tienen efectos secundarios. Mueve el CSS al bloque del componente o conviértelo en atributos antes de convertir.

Convertir SVG a componente de Vue (SFC)

Convertir SVG en un componente de archivo único de Vue

Envuelve cualquier SVG en un componente de archivo único de Vue 3 (.vue) con un <template> limpio, <script setup lang="ts"> opcional y una prop size, listo para importar en tu aplicación.

Cómo es el resultado para Vue

Las plantillas de Vue aceptan los atributos SVG tal cual, así que el convertidor mantiene nombres en kebab-case como stroke-width y class. Elimina el ruido del editor, la declaración XML y, opcionalmente, xmlns, y coloca el marcado dentro de un bloque <template>.

Si activas la opción size, un bloque <script setup> declara una prop size con valor por defecto y la enlaza a :width y :height. Con TypeScript, la prop se declara con defineProps<{ size?: number | string }>() y withDefaults.

Herencia de atributos

Como el <svg> es el único elemento raíz, Vue reenvía automáticamente los atributos que no están declarados como props. Eso significa que class, style, aria-label y listeners como @click llegan al <svg> sin código adicional. Por eso, en Vue no hace falta la opción de propagar props.

Usar el componente

Uso habitual en un proyecto con Vue 3 o Nuxt:

Guarda el resultado como IconName.vue en tu carpeta de componentes.
Impórtalo: import IconName from "./IconName.vue".
Renderiza <IconName :size="20" class="text-emerald-600" /> en cualquier plantilla.
Con currentColor activado, el icono sigue la propiedad CSS color.

Preguntas frecuentes

¿El resultado funciona con Vue 2?

La plantilla también funciona en Vue 2.7, pero <script setup> con defineProps requiere Vue 2.7 o Vue 3. En proyectos con versiones anteriores de Vue 2, desactiva la prop size para obtener un componente solo con plantilla.

¿Puedo usarlo con Nuxt?

Sí. Coloca el archivo en el directorio components y Nuxt lo importará automáticamente por su nombre, por ejemplo <IconArrow /> para components/IconArrow.vue.

¿Por qué Vue avisa del <style> dentro de mi SVG?

Vue elimina las etiquetas <style> de las plantillas porque tienen efectos secundarios. Mueve el CSS al bloque <style scoped> del componente o conviértelo en atributos antes de convertir.

¿Es mejor opción vite-svg-loader?

Un loader resulta cómodo cuando importas muchos SVG en tiempo de compilación. Convertir a archivos .vue te da control total sobre el marcado y las props y no requiere configurar el build.