BrowserDevTools

SVG → Vue 3 component

Paste an SVG or drop a folder of icons. You get Vue 3 <script setup> components with size and title props, currentColor theming and prefixed ids. Nothing leaves your browser.

→ ClockIcon.vue

Options

Output

Showing unoptimised output — fetching the SVGO optimiser (on demand, so this page stays light)…

Source SVG
253 B
Optimised SVG
—
Component
774 B
Ids prefixed
0
<script setup lang="ts">
// ClockIcon — generated from SVG; edit freely.
defineOptions({ inheritAttrs: false });

withDefaults(
  defineProps<{
    /** Accessible label. Renders a <title> element when provided. */
    title?: string
    /** Any CSS length, e.g. "24px" / "1.5rem". */
    size?: string | number
  }>(),
  { title: '', size: '1em' },
);
</script>

<template>
  <svg
    v-bind="$attrs"
    role="img"
    :aria-hidden="title ? undefined : 'true'"
    :width="size"
    :height="size"
    viewBox="0 0 24 24"
    fill="none"
  >
    <title v-if="title">{{ title }}</title>
    <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/>
    <path d="M12 7v5l3 3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
  </svg>
</template>

Icon set pipeline

Drop many .svg files → get .vue files plus an index.ts barrel, zipped. Nothing is uploaded.

Why this converter exists

Search for “svg to react component” and the first result is the official SVGR playground; the rest of the page is third-party converters that already do client-side conversion, SVGO optimisation and batch ZIP export. Search for “svg to vue component” and you get a GitHub library, a handful of Stack Overflow answers and blog posts — but almost no tool you can just open and use. That asymmetry is the reason this page exists.

The second reason is that a naive converter hands you markup, not a component. A usable icon component needs four things that the paste-and-copy sites usually skip:

Optimisation runs through SVGO in the browser, with removeViewBox deliberately left enabled so the size prop keeps working. If something in your source cannot be converted faithfully — inline <style> blocks, SMIL animation references, script tags — the tool tells you rather than silently generating broken code.

FAQ

Does the SVG get uploaded anywhere?
No. Conversion, SVGO optimisation and ZIP packaging all run inside your browser tab. There is no backend endpoint to receive your files, and you can verify that in the Network panel.
Why generate a Vue 3 SFC instead of JSX or a React component?
Because that is the gap. Most online converters emit React/JSX or a plain SVG string; Vue 3 <script setup> components — with props passthrough, currentColor theming and id prefixing — are largely missing from the first page of results.
What does “prefix ids” solve?
SVG files that contain gradients, clip paths or masks define internal ids and reference them with url(#id). If you drop three such icons on one page, those ids collide and one icon renders the other’s gradient. Prefixing every id with the component name removes the collision.
Can I convert a whole icon folder at once?
Yes. Drop multiple .svg files and you get one .vue file per icon plus an index.ts barrel, packaged as a ZIP — no repeated copy-paste, no upload wait.
Is the generated code editable?
It is plain Vue 3 source with no runtime dependency, no wrapper component and no license key. Treat it as your own code: rename it, strip the props, or commit it to your design system.