SVG to Vue component
Convert SVG to a Vue single-file component. Vue templates take SVG attributes exactly as written, and with a single root element every attribute the parent passes falls through to the <svg> — no spread needed.
How it works
The markup goes into the template exactly as written — Vue templates accept kebab-case SVG attributes, so nothing needs renaming — and the component exports only a name. Everything else rides on Vue's fallthrough: with a single root element, any attribute the parent passes (class, width, fill, event listeners) lands on the <svg> automatically, parent values winning. The output works in Vue 3 and Vue 2.7.
When to use it
Building an icon component set for a Vue app, or replacing v-html-injected SVG strings with real components that the compiler can check. Run the file through the Optimizer first — component bytes are bundle bytes.
Common problems
- Two instances restyle each other. Gradient and clip ids are global to the page, exactly as in the React version of this problem. Suffix ids per instance if an icon appears twice with different fills.
- The icon ignores your CSS color. Hard-coded fills beat inheritance. Convert fills to
currentColorwith the Color Replacer and style the component withcolor. - Fallthrough stopped working. It requires the single root — wrapping the svg in a div, or adding a comment as a sibling in the template, turns it off. Keep the template as emitted.
Notes
- Kebab-case attributes are valid in Vue templates, so the markup is not rewritten — what you see is what the file contained.
- Fallthrough covers class, style, width, events — everything. Add explicit props only when you want to intercept a value.
- Works in Vue 3 and Vue 2.7. For older Vue 2, move the name into the options object you already have.