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>


import img vueimport svg vuevuevue svg

Latest

R

Remove an object item from array by ID in Javascript

H

How to reverse an array in Javascript without changing the original array?

A

Auto scroll to a specify element every time open webpage by Javascript

H

How to scroll to top every time React router change?

G

Get height or width of an element in Javascript

T

The way to separate logic code of the Vuejs component into smaller files

Related

T

The way to separate logic code of the Vuejs component into smaller files

C

Create a Vuejs login page use Vuetify template and validate with vee-validate

T

The way to import a helper function into the Vuejs template

H

How to add Google AdSense to a Vuejs app?

H

How to call the Mutations from inside the different Modules in Vuejs?

C

Create the Tooltip Component in Vuejs

© 2019 4codev

Created with love by Sil.