{"id":22701,"library":"vite-plugin-icons-spritesheet","title":"Vite Plugin Icons Spritesheet","description":"Vite plugin (v3.0.1) that generates an SVG spritesheet and optional TypeScript type definitions from a folder of SVG icons. Watches the input directory and rebuilds on changes. Supports multiple spritesheet configurations, custom icon naming via transformer function, and integration with Prettier or Biome for formatting. Respects Vite's assetInlineLimit configuration. Requires Vite >=5.2.0 as a peer dependency. Differentiated by its focus on spritesheet generation with HMR support and framework-agnostic design (React, Vue, Angular, Remix).","status":"active","version":"3.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/forge42dev/vite-plugin-icons-spritesheet","tags":["javascript","icons","spritesheet","vite","plugin","generator","react","angular","vue","typescript"],"install":[{"cmd":"npm install vite-plugin-icons-spritesheet","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-icons-spritesheet","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-icons-spritesheet","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; plugin requires Vite >=5.2.0","package":"vite","optional":false}],"imports":[{"note":"Named export only; default import does not exist.","wrong":"import iconsSpritesheet from 'vite-plugin-icons-spritesheet'","symbol":"iconsSpritesheet","correct":"import { iconsSpritesheet } from 'vite-plugin-icons-spritesheet'"},{"note":"Type-only import for TypeScript users; never use value import for types.","wrong":"import { IconsSpritesheetOptions } from 'vite-plugin-icons-spritesheet'","symbol":"IconsSpritesheetOptions","correct":"import type { IconsSpritesheetOptions } from 'vite-plugin-icons-spritesheet'"},{"note":"CommonJS require is supported via named destructuring.","wrong":"","symbol":"require (CommonJS)","correct":"const { iconsSpritesheet } = require('vite-plugin-icons-spritesheet')"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport { iconsSpritesheet } from 'vite-plugin-icons-spritesheet';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    iconsSpritesheet({\n      withTypes: true,\n      inputDir: 'icons',\n      outputDir: 'public/icons',\n      fileName: 'sprite.svg',\n      formatter: 'prettier',\n    }),\n  ],\n});\n\n// Place SVG files in the 'icons' directory, then reference them:\n// In your React component:\nimport spriteHref from '/icons/sprite.svg';\nimport type { IconName } from '/icons/types';\n\nexport function Icon({ name, ...props }: React.SVGProps<SVGSVGElement> & { name: IconName }) {\n  return (\n    <svg {...props}>\n      <use href={`${spriteHref}#${name}`} />\n    </svg>\n  );\n}","lang":"typescript","description":"Plugin setup with TypeScript types and React component example using the generated spritesheet."},"warnings":[{"fix":"Remove `formatterConfigPath` from your config. Ensure Prettier or Biome config file is present in the project root.","message":"v3.0.0 removed the `formatterConfigPath` option; formatters now use project config automatically.","severity":"breaking","affected_versions":">=2.0.0 <3.0.0"},{"fix":"Update type imports: the type output is now a string union derived from the icon file names. Adjust any icon name literals if they differ.","message":"v2.0.0 changed the TypeScript type output to use the generated array instead of duplicating symbols; may break type imports expecting an enum or union with specific style.","severity":"breaking","affected_versions":">=1.0.0 <2.0.0"},{"fix":"If you have multiple icon folders, wrap your single config in an array or use multiple separate config objects.","message":"v1.x used `inputDir` as the only required option; v2+ supports multiple configs via array. Single config still works, but array is preferred for multiple spritesheets.","severity":"deprecated","affected_versions":">=1.0.0 <2.0.0"},{"fix":"Manually delete `outputDir/sprite.svg` and `typesOutputFile` if you remove icons. Or implement a custom cleanup script.","message":"The plugin does NOT remove previous sprite.svg or types when input icons are deleted; stale references may remain.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use `import { iconsSpritesheet } from 'vite-plugin-icons-spritesheet'` and set `\"type\": \"module\"` in package.json or use .mjs file.","message":"Using CommonJS `require()` to import the plugin in a Vite config that uses ESM may fail. Ensure your `vite.config.js` uses ESM syntax or a .mjs extension.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Upgrade Vite to >=5.2.0: `npm install vite@latest` or adjust plugin to v2.x if Vite downgrade not possible.","cause":"Installed plugin version 3.x with an older Vite version (<5.2.0).","error":"Error: The plugin 'vite-plugin-icons-spritesheet' requires Vite >=5.2.0"},{"fix":"Install the package: `npm install -D vite-plugin-icons-spritesheet`. Verify it's in devDependencies.","cause":"Missing package installation or incorrect import path.","error":"Cannot find module 'vite-plugin-icons-spritesheet' or its corresponding type declarations."},{"fix":"Change `import iconsSpritesheet from ...` to `import { iconsSpritesheet } from ...`.","cause":"Using default import instead of named import.","error":"Module '\"vite-plugin-icons-spritesheet\"' has no exported member 'iconsSpritesheet'."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}