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;
};
