build: Upgrade 'svgo' & re-crush SVGs

'svgo' upgraded to v2.3.0

This includes:
- Replacing .svgo.json with .svgo.config.js
- Updating the SVGs files. This amounts to changes in the order of
  some attributes.
- Adding the minify-svg command as part of the npm run test command

Bug: T278656
Change-Id: Ia38332be68b8ac47a31caf30272920c0f0c12053

.svgo.config.js

@@ -0,0 +1,55 @@
+/**
+ * SVGO Configuration
+ * Recommended options from:
+ * https://www.mediawiki.org/wiki/Manual:Coding_conventions/SVG#Exemplified_safe_configuration
+ */
+ const { extendDefaultPlugins } = require( 'svgo' );
+ module.exports = {
+	multipass: true,
+	plugins: extendDefaultPlugins( [
+		{
+			name: 'cleanupIDs',
+			active: false
+		},
+		{
+			name: 'removeDesc',
+			active: false
+		},
+		{
+			name: 'removeRasterImages',
+			active: true
+		},
+		{
+			name: 'removeTitle',
+			active: false
+		},
+		{
+			name: 'removeViewBox',
+			active: false
+		},
+		{
+			// If the SVG doesn't start with an XML declaration, then its MIME type will
+			// be detected as "text/plain" rather than "image/svg+xml" by libmagic and,
+			// consequently, MediaWiki's CSSMin CSS minifier. libmagic's default database
+			// currently requires that SVGs contain an XML declaration:
+			// https://github.com/threatstack/libmagic/blob/master/magic/Magdir/sgml#L5
+			name: 'removeXMLProcInst',
+			active: false
+		},
+		{
+			name: 'sortAttrs',
+			active: true
+		}
+	] ),
+
+	// Configure the indent (default 4 spaces) used by `--pretty` here:
+	// @see https://github.com/svg/svgo/blob/master/lib/svgo/js2svg.js#L6 for more config options
+	//
+	// Unfortunately EOL cannot be configured, SVGO uses the platform's EOL marker.
+	// On non-unix systems the linebreaks will be normalized to LF (unix) only at git commit,
+	// assuming `core.autocrlf` is 'true' (default) or 'input'.
+	js2svg: {
+		indent: "\t",
+		pretty: true,
+	}
+}

.svgo.json

@@ -1,30 +0,0 @@
-{
-  "multipass": true,
-  "js2svg": {
-    "pretty": true,
-    "indent": "\t"
-  },
-  "plugins": [
-    {
-      "collapseGroups": false
-    },
-    {
-      "mergePaths": false
-    },
-    {
-      "cleanupIDs": false
-    },
-    {
-      "removeDesc": false
-    },
-    {
-      "removeTitle": false
-    },
-    {
-      "removeViewBox": false
-    },
-    {
-      "removeXMLProcInst": false
-    }
-  ]
-}

package.json

@@ -16,7 +16,7 @@
 		"doc": "jsdoc -c jsdoc.json && npm run build-storybook",
 		"linter:js": "eslint --cache '*.{js,json}' 'src/**/*.{js,json}' 'tests/**/*.{js,json}' 'resources/dist/*.js'",
 		"linter:styles": "stylelint 'src/**/*.less'",
-		"minify-svg": "svgo --config=.svgo.json -q -r -f resources/ext.popups.images/",
+		"minify-svg": "svgo --config=.svgo.config.js -q -r -f resources/ext.popups.images/",
 		"node-debug": "node -v && npm -v && echo 'Please ensure you are running the correct version of nvm before running this command.'",
 		"precommit": "npm -s t",
 		"selenium-daily": "npm run selenium-test",
@@ -59,7 +59,7 @@
 		"redux-thunk": "2.3.0",
 		"stylelint-config-wikimedia": "0.10.1",
 		"svg-inline-loader": "0.8.0",
-		"svgo": "1.2.2",
+		"svgo": "2.3.0",
 		"tap-mocha-reporter": "5.0.1",
 		"url-loader": "1.1.2",
 		"wdio-mediawiki": "1.0.0",

resources/ext.popups.images/close.svg

@@ -3,6 +3,6 @@
 	<title>
 		close
 	</title>
-	<path d="M4.34 2.93l12.73 12.73-1.41 1.41L2.93 4.35z"/>
-	<path d="M17.07 4.34L4.34 17.07l-1.41-1.41L15.66 2.93z"/>
+	<path d="m4.34 2.93 12.73 12.73-1.41 1.41L2.93 4.35z"/>
+	<path d="M17.07 4.34 4.34 17.07l-1.41-1.41L15.66 2.93z"/>
 </svg>

resources/ext.popups.images/footer-ltr.svg

@@ -12,7 +12,7 @@
 		</g>
 		<use fill="#fff" xlink:href="#b"/>
 		<rect width="199" height="167" x="1" y="11" stroke="#a2a9b1" stroke-width="2" rx="2"/>
-		<g opacity=".4" fill="#72777d" transform="translate(67 35)">
+		<g fill="#72777d" opacity=".4" transform="translate(67 35)">
 			<rect width="73" height="2" y="7" fill="#c8ccd1" rx="1"/>
 			<rect width="81" height="2" y="31" rx="1"/>
 			<rect width="32" height="2" y="85" rx="1"/>
@@ -44,6 +44,6 @@
 			<circle cx="6" cy="1.5" r="1.5"/>
 			<circle cx="10.5" cy="1.5" r="1.5"/>
 		</g>
-		<path stroke="#ff00af" d="M174.5 159.5h54.01" stroke-linecap="square"/>
+		<path stroke="#ff00af" stroke-linecap="square" d="M174.5 159.5h54.01"/>
 	</g>
 </svg>

resources/ext.popups.images/footer-rtl.svg

@@ -13,7 +13,7 @@
 			</g>
 			<use fill="#fff" xlink:href="#b"/>
 			<rect width="199" height="167" x="1" y="11" stroke="#a2a9b1" stroke-width="2" rx="2"/>
-			<g opacity=".4" fill="#72777d" transform="matrix(-1 0 0 1 132 35)">
+			<g fill="#72777d" opacity=".4" transform="matrix(-1 0 0 1 132 35)">
 				<rect width="73" height="2" y="7" fill="#c8ccd1" rx="1"/>
 				<rect width="81" height="2" y="31" rx="1"/>
 				<rect width="32" height="2" y="85" rx="1"/>
@@ -46,6 +46,6 @@
 				<circle cx="10.5" cy="1.5" r="1.5"/>
 			</g>
 		</g>
-		<path stroke="#ff00af" d="M.5 159.5h54.01" stroke-linecap="square"/>
+		<path stroke="#ff00af" stroke-linecap="square" d="M.5 159.5h54.01"/>
 	</g>
 </svg>

resources/ext.popups.images/reference.svg

@@ -3,5 +3,5 @@
 	<title>
 		reference
 	</title>
-	<path d="M15 10l-2.78-2.78L9.44 10V1H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2z"/>
+	<path d="m15 10-2.78-2.78L9.44 10V1H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2z"/>
 </svg>