📦 svelte-svg-loader

Vite plugin to load and optimize SVG files as Svelte components. Powered by SVGO for SVG optimization.

✨ Features

• ✅ Import SVG files as native Svelte components
• ✅ Optimized using SVGO
• ✅ Pass standard SVG attributes as props (width, fill, etc.)
• ✅ Seamless integration with SvelteKit and Vite

🚀 Installation

Using pnpm:

pnpm add -D svelte-svg-loader

🔧 Usage

1. Configure vite.config.ts

import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";
import { svelteSvgLoader } from "svelte-svg-loader";

export default defineConfig({
  plugins: [sveltekit(), svelteSvgLoader()],
});

2. Import SVG as a Component You can now import SVGs with the ?component query:

<script>
  import Icon from './assets/icon.svg?component';
</script>
<Icon />

3. Pass Props as SVG Attributes All standard SVG attributes can be passed as props:

<script>
  import Icon from './assets/icon.svg?component';
</script>

<Icon width="24px" height="24px" fill="red" />

📁 File Naming

SVGs must be imported with the ?component query to be treated as Svelte components.

✅ Valid:

import Icon from "./logo.svg?component";

❌ Invalid:

import Icon from "./logo.svg"; // will NOT work as a component

💬 Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.