SVG to Vue

Transform SVG markup into a Vue 3 Single File Component with proper attribute inheritance and TypeScript support.

Input SVG

Vue Component

All processing is done locally in your browser. No data is sent to our servers.

About the Output

The generated component uses Vue 3 Composition API with <script setup lang="ts">. The inheritAttrs: false option is set so that attributes passed to the component are forwarded exclusively to the root <svg> element via v-bind="$attrs", rather than being applied to the template root automatically.

This pattern allows callers to pass class, style, event listeners, and any other SVG attributes directly to the icon, making the component flexible and composable.

Usage Example

Vue Template

<SvgIcon
  class="w-6 h-6 text-blue-500"
  aria-label="Settings icon"
  @click="openSettings"
/>

All attributes are forwarded to the <svg> element automatically via v-bind="$attrs".