Alternative

Unocss is a better choice.

Import SVGs in the template is not a good choice: https://twitter.com/_developit/status/1382838799420514317.

With unocss, you can use svg through css. you can learn more through this icons-in-pure-css.

vite-plugin-svelte-svg-loader

vite 3.x plugin to load SVG files as Svelte Components

Install

npm i -D vite-plugin-svelte-svg-loader

vite.config.ts

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import svgLoader from 'vite-plugin-svelte-svg-loader'

export default defineConfig({
  plugins: [svelte(), svgLoader({
    // svgo?: boolean;
    // svgoConfig?: OptimizeOptions;
    // defaultImport?: 'url' | 'raw' | 'component';
  })],
})

types/index.d.ts

declare module '*.svg?component' {
  import Svelte from 'svelte'
  export default Svelte.SvelteComponent
}

declare module '*.svg?url' {
  const src: string
  export default src
}

declare module '*.svg?raw' {
  const src: string
  export default src
}

Usage

import SvelteSvgCm from './assets/svelte.svg?component'
import SvelteSvgUrl from './assets/svelte.svg?url'
import SvelteSvgStr from './assets/svelte.svg?raw'

License

MIT License © 2022 fEyebrow