How to load SVG with Vue+JSX (getting 404)

[julisch94]

Hey folks, thank you for this library. I'm having an issue using it in a Vue project with JSX.

I'm trying the following:

render() {
  return (
    <InlineSvg
      src={'../../assets/test.svg'} // try 1 
      src={'@/assets/test.svg'}     // try 2
    />
  )
}

The svg is not being loaded. In the console I can see the following errors: try 1) GET http://localhost:5173/assets/test.svg 404 (Not Found) try 2) GET http://localhost:5173/@/assets/test.svg 404 (Not found)

I can confirm that the file is here:

src/
- assets/
  - test.svg
- components/
  - another-folder/
    - MyComponent.tsx

I'm not sure what I'm missing. Am I using the library correctly? Is this issue related to JSX? What am I doing wrong here?

Thanks for your help!

[julisch94]

Well, it turns out it was a Vite issue.

I had to use the following:

render() {
  const path = new URL('/src/assets/test.svg', import.meta.url).href
  return (
    <InlineSvg
      src={path}
    />
  )
}

Note: if you wanna resolve the path dynamically, it seems you have to move the files from the /src to the /public folder.