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.

Need Help With Vue Development?

Work with our skilled Vue developers to accelerate your project and boost its performance.

Hire Vuejs Developers

Support On Demand!

Related Q&A