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
06
World wide offices
12+
Years of Experience
05
Agile Coaches
14
Certified Scrum Masters
1000+
Clients projects
1458
Happy customers
Cloud Services
AWS
Azure
Google Cloud
Salesforce
Microsoft
SAP
June 27, 2023
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.
Work with our skilled Vue developers to accelerate your project and boost its performance.
Hire Vuejs Developers
