Registry / devops / vite-plugin-svg-spriter

vite-plugin-svg-spriter

library1.0.0jsnpmunverified

Vite plugin that builds an SVG sprite from a folder of individual SVGs and injects it into the root HTML. Version 1.0.0, stable. Uses svg-sprite internally for sprite generation and supports full svg-sprite configuration. Key differentiator: simple folder-based approach, no manual sprite management, and injects the sprite automatically via Vite's transformIndexHtml hook. Active maintenance.

devops

npm install vite-plugin-svg-spriter

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-SVG-SP

vite-plugin-svg-spriter

devopsjavascriptv1.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

createSvgSpritePlugin

✓ import createSvgSpritePlugin from 'vite-plugin-svg-spriter'

✗ const createSvgSpritePlugin = require('vite-plugin-svg-spriter')

CommonJS require will fail; package is ESM-only as it exports a function using export default.

SvgSpritePluginOptions

✓ import type { SvgSpritePluginOptions } from 'vite-plugin-svg-spriter'

✗ const SvgSpritePluginOptions = require('vite-plugin-svg-spriter').SvgSpritePluginOptions

TypeScript type import only; not a runtime value.

Plugin

✓ import type { Plugin } from 'vite'

✗ import { Plugin } from 'vite-plugin-svg-spriter'

Plugin is a Vite type; not exported from this package.

Configures the plugin with an SVG folder, optional svg-sprite config (e.g., SVGO optimization), and injection location.

// vite.config.ts import { defineConfig } from 'vite' import createSvgSpritePlugin from 'vite-plugin-svg-spriter' import path from 'path' const SVG_FOLDER_PATH = path.resolve(__dirname, 'src', 'assets', 'svg-sprite') export default defineConfig({ plugins: [ createSvgSpritePlugin({ svgFolder: SVG_FOLDER_PATH, svgSpriteConfig: { shape: { transform: ['svgo'] } }, transformIndexHtmlTag: { injectTo: 'body' } }) ] })

Debug

Known issues

gotchaPackage name is spelled with 'spriter' (r before e), not 'sprites' or 'sprite'. Incorrect install will fail.

fix

Verify npm install command: npm install vite-plugin-svg-spriter -DE

affects: >=1.0.0

gotchaPlugin only works with Vite; not compatible with other bundlers (Webpack, Rollup standalone).

fix

Only use within a Vite project.

affects: >=1.0.0

deprecatedUsing xlinkHref in SVG <use> is deprecated in SVG 2; use href instead.

fix

Use href="#thumbs-up" instead of xlinkHref="#thumbs-up".

affects: >=1.0.0

gotchaEnsure svgFolder path is absolute and exists; relative paths may fail silently.

fix

Use path.resolve to construct absolute paths.

affects: >=1.0.0

breakingESM-only since v1.0.0; CommonJS require() will throw a runtime error.

fix

Switch to ES module syntax (import/export) and ensure your project is configured for ESM.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: createSvgSpritePlugin is not a function

Using require instead of import on an ESM-only package.

fix

Replace const createSvgSpritePlugin = require(...) with import createSvgSpritePlugin from 'vite-plugin-svg-spriter'

Error: ENOTDIR: not a directory, scandir '/path/to/svg-folder'

The svgFolder option points to a file, not a directory.

fix

Ensure svgFolder is a directory containing the SVG files.

Error: Cannot find module 'vite-plugin-svg-spriter'

Package not installed due to typo in package name (e.g., 'sprite' instead of 'spriter').

fix

Install correct package: npm install vite-plugin-svg-spriter -DE

Warning: [vite-plugin-svg-spriter] No SVG files found in /path/to/...

The svgFolder directory is empty or does not contain .svg files.

fix

Place at least one SVG file in the specified folder.

Upgrade

Version history

1.0.0latest on npm

Audit

Dependencies

svg-spriterequiredCore SVG sprite generation engine

viterequiredVite plugin => requires Vite as a peer dependency

Agent activity

5 hits · last 30 days

node

Resources

githubhttps://github.com/AoDev/vite-plugin-svg-spriter ↗

packagehttps://www.npmjs.com/package/vite-plugin-svg-spriter ↗