SVG to Vue Component Converter

Why a Vue SFC instead of an <img> tag?

Loading SVG icons through <img> orbackground-image is the easy path, but it gives up almost everything that makes SVG worth using inside a Vue app. You cannot bind props to fill or stroke, you cannot animate paths via Vue transitions, and you pay one HTTP request per icon. Wrapping each icon in a Single-File Component fixes those problems and keeps your icon set type-safe and tree-shakable.

svgtools generates an SFC that places the SVG markup directly inside the<template> block. There is no setup script unless you ask for one — the template is the entire component, ready to import wherever you need it.

Vue 3 Composition API or Options API?

The default output is template-only, which works in both Vue 2 and Vue 3 with no changes. For Vue 3 with the Composition API and <script setup>, drop the converted SFC straight into your project — props can be exposed by adding a single defineProps declaration, but most icons need no script at all.

For Nuxt 3 the converted components register the same way as any other Vue component. Place them under components/icons/and Nuxt's auto-import will pick them up; otherwise import them explicitly.

Step-by-step conversion

1. Drop one or more SVGs onto the dropzone.
2. Switch the export-format dropdown to Vue SFC.
3. Inspect the generated .vue file. The filename becomes the component name in PascalCase, and the SVG root preserves its original attributes (viewBox, fill, stroke) after SVGO has run.
4. Copy a single component to your clipboard, or download a ZIP of the whole icon set.

Theming icons with CSS variables

For light/dark or branded themes, set fill="currentColor"on the SVG root before conversion (you can also do this in svgtools by replacing the dominant color with currentColor in the color panel). Inside Vue, the icon will then inherit color from its parent — no extra props needed.

If you want fine-grained theming, use the SVG Color Extractor first to convert hardcoded hex values to CSS variables, then convert the result to a Vue SFC. Consumers can override --color-1, --color-2, etc. from any ancestor selector.

Performance considerations

Inline SVG components are part of your JS bundle, so a 200-icon set adds real bytes. Two strategies keep this manageable: tree-shake by importing icons individually (import IconArrow from '@/icons/IconArrow.vue'), and run the SVGO optimization in svgtools before exporting so each component is as small as it can be. For very large illustrations, prefer a static.svg file referenced from your CDN over an inline component.