{"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,"search_vec":"'1.0.0':27 'activ':65 'approach':50 'automat':59 'base':49 'build':9 'configur':43 'differenti':45 'folder':15,48 'folder-bas':47 'full':39 'generat':36 'hook':64 'html':25 'individu':17 'inject':20,56 'intern':33 'javascript':67 'key':44 'mainten':66 'manag':54 'manual':52 'plugin':3,7,69 'root':24 'simpl':46 'sprite':12,32,35,42,53,58,72 'spriter':5 'stabl':28 'support':38 'svg':4,11,31,41,71 'svg-sprite':30,40,70 'svgs':18 'transformindexhtml':63 'typescript':73 'use':29 'version':26 'via':60 'vite':2,6,61,68 'vite-plugin-svg-sprit':1","created_at":"2026-04-27T17:07:30.787039+00:00","updated_at":"2026-04-27T17:07:30.787039+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/AoDev/vite-plugin-svg-spriter","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vite-plugin-svg-spriter","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-18","next_check":"2026-07-26","install_tag":null}}