Gone are the days when we depended on styling libraries to provide fast access to icons and go through untold suffering due to payload size, performance issues etc.. With the advent of SVG, we can use icons from a variety of sources. We will see how to do just that.

SVG images have the advantage of -

1. Being vector based, so it can be scaled to any size
2. “Is just text”
3. Can be styled
4. Small in size!

Using SVG Icons: Why do that?

You see in the old west, we used to have icons like this -

1

<i class="fa fa-user"></i>

With libraries like Vuetify, the above statement looks like this -

1

<v-icon>mdi-account</v-icon>

The code is easy to use, but you have to depend on the library to provide you the icon. You are also dependent on the library for applying changes to color, size, and probably even for the freaking dark mode.

With SVG, you can use the icon from any source, and apply any styling you want.

Using SVG Icons

Getting started with SVG icons is pretty easy.

1. Identify the SVG
2. Copy the SVG and paste it directly in a Vue component (OR) Save the SVG in a file and import it in a Vue component

As always the modern web makes using SVG icons trivial. 😜

Method 1: Use direct links to icons

You can use the SVG icon directly in your Vue component.

An example using icongram ie below.

1
2
3
4
5

<template>
  <img
    src="https://icongr.am/material/airplane-takeoff.svg?size=128&color=4023d1"
  />
</template>

The parameters are self-explanatory.
You can see the image, change the size / color and see how URLs are constructed for various icons from the icongram website (linked to Material icons, it can be anything really).

Others doing the same fun stuff -

• Ionicons
• Iconify
• CSS icons - icons are also available as SVG

There is an easier way to use the icons directly.
Use something like a NuxtIcon and set it up as a plugin.

And, voila -

1
2
3
4
5

<template>
  <!-- ... -->
  <Icon name="uil:github" color="black" />
  <!-- ... -->
</template>

Method 2: Download and use icons

Any of the sites outlined in the previous section allow you to download the SVG icon. Just save the file in your local public / assets folder and use it in your Vue component.

More example sites providing SVG downloads -

• Heroicons
• Feather
• SVG Repo
• Material

Once the images are available in your project, using them should be as simple as -

1
2
3

<template>
  <img src="images/airplane-takeoff.svg" />
</template>

Another way to do this (probably more efficient) is to create a pass through Vue component that renders the SVG. This way you can play around with the size/colors etc. in a more uniform way.

Example Vue component to render a given SVG -

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<template>
  <svg
    :viewBox="viewBox"
    xmlns="http://www.w3.org/2000/svg"
    :width="width"
    :height="height"
    class="svg-icon"
  ></svg>
</template>

<script setup>
  import { defineProps, computed, Component } from "vue";

  defineProps({
    viewBox: { type: String, default: "0 0 24 24" },
    width: { type: String, default: "24" },
    height: { type: String, default: "24" },
  });
</script>

Invoke the component as any other Vue component. This approach has the advantage of consistency in the way you render the SVG icons - e.g., use similar sizes, color, etc.

Method 3: Just paste the SVG

As an alternative to downloading icons, just paste the SVG in your Vue component.

For e.g. -

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<svg
  data-slot="icon"
  fill="none"
  stroke-width="1.5"
  stroke="currentColor"
  viewBox="0 0 24 24"
  xmlns="http://www.w3.org/2000/svg"
  aria-hidden="true"
>
  <path
    stroke-linecap="round"
    stroke-linejoin="round"
    d="m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z"
  ></path>
</svg>

As outlined in the previous section, you can also paste the SVG in a separate Vue component and use that component in your project.