Merge pull request #2 from yoriiis/update-config

Update the svgo and svgstore default configuration

.markdownlint.yml

@@ -1,2 +1,3 @@
 MD013: false     # line-length
+MD024: false     # Multiple headers with the same content
 MD036: false     # no-emphasis-as-heading

CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## 2.0.1
+
+### Updates
+
+- Remove the default `svgo` config to avoid conflicts when merging config (svgo config object array is malformed).
+- Remove the default `svgstore` config to allow user to override them (svgAttrs cannot be overriden otherwise).
+- Move the configuration of these package into the webpack configuration for example purpose and to keep the TUs up to date.
+
 ## 2.0.0
 
 ### Updates

README.md

@@ -1,12 +1,12 @@
 # SvgChunkWebpackPlugin
 
-![SvgChunkWebpackPlugin](https://img.shields.io/badge/svg--chunk--webpack--plugin-v2.0.0-29008a.svg?style=for-the-badge) ![GitHub Workflow Status (branch)](https://img.shields.io/github/workflow/status/yoriiis/svg-chunk-webpack-plugin/Build/master?style=for-the-badge) [![Coverage Status](https://img.shields.io/coveralls/github/yoriiis/svg-chunk-webpack-plugin?style=for-the-badge)](https://coveralls.io/github/yoriiis/svg-chunk-webpack-plugin?branch=master) ![Node.js](https://img.shields.io/node/v/svg-chunk-webpack-plugin?style=for-the-badge)
+![SvgChunkWebpackPlugin](https://img.shields.io/badge/svg--chunk--webpack--plugin-v2.0.1-29008a.svg?style=for-the-badge) ![GitHub Workflow Status (branch)](https://img.shields.io/github/workflow/status/yoriiis/svg-chunk-webpack-plugin/Build/master?style=for-the-badge) [![Coverage Status](https://img.shields.io/coveralls/github/yoriiis/svg-chunk-webpack-plugin?style=for-the-badge)](https://coveralls.io/github/yoriiis/svg-chunk-webpack-plugin?branch=master) ![Node.js](https://img.shields.io/node/v/svg-chunk-webpack-plugin?style=for-the-badge)
 
 > Generate SVG sprites according to entrypoint dependencies. Each page only imports its own svgs, wrapped as a sprite and optimized by svgo.
 
 The SvgChunkWebpackPlugin 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](https://github.com/svg/svgo) package with the optimized settings, to generates clean and optimized SVG sprites.
+The plugin includes the popular [svgo](https://github.com/svg/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.
 
@@ -104,11 +104,11 @@ Finally, use the SVG with the `<use>` tag, like the following example. Replace `
 
 ## Using a configuration
 
-You can pass configuration options to SvgChunkWebpackPlugin to overrides default settings. Allowed values are as follows:
+You can pass configuration options to SvgChunkWebpackPlugin to overrides default settings. The transmitted parameters will be merged with the default parameters listed above. Allowed values are as follows:
 
 ### `filename`
 
-`String`
+`String = '[name].svg'`
 
 Tells the plugin whether to personalize the default sprite filename. The placeholder `[name]` is automatically replaced by entrypoints names.
 
@@ -122,11 +122,11 @@ The `filename` parameter is compatible with Webpack caching placeholders, see th
 
 ### `svgoConfig`
 
-`Object`
+`Object = {}`
 
-Tells the plugin whether to personalize the default settings for svgo. Update the settings according to your needs from the plugins available on the [svgo](https://github.com/svg/svgo) documentation.
+Tells the plugin whether to personalize the plugins for svgo. Update the parameters according to your needs from the plugins list available on the [svgo](https://github.com/svg/svgo#what-it-can-do) documentation.
 
-> 💡 The `onlyMatchedOnce` property allows to replace all occurences of CSS classes in HTML attributes, not only selectors that match once.
+> 💡 The disabled `onlyMatchedOnce` property allows to replace all occurences of CSS classes in HTML attributes, not only selectors that match once. The disabled `removeViewBox` property allows to keep viewBow attributes.
 
 ```javascript
 new SvgChunkWebpackPlugin({
@@ -136,6 +136,9 @@ new SvgChunkWebpackPlugin({
         inlineStyles: {
           onlyMatchedOnce: false
         }
+      },
+      {
+        removeViewBox: false
       }
     ]
   }
@@ -144,18 +147,15 @@ new SvgChunkWebpackPlugin({
 
 ### `svgstoreConfig`
 
-`Object`
+`Object = { cleanDefs: false, cleanSymbols: false, inline: true }`
 
-SVG sprites are built using the svgstore package. Tells the plugin whether to personalize the default settings for [svgstore](https://github.com/svgstore/svgstore#options).
+SVG sprites are built using the svgstore package. Update the parameters according to your needs from the options list available on the [svgstore](https://github.com/svgstore/svgstore#options) documentation.
 
-> 💡 Sprites already contain minimal inline styles to hide the sprite on the page to keep full support with all SVG features. To avoid LinearGradient conflicts, avoid the `display: none` property which break SVG defs.
+> 💡 To avoid LinearGradient conflicts, avoid the `display: none` property which breaks SVG definitions.
 
 ```javascript
 new SvgChunkWebpackPlugin({
   svgstoreConfig: {
-    cleanDefs: false,
-    cleanSymbols: false,
-    inline: true,
     svgAttrs: {
       'aria-hidden': true,
       style: 'position: absolute; width: 0; height: 0; overflow: hidden;'
@@ -172,7 +172,7 @@ Tells the plugin whether to generate the `sprites-manifest.json`. The JSON file
 
 ```javascript
 new SvgChunkWebpackPlugin({
-  generateSpritesManifest: false
+  generateSpritesManifest: true
 });
 ```
 
@@ -184,7 +184,7 @@ Tells the plugin whether to generate the `sprites-preview.html`. The HTML previe
 
 ```javascript
 new SvgChunkWebpackPlugin({
-  generateSpritesManifest: false
+  generateSpritesManifest: true
 });
 ```
 

example/webpack.config.js

@@ -38,7 +38,25 @@ module.exports = (env, argv) => {
 			new SvgChunkWebpackPlugin({
 				filename: `sprites/[name]${isProduction ? '.[contenthash]' : ''}.svg`,
 				generateSpritesManifest: true,
-				generateSpritesPreview: true
+				generateSpritesPreview: true,
+				svgstoreConfig: {
+					svgAttrs: {
+						'aria-hidden': true,
+						style: 'position: absolute; width: 0; height: 0; overflow: hidden;'
+					}
+				},
+				svgoConfig: {
+					plugins: [
+						{
+							inlineStyles: {
+								onlyMatchedOnce: false
+							}
+						},
+						{
+							removeViewBox: false
+						}
+					]
+				}
 			})
 		],
 		stats: {

lib/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * @name SvgChunkWebpackPlugin
- * @version 2.0.0
+ * @version 2.0.1
  * @author: Yoriiis aka Joris DANIEL <joris.daniel@gmail.com>
  * @copyright 2021 Joris DANIEL
  **/

lib/index.js

@@ -2,7 +2,7 @@
 /**
  * @license MIT
  * @name SvgChunkWebpackPlugin
- * @version 2.0.0
+ * @version 2.0.1
  * @author: Yoriiis aka Joris DANIEL <joris.daniel@gmail.com>
  * @copyright 2021 Joris DANIEL
  **/
@@ -48,21 +48,9 @@ class SvgSprite {
             svgstoreConfig: {
                 cleanDefs: false,
                 cleanSymbols: false,
-                inline: true,
-                svgAttrs: {
-                    'aria-hidden': true,
-                    style: 'position: absolute; width: 0; height: 0; overflow: hidden;'
-                }
-            },
-            svgoConfig: {
-                plugins: [
-                    {
-                        inlineStyles: {
-                            onlyMatchedOnce: false
-                        }
-                    }
-                ]
+                inline: true
             },
+            svgoConfig: {},
             generateSpritesManifest: false,
             generateSpritesPreview: false
         };

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svg-chunk-webpack-plugin",
-	"version": "2.0.0",
+	"version": "2.0.1",
 	"description": "Generate SVG sprites according to entrypoint dependencies. Each page only imports its own svgs, wrapped as a sprite and optimized by svgo",
 	"keywords": [
 		"svg",

src/__tests__/index.test.js

@@ -105,7 +105,25 @@ const svgsSprite = [
 ];
 const options = {
 	generateSpritesManifest: true,
-	generateSpritesPreview: true
+	generateSpritesPreview: true,
+	svgstoreConfig: {
+		svgAttrs: {
+			'aria-hidden': true,
+			style: 'position: absolute; width: 0; height: 0; overflow: hidden;'
+		}
+	},
+	svgoConfig: {
+		plugins: [
+			{
+				inlineStyles: {
+					onlyMatchedOnce: false
+				}
+			},
+			{
+				removeViewBox: false
+			}
+		]
+	}
 };
 
 const getInstance = () => new SvgChunkWebpackPlugin(options);
@@ -164,7 +182,7 @@ afterEach(() => {
 
 describe('SvgChunkWebpackPlugin constructor', () => {
 	it('Should initialize the constructor with custom options', () => {
-		expect(svgChunkWebpackPlugin.options).toMatchObject({
+		expect(svgChunkWebpackPlugin.options).toStrictEqual({
 			filename: '[name].svg',
 			svgstoreConfig: {
 				cleanDefs: false,
@@ -181,6 +199,9 @@ describe('SvgChunkWebpackPlugin constructor', () => {
 						inlineStyles: {
 							onlyMatchedOnce: false
 						}
+					},
+					{
+						removeViewBox: false
 					}
 				]
 			},
@@ -195,25 +216,14 @@ describe('SvgChunkWebpackPlugin constructor', () => {
 
 	it('Should initialize the constructor with default options', () => {
 		const instance = new SvgChunkWebpackPlugin();
-		expect(instance.options).toMatchObject({
+		expect(instance.options).toStrictEqual({
+			filename: '[name].svg',
 			svgstoreConfig: {
 				cleanDefs: false,
 				cleanSymbols: false,
-				inline: true,
-				svgAttrs: {
-					'aria-hidden': true,
-					style: 'position: absolute; width: 0; height: 0; overflow: hidden;'
-				}
-			},
-			svgoConfig: {
-				plugins: [
-					{
-						inlineStyles: {
-							onlyMatchedOnce: false
-						}
-					}
-				]
+				inline: true
 			},
+			svgoConfig: {},
 			generateSpritesManifest: false,
 			generateSpritesPreview: false
 		});

src/index.ts

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * @name SvgChunkWebpackPlugin
- * @version 2.0.0
+ * @version 2.0.1
  * @author: Yoriiis aka Joris DANIEL <joris.daniel@gmail.com>
  * @copyright 2021 Joris DANIEL
  **/
@@ -52,21 +52,9 @@ class SvgSprite {
 			svgstoreConfig: {
 				cleanDefs: false,
 				cleanSymbols: false,
-				inline: true,
-				svgAttrs: {
-					'aria-hidden': true,
-					style: 'position: absolute; width: 0; height: 0; overflow: hidden;'
-				}
-			},
-			svgoConfig: {
-				plugins: [
-					{
-						inlineStyles: {
-							onlyMatchedOnce: false
-						}
-					}
-				]
+				inline: true
 			},
+			svgoConfig: {},
 			generateSpritesManifest: false,
 			generateSpritesPreview: false
 		};