// Tutorial //

Using SVG Icons in Vue.js

Published on March 21, 2017
Default avatar
By Joshua Bemenderfer
Developer and author at DigitalOcean.
Using SVG Icons in Vue.js

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

While font-based icons ruled the world a year or two ago, embedded SVG icons have since taken the stage (often credited to this post) as the best way to include icons in your app. Unfortunately, adding them by hand requires a lot of work and duplicated effort. Thankfully, vue-svgicon aims to simplify this and does a wonderful job.

Let’s get started with it shall we?

Installation & Setup

vue-svgicon can be installed via Yarn or NPM as expected:

# Yarn
$ yarn add vue-svgicon -D

# NPM
$ npm install vue-svgicon --save-dev

Next, download your preferred Icon font with individual SVG icons per-glyph. I’ll be using the Material Design Icons set, one of the largest sets available with almost 2,000 individual glyphs, based on Google’s design guidelines but sourced mostly from the community.

Stick those .svg files in an svg-icons folder at the root of your project. (Outside of the src directory.)

Now, vue-svgicon needs to convert all of the svg icon files into .js files that can be individually loaded, so let’s add a quick NPM script to do this for us. Edit your package.json file to include the script below:

package.json
{
  ...
  "scripts": {
    ...
    "generate-icons": "vsvg -s ./svg-icons -t ./src/compiled-icons"
  }
  ...
}

Then issue the command npm run generate-icons. This will output the compiled icons at src/compiled-icons/[icon-name].js.

Usage

Now we need to load the icons in our app. Add the vue-svgicon plugin to your main Vue app file:

src/main.js
...
import VueSVGIcon from 'vue-svgicon'

Vue.use(VueSVGIcon)

...

Now, we can load icons in our components by using the <svgicon> element and importing the icon we’re using. As a wonderful bonus, by using SVG icons in this way, we can load only the icons we need in the app with almost no effort.

src/ExampleComponent.vue
<template>
  <div>
    <span>Icon Demonstration:</span>
    <!-- You can tweak the width, height, and color of the icon. -->
    <svgicon icon="menu" width="22" height="18" color="#0f2"></svgicon>
  </div>
</template>

<script>
// If you really, really need to, you can import the whole iconset in your main.js file with `import ./compiled-icons`.
import './compiled-icons/menu';
</script>

There are a few other neat little tricks vue-svgicon has up its sleeve, find out more at the official repository.


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!