How can I import a svg file to a Vue component?

Question

Based on the information you provided, what you can do is:

Install vue-svg-loader

npm install --save-dev vue-svg-loader

Configure webpack:

module: {
    rules: [
      {
       test: /\.svg$/,
       loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
      },
    ],
  },

Import the svg and use it as a regular component:

<template>
  <nav id="menu">
    <a href="https://stackoverflow.com/questions/44695560/...">
      <SomeIcon class="icon" />
      Some page
    </a>
  </nav>
</template>

<script>
import SomeIcon from './assets/some-icon.svg';

export default {
  name: 'menu',
  components: {
    SomeIcon,
  },
};
</script>

Reference: https://github.com/visualfanatic/vue-svg-loader

Leave a Comment Cancel reply