Vite Plugin Inline SVG

A Vite plugin that transforms into inline SVG, and (optionally) generates a global object for dynamic SVG usage. This plugin is useful when you want to include SVG icons directly in your templates without relying on JavaScript to inject them.

Features

• Inline SVG Transformation: Replaces <inline-svg name="icon-name"> in your templates with the actual SVG code.
• Dynamic Icons Object: Generates a global object containing your SVG icons for dynamic usage.

Installation

1npm i -D vite-plugin-inline-svg

Usage

In vite.config.ts:

1import { defineConfig } from 'vite';
2import inlineSvg from 'vite-plugin-inline-svg';
3
4export default defineConfig({
5    plugins: [inlineSvg()],
6});

Options

1export type Options = {
2    // Directory containing SVG icons (default: 'src/icons')
3    svgDir?: string;
4
5    // Files to include for transformation
6    include?: RegExp;
7
8    // Files to exclude from transformation
9    exclude?: RegExp;
10
11    // Whether to enable component replacement (default: true)
12    enableComponentReplacement?: boolean;
13
14    // Name of the custom component to replace (default: 'inline-svg')
15    componentName?: string;
16
17    // Whether to generate a global icons object (default: false)
18    generateIconsObject?: boolean;
19
20    // Name of the global icons object (default: 'icons')
21    iconsObjectName?: string;
22
23    // Path to output the icons object file (default: './src/icons.ts')
24    iconsObjectOutputPath?: string;
25
26    // Format of the SVG content in the icons object (default: 'string')
27    iconsObjectFormat?: 'string' | 'base64' | 'uri';
28
29    // Path to generate the .d.ts file (default: './src/inline-svg.d.ts')
30    dts?: string;
31};