Simply Demonstrate a Vue.js component that returns a SVG file passed to the component as a property + turn the
img
html tag into a responsive/adaptative element using CSS rules
Method:
- we use a computed property to work with the SVG file into the component.
note: Computed properties sit halfway between properties of the data object and methods: we can access them as if they were properties of the data object, but they are specified as functions...
- we create a computed property function that returns the
.svg
file path using therequire()
method to access theassets
folder - we create the full path to the
.svg
source file using the value stored/passed as the property (props) of the componentthis.SVGFile
- we use the ES6 template literal syntax to construct the full path dynamically...
- we bind the value of the computed property to the
src
attribute of theimg
html tag... - the
responsive-img
CSS class will let theimg
tag to automatically fit the size of its parent container
component src\components\SVG-image.vue
<template>
<div>
<img class="responsive-img" alt="JS logo" :src="path">
</div>
</template>
<script>
export default {
name: 'SVG-image',
props: {
SVGFile: String
},
computed: {
path(){
return require( `@/assets/svg/${this.SVGFile}`)
}
}
}
</script>
<style lang="scss" scoped>
.responsive-img{
max-width: 100%;
height: auto;
}
</style>
Using the component src\App.vue
<template>
<div id="app">
<main>
<SVGImage SVGFile='logo-js.svg'/>
</main>
</div>
</template>
//...
$ git clone https://github.com/Drozerah/vue-svg-responsive-component.git
$ npm install
$ npm run serve
$ npm run build
Once you are done with the compilation, simply:
$ cd dist
Then go live your index.html
with your local development server...
That's it!
Broadcasting
- This content is also published on the dev.to network
Author
- Thomas G. aka Drozerah - GitHub