Use brand SVG logos in Vue and Svelte

Before you start

• A Vue app on Vue 3.3 or later, or a Svelte app on Svelte 4 or Svelte 5.
• A package manager: npm, pnpm or yarn.

How the components are named

Each brand is a named export in PascalCase, built from its slug: github becomes Github and visual-studio-code becomes VisualStudioCode. A slug that starts with a digit gets an I in front, so 01dotai becomes I01Dotai. Look up a slug on thesvg.org.

In a Vue app

1. Step 1Install the Vue package

   Add @thesvg/vue. Vue is a peer dependency, so nothing else comes with it.

   npm install @thesvg/vue

2. Step 2Import a logo in a component

   Import from the package root inside <script setup> and use the logo like any element. The components are render functions, so they need no single file component compiler of their own.

   <script setup>
   import { Figma, Github } from "@thesvg/vue";
   </script>
   
   <template>
     <div class="flex gap-4">
       <Github width="24" height="24" />
       <Figma width="24" height="24" />
     </div>
   </template>

3. Step 3Import per icon when your bundler does not tree shake

   Named imports from the root are tree shaken by ES module bundlers such as Vite, Rollup and webpack. If yours does not, import each logo from its own path so only that logo ships.

   import Github from "@thesvg/vue/github";
   import VisualStudioCode from "@thesvg/vue/visual-studio-code";

In a Svelte app

4. Step 4Install the Svelte package

   Add @thesvg/svelte. Svelte is a peer dependency, and the components work with Svelte 4 and Svelte 5.

   npm install @thesvg/svelte

5. Step 5Import a logo in a component

   Import from the package root in the component's script block. With SvelteKit or Vite, named imports from the root are tree shaken, so only the logos you use are bundled.

   <script>
     import { Figma, Github } from "@thesvg/svelte";
   </script>
   
   <div class="flex gap-4">
     <Github width="24" height="24" />
     <Figma width="24" height="24" />
   </div>

6. Step 6Import a single logo by path

   Every logo is also its own .svelte module. Import it by path for the most control over what ships.

   <script>
     import Github from "@thesvg/svelte/github";
   </script>
   
   <Github width="24" height="24" />

Size it and label it

7. Step 7Size it with attributes or classes

   Both packages pass standard SVG attributes through to the <svg> element, so the same markup works in Vue and Svelte: fixed width and height, a utility class, or 1em to follow the surrounding font size.

   <!-- Fixed size -->
   <Github width="24" height="24" />
   
   <!-- Sized by a class -->
   <Github class="h-6 w-6" />
   
   <!-- Follows the font size -->
   <Github width="1em" height="1em" />

8. Step 8Label it or hide it

   A logo that carries meaning on its own gets a role and a label. A logo next to the brand name in text is decoration, so hide it from screen readers.

   <!-- Meaningful on its own -->
   <Github role="img" aria-label="GitHub" width="24" height="24" />
   
   <!-- Next to the word GitHub already -->
   <Github aria-hidden="true" width="24" height="24" />

Dark, mono and wordmark versions

The Vue and Svelte components render each brand's primary mark. For a dark, light, mono or wordmark version, add that variant to your project as a file with the theSVG CLI, or link the hosted file at https://thesvg.org/icons/{slug}/{variant}.svg.

npx @thesvg/cli add github --variant dark --format vue