What is the official best method to import svg?

[ramadhanafif]

I'm a newbie to sveltekit. I ask this question because importing svg is so simple in vite+svelte.

However, I have not found a method of importing svg without the assistance of other external module.

I also noticed that in vite, we have a public folder to store assets, and in sveltekit we didn't have it.

Does anyone know a proper method for importing svg (and other static assets) in sveltekit?

[vekunz]

SvelteKit has a static folder for static assets on the top level.

[ramadhanafif]

I cannot import any images from the static folder to svelte components or pages, did I do something wrong?

<script lang="ts">
	import icon from '../../static/cat.svg';
</script>

What works, for me, is importing from $lib/assets/image.png. However, what I want is to load svg.

This is the error log.

SvelteKitError: Not found: /[object%20Object]
    at resolve (/home/ramad/Documents/frontend_v3/node_modules/@sveltejs/kit/src/runtime/server/respond.js:485:13)
    at resolve (/home/ramad/Documents/frontend_v3/node_modules/@sveltejs/kit/src/runtime/server/respond.js:285:5)
    at #options.hooks.handle (/home/ramad/Documents/frontend_v3/node_modules/@sveltejs/kit/src/runtime/server/index.js:59:56)
    at Module.respond (/home/ramad/Documents/frontend_v3/node_modules/@sveltejs/kit/src/runtime/server/respond.js:282:40)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  status: 404,
  text: 'Not Found'
}
SvelteKitError: Not found: /class%20Cat%20extends%20SvelteComponent%20%7Bconstructor(options)%20%7Bsuper();init(this,%20options,%20instance,%20create_fragment,%20safe_not_equal,%20%7B%7D);%7D%7D
    at resolve (/home/ramad/Documents/frontend_v3/node_modules/@sveltejs/kit/src/runtime/server/respond.js:485:13)
    at resolve (/home/ramad/Documents/frontend_v3/node_modules/@sveltejs/kit/src/runtime/server/respond.js:285:5)
    at #options.hooks.handle (/home/ramad/Documents/frontend_v3/node_modules/@sveltejs/kit/src/runtime/server/index.js:59:56)
    at Module.respond (/home/ramad/Documents/frontend_v3/node_modules/@sveltejs/kit/src/runtime/server/respond.js:282:40)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  status: 404,
  text: 'Not Found'
}

[vekunz]

However, what I want is to load svg.

Actually, I don't understand, what you want. You say, that you want to load the SVG, but in your code example, you try to import it. Importing from static does not make sense, since importings are resolved on compile-time. So if you want to import the SVG, then you should place it in the $lib folder.

If you place the SVG in the static folder, you can load it from the browser with an img-Tag:

<img src="/cat.svg" alt="Cat" />

[ramadhanafif]

You got a point there. It is indeed pointless to import image.

Originally, I was trying to tidy up the directory structure, therefore I tried to import those images using vite-style import such as

import cat from './cat.svg'

and then load it later on .jsx file with

<img src={cat} alt="Cat" />

[ramadhanafif]

Solution: don't import the image, just load it with img tag using the image filepath

If you place the SVG in the static folder, you can load it from the browser with an img-Tag:

<img src="/cat.svg" alt="Cat" />