I attempted to follow this GitHub repository: https://github.com/visualfanatic/vue-svg-loader/tree/master
Unfortunately, I encountered a version conflict with vue-template-compiler as it is designed for Vue 2.
Next, I tried to use just the main repository: https://github.com/visualfanatic/vue-svg-loader
However, I am encountering an issue with a specific Vue dependency that seems to be missing.
Upon further investigation, I realized there is a complication when using TypeScript where you need to declare a type definition file. Even after adding these declarations, I am still receiving the error "Cannot find module '../../assets/myLogo.svg' or its corresponding type declarations."
Below are the modifications I made:
vue.config.js
module.exports = {
chainWebpack: (config) =>
{
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgRule
.use('vue-loader-v16')
.loader('vue-loader-v16')
.end()
.use('vue-svg-loader')
.loader('vue-svg-loader');
},
configureWebpack: process.env.NODE_ENV === 'production' ? {} : {
devtool: 'source-map'
},
publicPath: process.env.NODE_ENV === 'production' ?
'/PersonalWebsite/' : '/'
}
shims-svg.d.ts
declare module '*.svg' {
const content: any;
export default content;
}
MyComponent.vue
<template>
<div>
<MyLogo />
</div>
</template>
<script lang="ts">
import * as MyLogo from "../../assets/myLogo.svg";
export default defineComponent({
name: "MyComponent",
components: {
MyLogo
},
props: {
},
setup(props)
{
return {
props
};
}
});
</script>