Here's a simple solution to incorporate Inline SVGs in Vue 3/Vite

If you're having difficulty setting up inline SVGs on your new Vue 3 and Vite project, then you've arrived at the right place!

Setup Vite SVG Loader Plugin

This plugin allows you to import the SVG as a Vue component.

Install the vite-svg-loader plugin with the following command:

npm i vite-svg-loader

in your vite.config.ts, add the newly installed SVGLoader plugin:

import svgLoader from 'vite-svg-loader';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), svgLoader()],
})

Create a reusable SVG Vue component

For convenience, we can create a reusable Vue component to inline our SVG images in our HTML like so:

<icon name="github-white"></icon>

First, we start with the component code (in this example we are using the Vue composition API):

// components/shared/icon.vue
<script setup>
  import { defineAsyncComponent } from 'vue';

  const props = defineProps({
    name: {
      type: String,
      required: true,
    }
  });

  // feel free to update this with an svg directory of your choice
  const icon = defineAsyncComponent(() =>
    import(`/src/assets/images/${props.name}.svg`)
  );
</script>

<template>
  <component :is="icon" class="fill-current" />
</template>

As you can see, we are utilizing defineAsyncComponent to only load the SVG when it's needed.

Now we have the option of importing this component as needed in our app. For convenience, importing this component for global use in your application is also possible.
Simply locate the file that is holding your Vue app’s createApp function call, and import it like so:

// src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import icon from './components/shared/icon.vue';

const app = createApp(App);

// importing our new icon component globally
app.component('icon', icon);

app.mount('#app');

and just like that, we have a reusable icon component all set up globally in our application!

Using our SVG component

Now let's see how this component behaves in the real world.

As an example, let’s plan to incorporate GitHub’s SVG icon into our application through the use of our recently developed icon.vue component. The intention is to also reduce the SVG size to 50px by 50px.

<div navigation__links>
  <icon name="github-white" width="50" height="50"></icon>
</div>

As you may have observed from the code above, it's possible to include width and height attributes directly without explicitly stating them as icon.vue's props!

However, we seem to have encountered a problem here where our custom 50x50 dimensions are cutting off the SVG:

No need to worry, there is a simple solution!

We just need to open the github-white.svg file and add the viewBox attribute to it as follows:

<svg viewBox="0 0 100 100" ... > </svg>

When this is implemented, the content within the SVG tag will adjust automatically to match the predetermined width and height of the SVG tag. We can think of it as "adjusting our telescope" to show the full image.

Also wanted to add that if you wanted to avoid the manual editing, there are also a plethora of online free tools that can automate the svg editing for you!
Here are a couple that have been useful in my experience:

• SVG Crop -> allows us to remove the white space and center the svg
• SVG Ico -> can convert your svg icon into a .ico file- great for updating the favicon for use in your website!

There you have it! I hope this has provided you with a helpful starting point for inlining SVGs in your Vue application. Thank you for taking the time to read it!

Credits:

• Photo by Yana Marudova on Unsplash