perf: improve logoSize performance (#10488)

* perf: improve logoSize performance

* Fix test

lib/logos.spec.js

@@ -41,11 +41,11 @@ describe('Logo helpers', function () {
     )
     // use simple icon with auto logo size
     given({ name: 'amd', size: 'auto' }).expect(
-      'data:image/svg+xml;base64,PHN2ZyBmaWxsPSJ3aGl0ZXNtb2tlIiByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCA1LjcyNTk5OTk5OTk5OTk5OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+QU1EPC90aXRsZT48cGF0aCBkPSJNMTguMzI0IDBMMTkuODgzIDEuNTZIMjIuNDM5VjQuMTE3TDI0IDUuNjc3VjBaTTIgMC4zODNMMCA1LjM0M0gxLjMwOUwxLjY3OSA0LjM2MUgzLjlMNC4zMDggNS4zNDNINS42NDZMMy40MzIgMC4zODNaTTYuMjA5IDAuMzgzVjUuMzM4SDcuNDQ3VjIuMjQ2TDguNzg1IDMuODA4SDguOTczTDEwLjMxMSAyLjI1MlY1LjM0M0gxMS41NDlWMC4zODNIMTAuNDdMOC44NzggMi4yMjhMNy4yODcgMC4zODNaTTEyLjQ5MiAwLjM4M1Y1LjM0M0gxNC41NDlDMTYuNTI4IDUuMzQzIDE3LjQyOSA0LjI5NyAxNy40MjkgMi44NzFDMTcuNDI5IDEuNTExIDE2LjQ5MiAwLjM4MyAxNC42ODIgMC4zODNaTTEzLjcyOSAxLjI5M0gxNC41MjFDMTUuNjkxIDEuMjkzIDE2LjE1MSAyLjAwNCAxNi4xNTEgMi44NjNDMTYuMTUxIDMuNTkxIDE1Ljc3OSA0LjQzNSAxNC41MzUgNC40MzVIMTMuNzI5Wk0yLjc0NCAxLjU2NkwzLjUzNSAzLjQ5OEgyLjAwOFpNMTkuODgxIDEuODczTDE4LjI3NyAzLjQ3NlY1LjcyNkgyMC41MjNMMjIuMTI3IDQuMTE5SDE5Ljg4MVoiLz48L3N2Zz4=',
+      'data:image/svg+xml;base64,PHN2ZyBmaWxsPSJ3aGl0ZXNtb2tlIiByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCA1LjcyNTk5OTk5OTk5OTk5OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+QU1EPC90aXRsZT48cGF0aCBkPSJNMTguMzI0IDBsMS41NTkgMS41NmgyLjU1NnYyLjU1N0wyNCA1LjY3N1Ywek0yIDAuMzgyOTk5OTk5OTk5OTk5MWwtMiA0Ljk2aDEuMzA5bDAuMzctMC45ODJIMy45bDAuNDA4IDAuOTgyaDEuMzM4TDMuNDMyIDAuMzgyOTk5OTk5OTk5OTk5MXogbTQuMjA5IDB2NC45NTVoMS4yMzh2LTMuMDkybDEuMzM4IDEuNTYyaDAuMTg4bDEuMzM4LTEuNTU2djMuMDkxaDEuMjM4VjAuMzgyOTk5OTk5OTk5OTk5MUgxMC40N2wtMS41OTIgMS44NDVMNy4yODcgMC4zODI5OTk5OTk5OTk5OTkxeiBtNi4yODMgMHY0Ljk2aDIuMDU3YzEuOTc5IDAgMi44OC0xLjA0NiAyLjg4LTIuNDcyIDAtMS4zNi0wLjkzNy0yLjQ4OC0yLjc0Ny0yLjQ4OHogbTEuMjM3IDAuOTFoMC43OTJjMS4xNyAwIDEuNjMgMC43MTEgMS42MyAxLjU3IDAgMC43MjgtMC4zNzIgMS41NzItMS42MTYgMS41NzJoLTAuODA2eiBtLTEwLjk4NSAwLjI3M2wwLjc5MSAxLjkzMkgyLjAwOHogbTE3LjEzNyAwLjMwN2wtMS42MDQgMS42MDN2Mi4yNWgyLjI0NmwxLjYwNC0xLjYwN2gtMi4yNDZ6Ii8+PC9zdmc+',
     )
     // use simple icon with color & auto logo size
     given({ name: 'amd', color: 'white', size: 'auto' }).expect(
-      'data:image/svg+xml;base64,PHN2ZyBmaWxsPSJ3aGl0ZSIgcm9sZT0iaW1nIiB2aWV3Qm94PSIwIDAgMjQgNS43MjU5OTk5OTk5OTk5OTkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPkFNRDwvdGl0bGU+PHBhdGggZD0iTTE4LjMyNCAwTDE5Ljg4MyAxLjU2SDIyLjQzOVY0LjExN0wyNCA1LjY3N1YwWk0yIDAuMzgzTDAgNS4zNDNIMS4zMDlMMS42NzkgNC4zNjFIMy45TDQuMzA4IDUuMzQzSDUuNjQ2TDMuNDMyIDAuMzgzWk02LjIwOSAwLjM4M1Y1LjMzOEg3LjQ0N1YyLjI0Nkw4Ljc4NSAzLjgwOEg4Ljk3M0wxMC4zMTEgMi4yNTJWNS4zNDNIMTEuNTQ5VjAuMzgzSDEwLjQ3TDguODc4IDIuMjI4TDcuMjg3IDAuMzgzWk0xMi40OTIgMC4zODNWNS4zNDNIMTQuNTQ5QzE2LjUyOCA1LjM0MyAxNy40MjkgNC4yOTcgMTcuNDI5IDIuODcxQzE3LjQyOSAxLjUxMSAxNi40OTIgMC4zODMgMTQuNjgyIDAuMzgzWk0xMy43MjkgMS4yOTNIMTQuNTIxQzE1LjY5MSAxLjI5MyAxNi4xNTEgMi4wMDQgMTYuMTUxIDIuODYzQzE2LjE1MSAzLjU5MSAxNS43NzkgNC40MzUgMTQuNTM1IDQuNDM1SDEzLjcyOVpNMi43NDQgMS41NjZMMy41MzUgMy40OThIMi4wMDhaTTE5Ljg4MSAxLjg3M0wxOC4yNzcgMy40NzZWNS43MjZIMjAuNTIzTDIyLjEyNyA0LjExOUgxOS44ODFaIi8+PC9zdmc+',
+      'data:image/svg+xml;base64,PHN2ZyBmaWxsPSJ3aGl0ZSIgcm9sZT0iaW1nIiB2aWV3Qm94PSIwIDAgMjQgNS43MjU5OTk5OTk5OTk5OTkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPkFNRDwvdGl0bGU+PHBhdGggZD0iTTE4LjMyNCAwbDEuNTU5IDEuNTZoMi41NTZ2Mi41NTdMMjQgNS42NzdWMHpNMiAwLjM4Mjk5OTk5OTk5OTk5OTFsLTIgNC45NmgxLjMwOWwwLjM3LTAuOTgySDMuOWwwLjQwOCAwLjk4MmgxLjMzOEwzLjQzMiAwLjM4Mjk5OTk5OTk5OTk5OTF6IG00LjIwOSAwdjQuOTU1aDEuMjM4di0zLjA5MmwxLjMzOCAxLjU2MmgwLjE4OGwxLjMzOC0xLjU1NnYzLjA5MWgxLjIzOFYwLjM4Mjk5OTk5OTk5OTk5OTFIMTAuNDdsLTEuNTkyIDEuODQ1TDcuMjg3IDAuMzgyOTk5OTk5OTk5OTk5MXogbTYuMjgzIDB2NC45NmgyLjA1N2MxLjk3OSAwIDIuODgtMS4wNDYgMi44OC0yLjQ3MiAwLTEuMzYtMC45MzctMi40ODgtMi43NDctMi40ODh6IG0xLjIzNyAwLjkxaDAuNzkyYzEuMTcgMCAxLjYzIDAuNzExIDEuNjMgMS41NyAwIDAuNzI4LTAuMzcyIDEuNTcyLTEuNjE2IDEuNTcyaC0wLjgwNnogbS0xMC45ODUgMC4yNzNsMC43OTEgMS45MzJIMi4wMDh6IG0xNy4xMzcgMC4zMDdsLTEuNjA0IDEuNjAzdjIuMjVoMi4yNDZsMS42MDQtMS42MDdoLTIuMjQ2eiIvPjwvc3ZnPg==',
     )
 
     it('preserves color if light logo on dark background', function () {

lib/svg-helpers.js

@@ -1,4 +1,5 @@
-import SVGPathCommander from 'svg-path-commander'
+import { svgPathBbox } from 'svg-path-bbox'
+import svgpath from 'svgpath'
 import loadSimpleIcons from './load-simple-icons.js'
 
 const simpleIcons = loadSimpleIcons()
@@ -14,24 +15,13 @@ function getIconSize(iconKey) {
     return undefined
   }
 
-  const {
-    width,
-    height,
-    x: x0,
-    y: y0,
-    x2: x1,
-    y2: y1,
-  } = SVGPathCommander.getPathBBox(simpleIcons[iconKey].path)
-
-  return { width, height, x0, y0, x1, y1 }
+  const [x0, y0, x1, y1] = svgPathBbox(simpleIcons[iconKey].path)
+  return { width: x1 - x0, height: y1 - y0 }
 }
 
 function resetIconPosition(path) {
-  const { x: offsetX, y: offsetY } = SVGPathCommander.getPathBBox(path)
-  const pathReset = new SVGPathCommander(path)
-    .transform({ translate: [-offsetX, -offsetY] })
-    .toString()
-
+  const [offsetX, offsetY] = svgPathBbox(path)
+  const pathReset = svgpath(path).translate(-offsetX, -offsetY).toString()
   return pathReset
 }
 

package.json

@@ -65,7 +65,8 @@
     "semver": "~7.6.3",
     "simple-icons": "13.7.0",
     "smol-toml": "1.3.0",
-    "svg-path-commander": "^2.0.10",
+    "svg-path-bbox": "^2.0.0",
+    "svgpath": "^2.6.0",
     "webextension-store-meta": "^1.2.3",
     "xpath": "~0.0.34"
   },