Vue TypeScript Icons — Export Typed Components

Export icons as typed Vue components with a single click in IconVectors, then drop them into your app with attribute fallthrough, accessible labels, and currentColor theming. This guide shows export steps and production patterns.

When to choose Vue TypeScript

• You want typed SFCs that accept common SVG attributes via attribute fallthrough (class, style, width, height, ARIA, etc.).
• You prefer one-file-per-icon for easy reuse and tree‑shaking in Vite/Webpack.
• You need themable icons via CSS (currentColor) and predictable scaling with a consistent viewBox.

Draw, Import or Trace your icon

• Start by drawing directly in IconVectors. Use the shape, pen, and path tools to build icons on a pixel-perfect grid (16/20/24/32 px). Align strokes to whole pixels for maximum sharpness at small sizes.
• File → Place lets you import an existing SVG file into your current document— useful for reusing symbols or assets from Figma, Illustrator, or Inkscape.
• File → Place and Trace Bitmap inserts a bitmap image (PNG, JPG, BMP, etc.) and converts it to vector paths. The tracing is optimized for monochrome bitmaps like glyphs or scanned sketches; refine the paths after tracing.
• You can also Copy/Paste vector content from external tools. IconVectors interprets SVG data in the clipboard and adds it to the canvas.
• Or draw from scratch using rectangles, ellipses, lines, freeform pen, path editing, and boolean operations for full control.

Export a Vue TypeScript component from IconVectors

1. Design on a consistent grid (e.g., 24×24). Keep strokes aligned to whole pixels.
2. Set theming strategy: for single‑color icons, prefer currentColor on fill or stroke so CSS can control color.
3. Open the Live Code Viewer (F3) and switch to the Vue (TS) tab.
4. Copy the generated component (or use Export) and save it to your project, e.g., icons/HeartIcon.vue.

Component template (typed + attribute fallthrough)

<template>
  <svg
    :width="size"
    :height="size"
    viewBox="0 0 24 24"
    v-bind="aria"
    v-bind="$attrs">
    <path
      fill="none"
      stroke="currentColor"
      stroke-width="1"
      stroke-linecap="round"
      stroke-linejoin="round"
      d="M2.5 9C2.5 2.5 10 3 12 7.5C14 3 21.5 2.5 21.5 9C21.5 15.4 12 21.5 12 21.5C12 21.5 2.5 15.6 2.5 9z"/>
  </svg>
</template>

<script lang="ts" setup>
import { computed } from 'vue';

interface IconProps {
  /** Optional accessible label; if omitted, icon is decorative */
  title?: string;
  /** Optional size in px (applies to width/height) */
  size?: number | string;
}

defineOptions({ inheritAttrs: false });
const props = defineProps<IconProps>();

const aria = computed(() =>
  props.title
    ? { role: 'img', 'aria-label': props.title }
    : { 'aria-hidden': 'true' }
);
const size = computed(() => props.size ?? 24);
</script>

Usage examples

<script setup lang="ts">
import HeartIcon from '@/icons/HeartIcon.vue';
</script>

<!-- 1) Decorative icon (screen readers ignore) -->
<HeartIcon class="h-5 w-5 text-rose-600" aria-hidden="true" />

<!-- 2) Informative icon with label -->
<HeartIcon class="h-5 w-5" title="Favorite" />

<!-- 3) Set size via prop or CSS -->
<HeartIcon :size="20" style="color:#16a34a" />

Using an SVG sprite in Vue (alternative)

If you maintain a global sprite, reference symbols with <use href="…"/>:

<!-- In index.html or App.vue once -->
<svg style="display:none">
  <symbol id="icon-heart-24" viewBox="0 0 24 24">
    <path fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
          d="M2.5 9C2.5 2.5 10 3 12 7.5C14 3 21.5 2.5 21.5 9C21.5 15.4 12 21.5 12 21.5C12 21.5 2.5 15.6 2.5 9z"/>
  </symbol>
</svg>

<!-- Anywhere in your app -->
<svg width="24" height="24" aria-hidden="true" class="text-rose-600">
  <use href="#icon-heart-24" fill="currentColor" />
</svg>

Accessibility checklist

• Decorative: add aria-hidden="true" (or omit title in the template above).
• Informative: provide a title (adds role="img" + aria-label via aria binding).
• Prefer inline components or sprites over <img src="icon.svg"> when you need ARIA and CSS control.

Theming with currentColor

Keep fills or strokes on the main shape set to currentColor so icons inherit text color from CSS (utility classes or variables). For fixed accents, use hard‑coded colors on secondary paths.

.btn-icon { color: #2563eb; }
[data-theme="dark"] .btn-icon { color: #93c5fd; }

<button class="btn-icon inline-flex items-center gap-2">
  <HeartIcon :size="20" aria-hidden="true" /> Save
</button>

Performance & packaging tips

• One icon per file with default export keeps imports explicit and tree‑shakable.
• Consistent viewBox (e.g., 0 0 24 24) keeps sizing predictable across your set.
• Minify when shipping: if you need raw SVGs, use IconVectors’ Minified SVG export; TS + SFC output is minified by your bundler.