DEV Community 👩‍💻👨‍💻

Drozerah
Drozerah

Posted on

Vue.js SVG Responsive Component

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 the require() method to access the assets folder
  • we create the full path to the .svg source file using the value stored/passed as the property (props) of the component this.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 the img html tag...
  • the responsive-img CSS class will let the img tag to automatically fit the size of its parent container

component src\components\SVG-image.vue

<template>
    <img class="responsive-img" alt="JS logo" :src="path">
</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>

<script>
import SVGImage from './components/SVG-image.vue'

export default {
  name: 'app',
  components: {
    SVGImage,
  }
}
</script>
//...

gif

Check it out !

Get a local copy of this repository

$ git clone https://github.com/Drozerah/vue-svg-responsive-component.git

Project setup

$ npm install

Compiles and hot-reloads for development

$ npm run serve

Compiles and minifies for production

$ 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!

Vue.js SVG Responsive Component

Thanks for reading!

See you next time!

Drozerah

Top comments (0)

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git