title: How do I import an svg in Vue 3?
body: <p>I tried following:
  <a href="https://github.com/visualfanatic/vue-svg-loader/tree/master" rel="noreferrer">https://github.com/visualfanatic/vue-svg-loader/tree/master</a></p>
  <p>but there's a version conflict with vue-template-compiler since that's used in Vue 2.</p>
  <p>I tried:
  <a href="https://github.com/visualfanatic/vue-svg-loader" rel="noreferrer">https://github.com/visualfanatic/vue-svg-loader</a></p>
  <p>but I'm missing a specific vue dependency.</p>
  <p>I noticed there's a caveat with using typescript and you need to declare the type definition file. However, I still get &quot;Cannot find module '../../assets/myLogo.svg' or its corresponding type declarations.&quot;</p>
  <p>Here's what I added:</p>
  <p>vue.config.js</p>
  <pre><code>module.exports = {
    chainWebpack: (config) =&gt; 
    {
      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/' : '/'
  }
  </code></pre>
  <p>shims-svg.d.ts</p>
  <pre><code>declare module '*.svg' {
    const content: any;
    export default content;
  }
  </code></pre>
  <p>MyComponent.vue</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
       &lt;MyLogo /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  import * as MyLogo from &quot;../../assets/myLogo.svg&quot;;
  
  export default defineComponent({
    name: &quot;MyComponent&quot;,
    components: {
      MyLogo
    },
    props: {
      
    },
    setup(props)
    {
      return {
        props
      };
    }
  });
  
  
  &lt;/script&gt;
  </code></pre>