Registry / devops / svg-sprite-html-webpack

svg-sprite-html-webpack

library2.4.1jsnpmunverified

Webpack loader and plugin that generates an SVG sprite with <symbol> elements and injects it directly into the HTML output from html-webpack-plugin. Version 2.4.1 supports Webpack v3, v4, and v5 (added by contributors) and html-webpack-plugin v2, v3, and v5. The package is no longer actively maintained by the original author but has community upkeep. Unlike runtime SVG sprite solutions, this avoids extra HTTP requests by embedding the sprite at compile time. SVG files imported in JavaScript or specified via includeFiles are automatically optimized and deduplicated based on content.

devops

npm install svg-sprite-html-webpack

github ↗package ↗

INSTALL

IMPORT

SIG · SVG-SPRITE-HTML-WE

svg-sprite-html-webpack

devopsjavascriptv2.4.1

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.

SvgSpriteHtmlWebpackPlugin

✓ const SvgSpriteHtmlWebpackPlugin = require('svg-sprite-html-webpack');

✗ import SvgSpriteHtmlWebpackPlugin from 'svg-sprite-html-webpack';

Package exports a single class via module.exports; ESM import only works with default import if using bundler that supports interop, but CJS require is safest.

getLoader

✓ use: SvgSpriteHtmlWebpackPlugin.getLoader()

✗ use: 'svg-sprite-html-webpack'

Must call the static getLoader() method to obtain the loader configuration object.

svg import (e.g., import checkmark from './icon.svg')

✓ import checkmark from './icons/checkmark.svg';

✗ const checkmark = require('./icons/checkmark.svg');

When using the loader, SVG files export the symbol ID as a string. If using CommonJS require, the value is the default export of the loader module.

HtmlWebpackPlugin

✓ const HtmlWebpackPlugin = require('html-webpack-plugin');

HtmlWebpackPlugin is a separate peer dependency and must be required before SvgSpriteHtmlWebpackPlugin in the plugins array.

Minimal webpack config that processes SVG files via the loader and injects the sprite into the HTML page via the plugin.

Debug

Known issues

gotchaSince Webpack 4, SvgSpriteHtmlWebpackPlugin must be declared after HtmlWebpackPlugin in the plugins array.

fix

Ensure new SvgSpriteHtmlWebpackPlugin() is placed after new HtmlWebpackPlugin() in the plugins array.

affects: >=0.0.0

breakingIn Webpack 5 and html-webpack-plugin v5, there may be compatibility issues; the plugin is not officially maintained for v5 after v2.4.0.

fix

If using Webpack 5, test thoroughly. Consider alternative plugins like 'svg-sprite-loader' or 'svg-inline-loader' if issues arise.

affects: >=2.4.0

deprecatedThe package is no longer actively maintained by the original author; functionality is provided by community contributions.

fix

For long-term projects, evaluate alternative solutions with active maintenance.

affects: >=2.4.1

gotchaWhen using includeFiles option, files with identical content are deduplicated (only one injected even if different filenames).

fix

Use generateSymbolId if you need unique symbols for duplicate content files.

affects: >=0.0.0

breakingThe loader (getLoader()) must be used in the module rules; using the package as a plain loader string will fail.

fix

Always call SvgSpriteHtmlWebpackPlugin.getLoader() to get the loader configuration.

affects: >=0.0.0

Errors

Common errors & fixes

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

Package not installed or missing from node_modules.

fix

Run 'npm install svg-sprite-html-webpack --save-dev' to install the package.

Error: The plugin 'SvgSpriteHtmlWebpackPlugin' must be placed after 'HtmlWebpackPlugin' in plugins array

Plugin order incorrect in webpack config.

fix

Reorder plugins so HtmlWebpackPlugin comes before SvgSpriteHtmlWebpackPlugin.

TypeError: SvgSpriteHtmlWebpackPlugin.getLoader is not a function

Incorrect import; likely using default import of the class instead of the exported object.

fix

Use 'const SvgSpriteHtmlWebpackPlugin = require("svg-sprite-html-webpack");' correctly.

Upgrade

Version history

2.4.1latest on npm

Audit

Dependencies

html-webpack-pluginoptionalrequired peer dependency to inject the sprite into HTML output

webpackoptionalrequired peer dependency as it is a webpack loader/plugin

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/Epimodev/svg-sprite-html-webpack ↗

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