Update the SVG sprite creation to use SVGO v2 (#906)

Author: scriptex

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "webpack-mpa-ts",
-	"version": "3.7.1",
+	"version": "3.8.0",
 	"description": "Multi page app setup with webpack",
 	"scripts": {
 		"build": "webpack --mode=production",
@@ -74,6 +74,7 @@
 		"spritesh": "1.2.1",
 		"stylelint": "13.13.1",
 		"stylelint-config-recommended": "5.0.0",
+		"svgo": "2.3.0",
 		"ts-loader": "9.2.2",
 		"tslint": "6.1.3",
 		"tslint-config-prettier": "1.18.0",

svgo.config.js

@@ -0,0 +1,77 @@
+// @ts-nocheck
+
+const { extendDefaultPlugins } = require('svgo');
+
+module.exports = {
+	plugins: extendDefaultPlugins([
+		{
+			name: 'cleanupAttrs',
+			active: true
+		},
+		{
+			name: 'removeDoctype',
+			active: true
+		},
+		{
+			name: 'removeXMLProcInst',
+			active: true
+		},
+		{
+			name: 'removeComments',
+			active: true
+		},
+		{
+			name: 'removeMetadata',
+			active: true
+		},
+		{
+			name: 'removeUselessDefs',
+			active: true
+		},
+		{
+			name: 'removeEditorsNSData',
+			active: true
+		},
+		{
+			name: 'removeEmptyAttrs',
+			active: true
+		},
+		{
+			name: 'removeEmptyText',
+			active: true
+		},
+		{
+			name: 'removeEmptyContainers',
+			active: true
+		},
+		{
+			name: 'cleanupEnableBackground',
+			active: true
+		},
+		{
+			name: 'convertStyleToAttrs',
+			active: true
+		},
+		{
+			name: 'removeUselessStrokeAndFill',
+			active: true
+		},
+		{
+			name: 'cleanupIDs',
+			active: true,
+			params: {
+				prefix: {
+					toString() {
+						this.counter = this.counter || 0;
+
+						return `svgo-viewbox-id-${this.counter++}`;
+					}
+				}
+			}
+		},
+		{
+			name: 'removeDimensions',
+			active: true
+		}
+	])
+};

webpack.config.js

@@ -30,27 +30,6 @@ if (server) {
 	exec('php index.php > index.html');
 }
 
-const svgoConfig = {
-	plugins: [
-		{ name: 'cleanupAttrs', active: true },
-		{ name: 'removeDoctype', active: true },
-		{ name: 'removeXMLProcInst', active: true },
-		{ name: 'removeComments', active: true },
-		{ name: 'removeMetadata', active: true },
-		{ name: 'removeUselessDefs', active: true },
-		{ name: 'removeEditorsNSData', active: true },
-		{ name: 'removeEmptyAttrs', active: true },
-		{ name: 'removeHiddenElems', active: false },
-		{ name: 'removeEmptyText', active: true },
-		{ name: 'removeEmptyContainers', active: true },
-		{ name: 'cleanupEnableBackground', active: true },
-		{ name: 'removeViewBox', active: false },
-		{ name: 'cleanupIDs', active: false },
-		{ name: 'convertStyleToAttrs', active: true },
-		{ name: 'removeUselessStrokeAndFill', active: true }
-	]
-};
-
 const postcssOptions = {
 	plugins: [postcssURL({ url: 'rebase' }), autoprefixer(), postcssUtilities, postcssEasyImport, postcssFlexbugsFixed],
 	...sourceMap
@@ -124,7 +103,7 @@ const shellScripts = [];
 const svgs = readdirSync('./assets/images/svg').filter(svg => svg[0] !== '.');
 
 if (svgs.length) {
-	shellScripts.push('svgo -f assets/images/svg --config=' + JSON.stringify(svgoConfig));
+	shellScripts.push('svgo -f assets/images/svg');
 
 	shellScripts.push('spritesh -q -i assets/images/svg -o ./assets/dist/sprite.svg -p svg-');
 }