Vite Plugin Svelte Svg

Vite plugin for SVG handling in Svelte projects with dynamic color and size support

vite-plugin-for-svelte-svg

Vite plugin for SVG handling in Svelte 5 projects with dynamic color and size support.

Features

🎨 Dynamic color modification at runtime
📐 Flexible sizing with CSS units
🔄 Auto-generate TypeScript types for SVG names
🔥 HMR support - add/remove SVGs without restart
📦 Tree-shakeable

Installation

pnpm add vite-plugin-for-svelte-svg

Usage

1. Configure Vite

// vite.config.ts
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import svelteSvg from 'vite-plugin-for-svelte-svg'

export default defineConfig({
  plugins: [
    svelteSvg({
      dir: 'src/svg',
      output: 'src/svg/index.ts'
    }),
    svelte()
  ]
})

2. Use the Component

<script lang="ts">
  import { Svg } from './svg'  // Auto-generated with typed name prop
</script>

<!-- Basic usage -->
<Svg name="icon" />

<!-- With size -->
<Svg name="logo" size="64px" />

<!-- With single color -->
<Svg name="arrow" color="#ff0000" />

<!-- With multiple colors (for multi-colored SVGs) -->
<Svg name="badge" color={['#fff', '#000', '#ccc']} />

<!-- With class and click handler -->
<Svg 
  name="button" 
  size="24px" 
  class="hover:opacity-80 cursor-pointer"
  onclick={() => console.log('clicked')}
/>

API

Plugin Options

Option	Type	Default	Description
`dir`	`string`	`'src/svg'`	SVG files directory
`output`	`string`	`'src/svg/index.ts'`	Generated module output path
`generateTypes`	`boolean`	`true`	Whether to generate types

Svg Component Props

Prop	Type	Default	Description
`name`	`SvgName`	required	SVG file name (without extension), auto-completed
`size`	`string \| number`	`'40px'`	Width and height
`color`	`string \| string[]`	`undefined`	Fill color(s) for shapes
`class`	`string`	`''`	CSS classes
`...rest`	`HTMLAttributes`	-	All HTML attributes and events

Generated File

The plugin generates a single index.ts file containing:

export type SvgName = 'icon1' | 'icon2' | ...  // Union of all SVG names
export interface SvgProps { ... }               // Typed props interface
export const Svg: Component<SvgProps>           // Typed Svg component

How It Works

Build/Dev start: Plugin scans SVG directory and generates index.ts with typed Svg component
Dev time: Watches for SVG file changes and regenerates with HMR
Runtime: SVGs are loaded as base64 data URLs via import.meta.glob, then parsed and modified in the browser

License

MIT

Top categories