Convertir un SVG en componente Vue
Pegue un SVG y obtenga un componente Vue 3 (.vue) de archivo único, listo para importar en su proyecto, con propagación automática de los atributos (class, style, tamaño) al elemento padre.
¿Por qué convertir un SVG en componente Vue en lugar de importarlo tal cual?
Un componente Vue dedicado a un icono permite reutilizarlo fácilmente en todo el proyecto, pasarle clases o estilos (color, tamaño) desde cualquier componente padre y aprovechar el resaltado y la verificación de su editor como con cualquier otro componente Vue.
¿Necesita Vue convertir los atributos a camelCase como React?
No, a diferencia de React/JSX, las plantillas de Vue aceptan de forma nativa los atributos en kebab-case (stroke-width, fill-rule...) tal cual: por tanto, no hace falta convertir ningún atributo, y solo se añade v-bind="$attrs" para poder personalizar el componente al usarlo.
¿Puedo cambiar el color del icono desde el componente padre?
Si su SVG usa fill="currentColor" (como en el ejemplo), el color del texto CSS circundante se aplica automáticamente al icono: basta con cambiar la propiedad CSS color del elemento padre para recolorear el icono sin tocar el componente.
Su archivo SVG se mantiene privado: la conversión a componente Vue se ejecuta íntegramente en su navegador, sin enviar nada a un servidor.