@thesvg/vue

@thesvg/vue

Typed Vue 3 SVG components for all 7,600+ 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:

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:

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 7,600 brand icons are available. Browse the full list at thesvg.org.

Community

Questions, icon requests, or ideas? Join the GLINR Discord, where theSVG has its own forum.

License

MIT - see LICENSE.

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