diff --git a/lib/logos.spec.js b/lib/logos.spec.js index cdefebc9171ba..06a5d4c996cee 100644 --- a/lib/logos.spec.js +++ b/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 () { diff --git a/lib/svg-helpers.js b/lib/svg-helpers.js index 1ccb288992b40..18ff04cd4797a 100644 --- a/lib/svg-helpers.js +++ b/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 } diff --git a/package-lock.json b/package-lock.json index bf06a38f4b4e0..d39f5ac896cc4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -53,7 +53,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" }, @@ -5578,11 +5579,6 @@ "node": ">=14.16" } }, - "node_modules/@thednp/dommatrix": { - "version": "2.0.7", - "resolved": "https://registry.npmjs.org/@thednp/dommatrix/-/dommatrix-2.0.7.tgz", - "integrity": "sha512-d5p07ZYa1Z6opXIGwKpBVvzxQity43T0kVnDXMbZNsMzaOrJGKtemRJA8Puj2GtvWQ5+JiNPkiwBWSk6plLVtA==" - }, "node_modules/@tokenizer/token": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/@tokenizer/token/-/token-0.3.0.tgz", @@ -28169,16 +28165,19 @@ "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==", "dev": true }, - "node_modules/svg-path-commander": { - "version": "2.0.10", - "resolved": "https://registry.npmjs.org/svg-path-commander/-/svg-path-commander-2.0.10.tgz", - "integrity": "sha512-DGYaXpW6cD0ML3Qj/Md/2al4p44wm/THVQMd2wL5w5LlbFWM/iU8BMvWjUDRzJXe8tpQG3LVsuEQftzdjQE+Vg==", + "node_modules/svg-path-bbox": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/svg-path-bbox/-/svg-path-bbox-2.0.0.tgz", + "integrity": "sha512-DP/dcKuwjfJ2GXiM1RsIKcWv+aGazBXTYPuAH9pWYZVm5+pZ6ho70BeLB0inqUGDCCHDmcUlQ2OcLlGuwhmkKQ==", + "license": "BSD-3-Clause", "dependencies": { - "@thednp/dommatrix": "^2.0.7" + "svgpath": "^2.6.0" + }, + "bin": { + "svg-path-bbox": "src/cli.js" }, "engines": { - "node": ">=16", - "pnpm": ">=8.6.0" + "node": ">=6.17.1" } }, "node_modules/svgo": { @@ -28215,6 +28214,15 @@ "node": ">= 10" } }, + "node_modules/svgpath": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/svgpath/-/svgpath-2.6.0.tgz", + "integrity": "sha512-OIWR6bKzXvdXYyO4DK/UWa1VA1JeKq8E+0ug2DG98Y/vOmMpfZNj+TIG988HjfYSqtcy/hFOtZq/n/j5GSESNg==", + "license": "MIT", + "funding": { + "url": "https://github.com/fontello/svg2ttf?sponsor=1" + } + }, "node_modules/synckit": { "version": "0.9.1", "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.1.tgz", diff --git a/package.json b/package.json index 415cb69afc2da..ce296747f19fe 100644 --- a/package.json +++ b/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" },