@thesvg/vue

Typed Vue 3 SVG components for all 4000+ brand icons from thesvg.org.

• Zero runtime dependencies (Vue is a peer dep)
• TypeScript strict mode - full SVGAttributes support
• Tree-shakeable ESM - import only what you use
• Individual icon imports for maximum bundle efficiency
• Render-function components - no SFC compiler needed

Installation

npm install @thesvg/vue
# or
pnpm add @thesvg/vue
# or
yarn add @thesvg/vue

Vue 3.3 or later is required as a peer dependency.

Usage

Named import from barrel (convenient, relies on tree-shaking)

<script setup>
import { Github, VisualStudioCode, Figma } from "@thesvg/vue";
</script>

<template>
  <div>
    <Github width="24" height="24" />
    <VisualStudioCode width="24" height="24" class="text-blue-500" />
    <Figma width="32" height="32" aria-label="Figma" />
  </div>
</template>

Individual icon import (best for bundle size)

<script setup>
import Github from "@thesvg/vue/github";
import VisualStudioCode from "@thesvg/vue/visual-studio-code";
</script>

<template>
  <Github width="24" height="24" />
</template>

Each icon is a separate module so bundlers that do not support tree-shaking will still include only the icons you import.

Props

Every component accepts all standard SVG attributes:

| Prop | Type | Default | Description | | ------------ | ------------------ | ----------------- | ------------------------------ | | width | number \| string | (SVG default) | Icon width | | height | number \| string | (SVG default) | Icon height | | class | string | - | CSS class name | | style | object \| string | - | Inline styles (prefer class) | | fill | string | "none" | SVG fill color | | viewBox | string | from original SVG | Override the viewBox | | aria-label | string | - | Accessible label | | ... | ... | - | Any other SVG attribute |

Sizing example

<!-- Fixed size -->
<Github width="24" height="24" />

<!-- Responsive via CSS -->
<Github class="w-6 h-6" />

<!-- Scale with font-size (em units) -->
<Github width="1em" height="1em" />

Accessibility

<!-- Meaningful icon - label it -->
<Github aria-label="GitHub" role="img" width="24" height="24" />

<!-- Decorative icon - hide from screen readers -->
<Github aria-hidden="true" width="24" height="24" />

Component names

Slugs are converted to PascalCase component names:

| Slug | Component name | | -------------------- | ------------------ | | github | Github | | visual-studio-code | VisualStudioCode | | figma | Figma | | 01dotai | I01Dotai | | dotnet | Dotnet |

Slugs that start with a digit are prefixed with I to produce a valid JavaScript identifier.

Tree-shaking

When using a bundler with ESM tree-shaking support (Vite, Webpack 5, Rollup), named imports from the barrel (@thesvg/vue) are tree-shaken automatically - only the icons you import are included in the final bundle.

For bundlers without tree-shaking support, use individual icon imports:

// Always tree-shaken regardless of bundler
import Github from "@thesvg/vue/github";

Available icons

Over 4000 brand icons are available. Browse the full list at thesvg.org.

License

MIT - see LICENSE.

Brand icons and logos are the property of their respective trademark holders. See thesvg.org for details.