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

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

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;

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

Subscribe for
weekly updates