svg-sprites/docs/en

Documentation

Choose one exact mode guide for setup. The guides are standalone documents and can also be used unchanged by AI skills.

The common format for JSON, JavaScript, and TypeScript config files is described in the configuration guide.

Quick Start Guides

Project	Exact mode	Guide
Static HTML or custom publishing	standalone	Bare standalone
Vanilla + Vite	standalone@vite	Standalone + Vite
Vanilla + Webpack 5	standalone@webpack	Standalone + Webpack
React + Vite	react@vite	React + Vite
React + Webpack 5	react@webpack	React + Webpack
Vue + Vite	vue@vite	Vue + Vite
Vue + Webpack	vue@webpack	Vue + Webpack
Nuxt + Vite	nuxt@vite	Nuxt + Vite
Nuxt + Webpack	nuxt@webpack	Nuxt + Webpack
Svelte + Vite	svelte@vite	Svelte + Vite
Svelte + Webpack	svelte@webpack	Svelte + Webpack
SvelteKit + Vite	sveltekit@vite	SvelteKit + Vite
Angular application builder	angular@application	Angular application builder
Angular + Webpack	angular@webpack	Angular + Webpack
Astro + Vite	astro@vite	Astro + Vite
Solid + Vite	solid@vite	Solid + Vite
Solid + Webpack	solid@webpack	Solid + Webpack
SolidStart + Vite	solid-start@vite	SolidStart + Vite
Preact + Vite	preact@vite	Preact + Vite
Preact + Webpack	preact@webpack	Preact + Webpack
Qwik + Vite	qwik@vite	Qwik + Vite
Lit + Vite	lit@vite	Lit + Vite
Lit + Webpack	lit@webpack	Lit + Webpack
Alpine.js + Vite	alpine@vite	Alpine.js + Vite
Alpine.js + Webpack	alpine@webpack	Alpine.js + Webpack
Next.js App Router + Turbopack	next@app/turbopack	App Router + Turbopack
Next.js App Router + Webpack	next@app/webpack	App Router + Webpack
Next.js Pages Router + Turbopack	next@pages/turbopack	Pages Router + Turbopack
Next.js Pages Router + Webpack	next@pages/webpack	Pages Router + Webpack

Every guide follows the same order:

1. Generate the sprite through npx without adding the package to the project.
2. Use the sprite in the application.
3. Optionally add the Viewer for debugging and previews.

Reference

• Configuration
• Technical reference
• Programmatic API