importing SVG with SvelteKit

Svelte

5/29/2022, 12:23:58 PM

by Leo Voon

Manual

Use SVGOMG to do the cleanup and paste it in .svelte, render as component, add props whenever you need.

But unfortunately this won’t work, because class is reserved word in JS

import Heart from 'heart.svelte'

<Heart class="w-18" />

this works if you do

// Heart.svelte
<script>
export let className = ''
</script>

<svg class={className} ></svg>

import Heart from 'heart.svelte'

<Heart className="w-18" />

Automate it

Use Vite plugin: `@poppanator/sveltekit-svg`. And now you can import as .svg directly.

Now this works.

import Heart from 'heart.svg'

<Heart class="w-18" />

If you have dynamic SVG with animation, manual is a better choice.