<p>I tried the following: <br /> <a href="https://github.com/visualfanatic/vue-svg-loader/tree/master">https://github. com/visualfanatic/vue-svg-loader/tree/master</a></p> <p>But because vue-template-compiler is used in Vue 2, there is a version conflict. </p> <p>I tried:<br /> <a href="https://github.com/visualfanatic/vue-svg-loader">https://github.com/visualfanatic/vue- svg-loader</a></p> <p>But I'm missing a specific Vue dependency. </p> <p>I noticed that there is a note when using TypeScript, which requires declaring a type definition file. However, I still get the "Cannot find module '../../assets/myLogo.svg' or its corresponding type declaration" error. </p> <p>This is what I added: </p> <p>vue.config.js</p> <pre class="brush:php;toolbar:false;">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/' : '/' }</pre> <p>shims-svg.d.ts</p> <pre class="brush:php;toolbar:false;">declare module '*.svg' { const content: any; export default content; }</pre> <p>MyComponent.vue</p> <pre class="brush:php;toolbar:false;"><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></pre> <p><br /></p>

<template>
  <div class="title">
    <span>Lorem ipsum</span>
    <Icon />
  </div>
</template>

<script>
import Icon from '~/common/icons/icon.svg';

export default {
  name: 'PageTitle',
  components: { Icon },
};
</script>

{
   test: /\.svg$/,
   use: ['vue-loader', path.resolve(__dirname, 'scripts/svg-to-vue.js')],
}

module.exports = function (source) {
  return `<template>\n${source}\n</template>`;
};

vue inspect --rules

<template>
  <div>
    <img :src="myLogoSrc" alt="my-logo" />
  </div>
</template>

<script lang="ts">
  // 请使用`@`来引用项目的根目录“src”
  import myLogoSrc from "@/assets/myLogo.svg";

  export default defineComponent({
    name: "MyComponent",

    setup() {
      return {
        myLogoSrc
      };
    }
  });
</script>

declare module '*.svg' {
  // 它实际上是一个字符串，精确地说是指向图像文件的解析路径
  const filePath: string;

  export default filePath;
}