Instructions for loading SVGs inline from a file reference in Vue.js

vue-inline-svg-loader.md

Install svg-inline-loader

npm install svg-inline-loader --save-dev

Webpack Config

In module rules in webpack config, add this loader:

module: {
  rules: [
    {
      test: /\.svg$/,
      loader: 'svg-inline-loader'
    }
  ]
}

Also, if SVG files are being referenced by other loaders, possibly paired with file-loader, be sure to remove it:

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/

Vue Loader Options

Add vector: 'src' to the transformToRequire in your vue-loader options.

transformToRequire: {
  //...
  vector: 'src'
}

Vector Vue Component

Create a Vector.vue file:

<template>
  <div v-once v-html="src"></div>
</template>

<script>
  export default { props: [ 'src' ] }
</script>

Import and Use the Component

import Vector from 'Vector.vue';
Vue.use(VueRouter);
Vue.component('vector', Vector);

Usage

Example usage. The tilde and path traversal are required:

<vector src="~../../static/images/test.svg" class="my-test-svg"></vector>