How to import a svg image to a Vue component?

Today we will learn about How to import a svg image to a Vue component. There are two ways to import a svg image:

- Direct import:


<script>
import imgSvg from 'assets/images/imgSvg.svg';

export default {
  data(){
    return {
      imgSvg
    }
  }
}
</script>


- Use vue-svg-loader package:

+ Install vue-svg-loader

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


+ Configure webpack:

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


+ Usage:


<script>
import ImgSvg from './assets/ImgSvg.svg';

export default {
  components: {
    ImgSvg,
  },
};
</script>


© 2019 4codev

Created with love by Sil.