npmpackage.info

Gathering detailed insights and metrics for svg-sprite-loader

Other packages similar to svg-sprite-loader

@types/svg-sprite-loader

3.9.9

TypeScript definitions for svg-sprite-loader

nuxt-svg-sprite-loader

2.0.30

Nuxt.js module for svg-sprite-loader.

svg-classic-sprite-loader

0.2.5

Webpack loader for creating classic SVG sprites

external-svg-sprite-loader

7.3.0

A webpack loader and plugin that generate SVG sprites out of a collection of SVG files used in your JS and CSS files

Gathering detailed insights and metrics for svg-sprite-loader

svg-sprite-loader - 6.0.11 | npmpackage.info

svg-sprite-loader

Webpack loader for creating SVG sprites.

6.0.11

2,028

MIT

JavaScript

65,746,706 2.1

Installations

npm install svg-sprite-loader

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Min. Node Version

>=6

Node Version

14.15.3

NPM Version

7.11.1 Pull Requests

Open

18

Total

119

Closed

29

Merged

72

Issues

Open

130

Total

389

Closed

259

Releases

v6.0.0

Updated on Mar 13, 2021

v5.2.1

Updated on Dec 14, 2020

v5.1.1

Updated on Dec 05, 2020

v5.0.0

Updated on May 11, 2020

v4.3.0

Updated on May 10, 2020

v4.2.7

Updated on Apr 28, 2020

View All 84 releases

Languages

JavaScript

Shell

SCSS

JavaScript (98.53%)

Shell (1.27%)

SCSS (0.2%)

Developer

JetBrains

Download Statistics

Total Downloads

65,746,706

Last Day

35,153

Last Week

206,990

Last Month

936,570

Last Year

10,171,571

GitHub Statistics

MIT License

2,028 Stars

675 Commits

276 Forks

46 Watchers

18 Branches

1,237 Contributors

Updated on Jun 29, 2025

Maintainers

View All 1,237 Contributors

Package Meta Information

Latest Version

6.0.11

Package Id

svg-sprite-loader@6.0.11

Size

305.13 kB

NPM Version

7.11.1

Node Version

14.15.3

Published on

Oct 24, 2021

Total Downloads

Cumulative downloads

Total Downloads

65,746,706

Last Day

5.9%

35,153

Compared to previous day

Last Week

-1.8%

206,990

Compared to previous week

Last Month

8.5%

936,570

Compared to previous month

Last Year

-2%

10,171,571

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

SVG sprite loader

Webpack loader for creating SVG sprites.

:tada: 2.0 is out, please read the migration guide & overview.

:warning: For old v0.x versions see the README in the v0 branch.

Why it's cool
Installation
Configuration
- symbolId
- symbolRegExp
- esModule
- Runtime configuration
  - spriteModule
  - symbolModule
  - runtimeGenerator
  - runtimeCompat (deprecated)
  - runtimeOptions
- Extract configuration
Examples
Contributing guidelines
License
Credits

Why it's cool

Minimum initial configuration. Most of the options are configured automatically.
Runtime for browser. Sprites are rendered and injected in pages automatically, you just refer to images via <svg><use xlink:href="#id"></use></svg>.
Isomorphic runtime for node/browser. Can render sprites on server or in browser manually.
Customizable. Write/extend runtime module to implement custom sprite behaviour. Write/extend runtime generator to produce your own runtime, e.g. React component configured with imported symbol.
External sprite file is generated for images imported from css/scss/sass/less/styl/html (SVG stacking technique).

Installation

1npm install svg-sprite-loader -D
2# via yarn
3yarn add svg-sprite-loader -D

Configuration

1// webpack 1
2{
3  test: /\.svg$/,
4  loader: 'svg-sprite-loader',
5  query: { ... }
6}
7
8// webpack 1 multiple loaders
9{
10  test: /\.svg$/,
11  loaders: [
12    `svg-sprite-loader?${JSON.stringify({ ... })}`,
13    'svg-transform-loader',
14    'svgo-loader'
15  ]
16}
17
18// webpack >= 2
19{
20  test: /\.svg$/,
21  loader: 'svg-sprite-loader',
22  options: { ... }
23}
24
25// webpack >= 2 multiple loaders
26{
27  test: /\.svg$/,
28  use: [
29    { loader: 'svg-sprite-loader', options: { ... } },
30    'svg-transform-loader',
31    'svgo-loader'
32  ]
33}

