1.0.1 • Published 2 years ago
vite-plugin-svelte-svg-loader v1.0.1
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'