title: Dynamic inline importing raw SVG in Vue.js & Vite
body: <p>So I am trying to import SVG as string into my Vue component using inline import on Vite as follows</p>
  <pre><code>&lt;script&gt;
  const getSvgIcon = async (name) =&gt; {
    const module = await import(`../icons/${name}.svg?raw`)
    return module.default
  }
  
  export default {
    props: {
      name: String,
    },
    data() {
      return {
        svg: null,
      }
    },
    watch: {
      name: {
        async handler(name) {
          this.svg = await getSvgIcon(name)
        },
        immediate: true,
      },
    },
  }
  &lt;/script&gt;
  
  &lt;template&gt;
    &lt;div v-html=&quot;svg&quot;&gt;&lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>This works just fine when running on <code>npm run dev</code> mode.</p>
  <p>However, the issue happens when running <code>npm run build</code>, I end up getting <code>Error: Unknown variable dynamic import</code> apparently because I'm using <code>?raw</code> suffix.</p>
  <p>Is there a solution or is this a handicap by Vite as of now?</p>