Convert an SVG to a Vue component
Paste an SVG and get a single-file Vue 3 component (.vue), ready to import into your project, with attributes (class, style, size) automatically passed through to the parent.
Why convert an SVG into a Vue component instead of importing it as is?
A Vue component dedicated to an icon lets you reuse it easily throughout a project, pass it classes or styles (color, size) from any parent component, and benefit from your editor's syntax highlighting and checking just like any other Vue component.
Does Vue require converting attributes to camelCase like React?
No, unlike React/JSX, Vue templates natively accept kebab-case attributes (stroke-width, fill-rule...) as they are: no attribute conversion is needed, only a v-bind="$attrs" is added so the component can be customized when used.
Can I change the icon's color from the parent component?
If your SVG uses fill="currentColor" (as in the example), the surrounding CSS text color automatically applies to the icon: just change the parent's CSS color property to recolor the icon without touching the component.
Your SVG file stays private: the conversion to a Vue component runs entirely in your browser, with nothing sent to a server.