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:
- Use vue-svg-loader package:
+ Install vue-svg-loader
+ Configure webpack:
+ Usage:
- 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>
Latest
Related
© 2019 4codev
Created with love by Sil.