`symbolId` (`string | function(path, query)`, default `[name]`)

How <symbol> id attribute should be named. All patterns from loader-utils#interpolateName are supported. Also can be a function which accepts 2 args - file path and query string and return symbol id:

1{
2  symbolId: filePath => path.basename(filePath)
3}

`symbolRegExp` (default `''`)

Passed to the symbolId interpolator to support the [N] pattern in the loader-utils name interpolator

`esModule` (default `true`, autoconfigured)

Generated export format:

when true loader will produce export default ....
when false the result is module.exports = ....

By default depends on used webpack version: true for webpack >= 2, false otherwise.

Runtime configuration

When you require an image, loader transforms it to SVG <symbol>, adds it to the special sprite storage and returns class instance that represents symbol. It contains id, viewBox and content (id, viewBox and url in extract mode) fields and can later be used for referencing the sprite image, e.g:

1import twitterLogo from './logos/twitter.svg';
2// twitterLogo === SpriteSymbol<id: string, viewBox: string, content: string>
3// Extract mode: SpriteSymbol<id: string, viewBox: string, url: string, toString: Function>
4
5const rendered = `
6<svg viewBox="${twitterLogo.viewBox}">
7  <use xlink:href="#${twitterLogo.id}" />
8</svg>`;

When browser event DOMContentLoaded is fired, sprite will be automatically rendered and injected in the document.body. If custom behaviour is needed (e.g. a different mounting target) default sprite module could be overridden via spriteModule option. Check example below.

`spriteModule` (autoconfigured)

Path to sprite module that will be compiled and executed at runtime. By default it depends on target webpack config option:

svg-sprite-loader/runtime/browser-sprite.build for 'web' target.
svg-sprite-loader/runtime/sprite.build for other targets.

If you need custom behavior, use this option to specify a path of your sprite implementation module. Path will be resolved relative to the current webpack build folder, e.g. utils/sprite.js placed in current project dir should be written as ./utils/sprite.

Example of sprite with custom mounting target (copypasted from browser-sprite):

1import BrowserSprite from 'svg-baker-runtime/src/browser-sprite';
2import domready from 'domready';
3
4const sprite = new BrowserSprite();
5domready(() => sprite.mount('#my-custom-mounting-target'));
6
7export default sprite; // don't forget to export!

It's highly recommended to extend default sprite classes:

`symbolModule` (autoconfigured)

Same as spriteModule, but for sprite symbol. By default also depends on target webpack config option:

svg-baker-runtime/browser-symbol for 'web' target.
svg-baker-runtime/symbol for other targets.

`runtimeGenerator` (default generator)

Path to node.js script that generates client runtime. Use this option if you need to produce your own runtime, e.g. React component configured with imported symbol. Example.

`runtimeCompat` (default `false`, deprecated)

Should runtime be compatible with earlier v0.x loader versions. This option will be removed in the next major version release.

`runtimeOptions`

Arbitrary data passed to runtime generator. Reserved for future use when other runtime generators will be created.

Extract configuration

In the extract mode loader should be configured with plugin, otherwise an error is thrown. Example:

1// webpack.config.js
2const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
3
4...
5
6{
7  plugins: [
8    new SpriteLoaderPlugin()
9  ]
10}

`extract` (default `false`, autoconfigured)

Switches loader to the extract mode. Enabled automatically for images imported from css/scss/sass/less/styl/html files.

`spriteFilename` (type `string|Function<string>`,default `sprite.svg`)

Filename of extracted sprite. Multiple sprites can be generated by specifying different loader rules restricted with include option or by providing custom function which recieves SVG file absolute path, e.g.:

1{
2  test: /\.svg$/,
3  loader: 'svg-sprite-loader',
4  options: {
5    extract: true,
6    spriteFilename: svgPath => `sprite${svgPath.substr(-4)}`
7  }
8}

[hash] in sprite filename will be replaced by it's content hash. It is also possible to generate sprite for each chunk by using [chunkname] pattern in spriteFilename option. This is experimental feature, use it with caution!

`publicPath` (type: `string`, default: `__webpack_public_path__`)

Custom public path for sprite file.

1{
2  test: /\.svg$/,
3  loader: 'svg-sprite-loader',
4  options: {
5    extract: true,
6    publicPath: '/'
7  }
8}

