Gathering detailed insights and metrics for svg-chunk-webpack-plugin
Gathering detailed insights and metrics for svg-chunk-webpack-plugin
npm install svg-chunk-webpack-plugin
Typescript
Module System
Min. Node Version
Node Version
NPM Version
62
Supply Chain
69
Quality
76.9
Maintenance
100
Vulnerability
99.6
License
JavaScript (65.85%)
TypeScript (34.15%)
Total Downloads
110,580
Last Day
263
Last Week
1,219
Last Month
4,076
Last Year
69,781
20 Stars
195 Commits
2 Forks
3 Watching
1 Branches
3 Contributors
Latest Version
7.0.0
Package Id
svg-chunk-webpack-plugin@7.0.0
Unpacked Size
37.13 kB
Size
9.97 kB
File Count
15
NPM Version
8.19.4
Node Version
16.20.2
Publised On
18 Nov 2024
Cumulative downloads
Total Downloads
Last day
18.5%
263
Compared to previous day
Last week
-2.6%
1,219
Compared to previous week
Last month
-47.7%
4,076
Compared to previous month
Last year
159%
69,781
Compared to previous year
4
1
The svg-chunk-webpack-plugin
creates optimized SVG sprites, according to Webpack's entrypoints. Each sprite contains only the SVG dependencies listed on its entrypoints to improved code splitting, even on SVG files.
The plugin includes the popular SVGO package to generates clean and optimized SVG sprites.
Code splitting is the key to deliver files without any content that is unused by the pages. It already exists for CSS, Javascript and now for SVG files with this plugin.
On multiple page application, each pages must includes only its necessary dependencies. In other words, it must include only the SVG files imported by its entrypoint and all its dependencies.
With reusable components, SVGs are often duplicated on all the project. Now, you can create a global SVG library and every Javascript files can easily import any SVG from this library. Entrypoint dependencies are automatically updated, thanks to the Webpack compilation.
When you work with SVGs exported by design softwares, like Sketch or Illustrator, their source code is never optimized and often contains comments, CSS classes which can create conflicts between them. The plugin automatically cleans all SVGs before creating the sprite.
The plugin works without configuration with already the optimized settings. For advanced usage, see the section using configuration.
The plugin is available as a package with the name of svg-chunk-webpack-plugin
on npm and Github.
1npm install svg-chunk-webpack-plugin --save-dev
1yarn add svg-chunk-webpack-plugin --dev
Warning
svg-chunk-webpack-plugin@5
is ESM only.Note Minimum supported
Node.js
version is16.20.0
and Webpack>=5.10.3
.
The project includes a minimalist example in the ./example
directory. Run the npm run build:example
command to execute the Webpack example and see the plugin's implementation in action.
The plugin will generate one SVG sprite for each entrypoints. Sprites are built in the output path directory with all the other assets. Each sprite filename is composed with its entrypoint name (in the example below, that would be home.svg
).
First, let's add the loader and the plugin to the Webpack configuration.
Warning The loader and the plugin need to works together.
webpack.config.js
1import SvgChunkWebpackPlugin from 'svg-chunk-webpack-plugin'; 2 3export default { 4 module: { 5 rules: [ 6 { 7 test: /\.svg$/, 8 use: [ 9 { 10 loader: SvgChunkWebpackPlugin.loader 11 } 12 ] 13 } 14 ] 15 }, 16 plugins: [new SvgChunkWebpackPlugin()] 17};
Note
For more flexibility and better performance, inline SVG files are better. Fewer HTTP requests, CSS properties to change the style, no flickering during the page load.
Then, include the sprite in the wanted pages (we use Twig in the following example).
home.html.twig
1{{ include 'home.svg' }}
Finally, use the SVG with the <use>
tag, like the following example. Replace <svg_name>
by the SVG name (without the extension).
home.html.twig
1<svg> 2 <use href="#<svg_name>"></use> 3</svg>
The loader and the plugin accepts configuration to override the default behavior.
The loader configuration allow to personalize the SVGO configuration. SVGO optimization is executed during the loader process to optimize build performance.
configFile
Type:
1type configFile = string | boolean;
Default: path.resolve(opts.root, 'svgo.config.js')
Tells the loader whether to load the custom SVGO configuration. Custom configuration can be disabled with configFile: false
.
webpack.config.js
1export default { 2 module: { 3 rules: [ 4 { 5 test: /\.svg$/, 6 loader: SvgChunkWebpackPlugin.loader, 7 options: { 8 configFile: './path/svgo.config.js' 9 } 10 } 11 ] 12 } 13};
SVGO have a default preset to optimize SVG files. See how to configure svgo for details.
svgo.config.js
1export default { 2 multipass: true, 3 plugins: [ 4 { 5 name: 'preset-default', 6 params: { 7 overrides: { 8 inlineStyles: { 9 onlyMatchedOnce: false 10 }, 11 removeViewBox: false 12 } 13 } 14 }, 15 { 16 name: 'convertStyleToAttrs' 17 } 18 ] 19};
The plugin configuration allow to personalize sprite settings.
filename
Type:
1type filename = string;
Default: '[name].svg'
Tells the plugin whether to personalize the default sprite filename. The placeholder [name]
is automatically replaced by entrypoints names.
webpack.config.js
1export default { 2 plugins: [ 3 new SvgChunkWebpackPlugin({ 4 filename: '[name].svg' 5 }) 6 ] 7};
Note The
filename
parameter is compatible with Webpack caching placeholders, see the section caching.
svgstoreConfig
Type:
1type svgstoreConfig = object;
Default: { cleanDefs: false, cleanSymbols: false, inline: true }
SVG sprites are built using the svgstore
package. Update the parameters according to your needs from the options list available on the svgstore documentation.
webpack.config.js
1export default { 2 plugins: [ 3 new SvgChunkWebpackPlugin({ 4 svgstoreConfig: { 5 svgAttrs: { 6 'aria-hidden': true, 7 style: 'position: absolute; width: 0; height: 0; overflow: hidden;' 8 } 9 } 10 }) 11 ] 12};
Note To avoid LinearGradient conflicts, avoid the
display: none
property which breaks SVG definitions.
generateSpritesManifest
Type:
1type generateSpritesManifest = boolean;
Default: false
Tells the plugin whether to generate the sprites-manifest.json
. The JSON file contains the list of all SVG included by entrypoints.
webpack.config.js
1export default { 2 plugins: [ 3 new SvgChunkWebpackPlugin({ 4 generateSpritesManifest: true 5 }) 6 ] 7};
generateSpritesPreview
Type:
1type generateSpritesPreview = boolean;
Default: false
Tells the plugin whether to generate the sprites-preview.html
. The HTML preview contains a display list of all SVG included by entrypoints with the SVG overviews and the names. See the sprites preview of the example.
webpack.config.js
1export default { 2 plugins: [ 3 new SvgChunkWebpackPlugin({ 4 generateSpritesPreview: true 5 }) 6 ] 7};
With webpack caching, several placeholders are available depending on your needs. With SVG inlined in the page, this option is not useful.
Note
The
[contenthash]
placeholder is the best option because it depends on the sprite content. Cache placeholders are expensive in build performance, use it only in production mode.
[contenthash]
The [contenthash]
placeholder will add a unique hash based on the content of the sprite. When the sprite's content changes, the hash will change as well.
webpack.config.js
1export default { 2 plugins: [ 3 new SvgChunkWebpackPlugin({ 4 filename: '[name].[contenthash].svg' 5 }) 6 ] 7};
[fullhash]
The [fullhash]
placeholder will add a unique hash generated for every build. When the compilation build is updated, the hash will change as well.
webpack.config.js
1export default { 2 plugins: [ 3 new SvgChunkWebpackPlugin({ 4 filename: '[name].[fullhash].svg' 5 }) 6 ] 7};
svg-chunk-webpack-plugin
is licensed under the MIT License.
Created with ♥ by @yoriiis.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
7 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 5
Reason
5 existing vulnerabilities detected
Details
Reason
branch protection is not maximal on development and all release branches
Details
Reason
Found 1/15 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
project is not fuzzed
Details
Reason
security policy file not detected
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2025-01-13
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