Bacancy Technology

Bacancy Technology represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

World wide offices

12+

Years of Experience

Agile Coaches

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

Vue

June 27, 2023

VueJS Loading SVG File Depending on Variable

A package raw-loader can help you to get the desired result.

First Install it with `npm i raw-loader` and add its config in `webpack` as described below.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        use: 'raw-loader',
      },
    ],
  },
};

Now update your code like below

<template>
  <div>
    <div v-for="(rec, index) in stats" :key="index">
      <div v-html="svgContent(rec)"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stats: [
        { name: 'Leadership', icon: 'leadership'},
        { name: 'Innovation', icon: 'genius-ideas'},
      ]
    }
  },
  methods: {
    svgContent(src) {
      return require(`!!raw-loader!@/assets/${src.icon}.svg`).default;
    },
  }
}
</script>

Now with the help of raw-loader file will import as string. This should fix your issue.