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

Author: scriptex

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "webpack-mpa-next",
-	"version": "3.7.1",
+	"version": "3.8.0",
 	"description": "Multi page app setup with webpack",
 	"scripts": {
 		"build": "webpack --mode=production",
@@ -38,6 +38,7 @@
 		"babel-loader": "8.2.2",
 		"browser-sync": "2.26.14",
 		"browser-sync-webpack-plugin": "2.3.0",
+		"browserslist": "4.16.6",
 		"clean-webpack-plugin": "1.0.1",
 		"create-pwa": "2.3.1",
 		"critical": "3.1.0",
@@ -69,6 +70,7 @@
 		"spritesh": "1.2.1",
 		"stylelint": "13.13.1",
 		"stylelint-config-recommended": "5.0.0",
+		"svgo": "2.3.0",
 		"webpack": "5.38.1",
 		"webpack-cli": "4.7.0",
 		"webpack-shell-plugin-next": "2.2.2",

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

@@ -22,27 +22,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 = {
 	ident: 'postcss',
 	plugins: [
@@ -152,7 +131,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-');
 }