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

npm i -D vite-plugin-inline-svg

Usage

In vite.config.ts:

import { defineConfig } from 'vite';
import inlineSvg from 'vite-plugin-inline-svg';

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

Options

export type Options = {
    // Directory containing SVG icons (default: 'src/icons')
    svgDir?: string;

    // Files to include for transformation
    include?: RegExp;

    // Files to exclude from transformation
    exclude?: RegExp;

    // Whether to enable component replacement (default: true)
    enableComponentReplacement?: boolean;

    // Name of the custom component to replace (default: 'inline-svg')
    componentName?: string;

    // Whether to generate a global icons object (default: false)
    generateIconsObject?: boolean;

    // Name of the global icons object (default: 'icons')
    iconsObjectName?: string;

    // Path to output the icons object file (default: './src/icons.ts')
    iconsObjectOutputPath?: string;

    // Format of the SVG content in the icons object (default: 'string')
    iconsObjectFormat?: 'string' | 'base64' | 'uri';

    // Path to generate the .d.ts file (default: './src/inline-svg.d.ts')
    dts?: string;
};