Registry / devops / svg-sprite-loader

svg-sprite-loader

library6.0.11jsnpmunverified

Webpack loader for creating SVG sprites, enabling inline SVG usage via <use> tags. Current stable version 6.0.11, with a release cadence of roughly 2-3 major versions per year. Key differentiators: automatic runtime injection, isomorphic support for node/browser, customizable runtime generators, and external sprite file extraction for CSS/HTML imports. Supports webpack 5 (v6+), webpack 4 (v5), and earlier versions. Maintained by JetBrains.

devops

npm install svg-sprite-loader

github ↗package ↗

INSTALL

IMPORT

SIG · SVG-SPRITE-LOADER

svg-sprite-loader

devopsjavascriptv6.0.11

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–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

default

✓ import icon from './icon.svg'

✗ const icon = require('./icon.svg')

ESM default import returns an object with id, viewBox, content (or url in extract mode).

symbolId

✓ import { symbolId } from 'svg-sprite-loader/runtime'

✗ import { symbolId } from 'svg-sprite-loader'

symbolId is a runtime export, not from the main package.

SpriteSymbol

✓ import SpriteSymbol from 'svg-sprite-loader/lib/sprite-symbol'

✗ const SpriteSymbol = require('svg-sprite-loader').SpriteSymbol

Internal class, not exposed in public API; use only if extending runtime.

Configures webpack to load SVG files as sprite symbols, using svgo for optimization. Imports return symbol objects usable with <use>.

// webpack.config.js const path = require('path'); module.exports = { mode: 'development', entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\.svg$/, use: [ { loader: 'svg-sprite-loader', options: { esModule: true } }, 'svgo-loader' ] } ] } }

Debug

Known issues

breakingIn v6.0.0, dropped support for webpack <5. Upgrade webpack to 5.x or stay on v5.x.

fix

Update webpack to version 5 or later. If using webpack 4, continue using v5.2.1.

affects: >=6.0.0

breakingIn v5.0.0, the context param passed to runtime generators was changed from compilation root to folder where SVG image is located. This may break custom generators.

fix

Update custom runtime generators to use the new context meaning.

affects: >=5.0.0

deprecatedruntimeCompat option is deprecated and will be removed in future versions.

fix

Use runtimeOptions instead.

affects: >=4.0.0

gotchaES module export is autoconfigured based on webpack version; manual esModule option may be needed for consistent behavior.

fix

Explicitly set esModule: true if using ESM imports, false for CommonJS.

affects: >=4.0.0

gotchaIn extract mode (extract: true), the returned object has a url field instead of content. Confirm runtime compatibility.

fix

Use object.url for external sprite file references.

affects: >=3.0.0

Errors

Common errors & fixes

Error: Module not found: Error: Can't resolve 'svg-sprite-loader'

Missing or incorrect installation of svg-sprite-loader

fix

Run 'npm install svg-sprite-loader --save-dev' or 'yarn add svg-sprite-loader -D'.

TypeError: Cannot read property 'replace' of undefined

The loader options object not provided, or symbolId function returns undefined

fix

Ensure options is an object; if using symbolId function, return a string.

Error: MultiCompiler was not fully processed: the output filesystem ...

Webpack 5 multi-configuration incompatibility with svg-sprite-loader v5 (fixed in v6)

fix

Upgrade to v6.0.0 or later, or adjust multi-config setup.

Upgrade

Version history

6.0.11latest on npm

Audit

Dependencies

webpackrequiredRequired as a loader dependency for webpack builds

svg-bakerrequiredUsed internally for SVG symbol extraction and sprite creation

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/JetBrains/svg-sprite-loader ↗

packagehttps://www.npmjs.com/package/svg-sprite-loader ↗