{"id":22869,"library":"vite-plugin-svg-spriter","title":"vite-plugin-svg-spriter","description":"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.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/AoDev/vite-plugin-svg-spriter","tags":["javascript","vite","plugin","svg-sprite","typescript"],"install":[{"cmd":"npm install vite-plugin-svg-spriter","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-svg-spriter","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-svg-spriter","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core SVG sprite generation engine","package":"svg-sprite","optional":false},{"reason":"Vite plugin => requires Vite as a peer dependency","package":"vite","optional":false}],"imports":[{"note":"CommonJS require will fail; package is ESM-only as it exports a function using export default.","wrong":"const createSvgSpritePlugin = require('vite-plugin-svg-spriter')","symbol":"createSvgSpritePlugin","correct":"import createSvgSpritePlugin from 'vite-plugin-svg-spriter'"},{"note":"TypeScript type import only; not a runtime value.","wrong":"const SvgSpritePluginOptions = require('vite-plugin-svg-spriter').SvgSpritePluginOptions","symbol":"SvgSpritePluginOptions","correct":"import type { SvgSpritePluginOptions } from 'vite-plugin-svg-spriter'"},{"note":"Plugin is a Vite type; not exported from this package.","wrong":"import { Plugin } from 'vite-plugin-svg-spriter'","symbol":"Plugin","correct":"import type { Plugin } from 'vite'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite'\nimport createSvgSpritePlugin from 'vite-plugin-svg-spriter'\nimport path from 'path'\n\nconst SVG_FOLDER_PATH = path.resolve(__dirname, 'src', 'assets', 'svg-sprite')\n\nexport default defineConfig({\n  plugins: [\n    createSvgSpritePlugin({\n      svgFolder: SVG_FOLDER_PATH,\n      svgSpriteConfig: {\n        shape: {\n          transform: ['svgo']\n        }\n      },\n      transformIndexHtmlTag: {\n        injectTo: 'body'\n      }\n    })\n  ]\n})","lang":"typescript","description":"Configures the plugin with an SVG folder, optional svg-sprite config (e.g., SVGO optimization), and injection location."},"warnings":[{"fix":"Verify npm install command: npm install vite-plugin-svg-spriter -DE","message":"Package name is spelled with 'spriter' (r before e), not 'sprites' or 'sprite'. Incorrect install will fail.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Only use within a Vite project.","message":"Plugin only works with Vite; not compatible with other bundlers (Webpack, Rollup standalone).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use href=\"#thumbs-up\" instead of xlinkHref=\"#thumbs-up\".","message":"Using xlinkHref in SVG <use> is deprecated in SVG 2; use href instead.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Use path.resolve to construct absolute paths.","message":"Ensure svgFolder path is absolute and exists; relative paths may fail silently.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Switch to ES module syntax (import/export) and ensure your project is configured for ESM.","message":"ESM-only since v1.0.0; CommonJS require() will throw a runtime error.","severity":"breaking","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Replace const createSvgSpritePlugin = require(...) with import createSvgSpritePlugin from 'vite-plugin-svg-spriter'","cause":"Using require instead of import on an ESM-only package.","error":"TypeError: createSvgSpritePlugin is not a function"},{"fix":"Ensure svgFolder is a directory containing the SVG files.","cause":"The svgFolder option points to a file, not a directory.","error":"Error: ENOTDIR: not a directory, scandir '/path/to/svg-folder'"},{"fix":"Install correct package: npm install vite-plugin-svg-spriter -DE","cause":"Package not installed due to typo in package name (e.g., 'sprite' instead of 'spriter').","error":"Error: Cannot find module 'vite-plugin-svg-spriter'"},{"fix":"Place at least one SVG file in the specified folder.","cause":"The svgFolder directory is empty or does not contain .svg files.","error":"Warning: [vite-plugin-svg-spriter] No SVG files found in /path/to/..."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}