`outputPath` (type: `string`, default: null`)

Custom output path for sprite file. By default it will use publicPath. This param is useful if you want to store sprite is a directory with a custom http access.

1{
2  test: /\.svg$/,
3  loader: 'svg-sprite-loader',
4  options: {
5    extract: true,
6    outputPath: 'custom-dir/sprites/'
7    publicPath: 'sprites/'
8  }
9}

Plain sprite

You can render plain sprite in extract mode without styles and usages. Pass plainSprite: true option to plugin constructor:

1{
2  plugins: [
3    new SpriteLoaderPlugin({ plainSprite: true })
4  ]
5}

Sprite attributes

Sprite <svg> tag attributes can be specified via spriteAttrs plugin option:

1{
2  plugins: [
3    new SpriteLoaderPlugin({
4      plainSprite: true,
5      spriteAttrs: {
6        id: 'my-custom-sprite-id'
7      }
8    })
9  ]
10}

Examples

See examples folder.

Contributing guidelines

See CONTRIBUTING.md.

License

See LICENSE

Credits

Huge thanks for all this people.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

3

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

136 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-p28h-cc7q-c4fg
Warn: Project is vulnerable to: GHSA-hr2v-3952-633q
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2
Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
Warn: Project is vulnerable to: MAL-2023-462
Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c
Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq
Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm
Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-282f-qqgm-c34q
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3
Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7
Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-8w4h-3cm3-2pm2
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9
Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
Warn: Project is vulnerable to: GHSA-jv35-xqg7-f92r
Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-42xw-2xvc-qx8m
Warn: Project is vulnerable to: GHSA-4w2v-q235-vp99
Warn: Project is vulnerable to: GHSA-cph5-m8f7-6c5x
Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-pp7h-53gx-mx7r
Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h
Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
Warn: Project is vulnerable to: GHSA-2j2x-2gpw-g8fm
Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-62cx-5xj4-wfm4
Warn: Project is vulnerable to: GHSA-pr45-cg4x-ff4m
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6
Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9
Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
Warn: Project is vulnerable to: GHSA-8g7p-74h8-hg48
Warn: Project is vulnerable to: GHSA-pc5p-h8pf-mvwp
Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm
Warn: Project is vulnerable to: GHSA-2m96-9w4j-wgv7
Warn: Project is vulnerable to: GHSA-h726-x36v-rx45
Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
Warn: Project is vulnerable to: GHSA-446m-mv8f-q348
Warn: Project is vulnerable to: GHSA-8hfj-j24r-96c4
Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g
Warn: Project is vulnerable to: GHSA-w9mr-4mfr-499f
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
Warn: Project is vulnerable to: GHSA-7xcx-6wjh-7xp2
Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
Warn: Project is vulnerable to: GHSA-xc7v-wxcw-j472
Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3

Score

2.1

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to svg-sprite-loader

Other packages similar to svg-sprite-loader

svg-sprite-loader

Installations

Developer Guide

No

CommonJS

>=6

14.15.3

7.11.1

Pull Requests

18

119

29

72

Issues

130

389

259

Releases

Languages

Developer

JetBrains

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

65,746,706

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

SVG sprite loader

Table of contents

Why it's cool

Installation

Configuration

symbolId (string | function(path, query), default [name])

symbolRegExp (default '')

esModule (default true, autoconfigured)

Runtime configuration

spriteModule (autoconfigured)

symbolModule (autoconfigured)

runtimeGenerator (default generator)

runtimeCompat (default false, deprecated)

runtimeOptions

Extract configuration

extract (default false, autoconfigured)

spriteFilename (type string|Function<string>,default sprite.svg)

publicPath (type: string, default: __webpack_public_path__)

outputPath (type: string, default: null`)

Plain sprite

Sprite attributes

Examples

Contributing guidelines

License

Credits

10

10

3

0

0

0

0

0

0

0

2.1

/10

`symbolId` (`string | function(path, query)`, default `[name]`)

`symbolRegExp` (default `''`)

`esModule` (default `true`, autoconfigured)

`spriteModule` (autoconfigured)

`symbolModule` (autoconfigured)

`runtimeGenerator` (default generator)

`runtimeCompat` (default `false`, deprecated)

`runtimeOptions`

`extract` (default `false`, autoconfigured)

`spriteFilename` (type `string|Function<string>`,default `sprite.svg`)

`publicPath` (type: `string`, default: `__webpack_public_path__`)

`outputPath` (type: `string`, default: null`)