Use unique ids for CometColor component so that there are no SVG sc…

…oping problems (#2529)

Co-authored-by: Johannes Obermair <[email protected]>

packages/admin/admin-icons/package.json

@@ -22,6 +22,10 @@
         "start:babel": "npx babel ./src -x \".ts,.tsx\" -d lib -w",
         "start:types": "tsc --project ./tsconfig.json --emitDeclarationOnly --watch --preserveWatchOutput"
     },
+    "dependencies": {
+        "use-constant": "^1.0.0",
+        "uuid": "^9.0.0"
+    },
     "devDependencies": {
         "@babel/cli": "^7.17.6",
         "@babel/core": "^7.20.12",
@@ -32,6 +36,7 @@
         "@types/node": "^18.0.0",
         "@types/react": "^17.0.0",
         "@types/react-dom": "^17.0.0",
+        "@types/uuid": "^10.0.0",
         "cli-progress": "^3.8.2",
         "eslint": "^8.0.0",
         "fast-xml-parser": "^4.2.5",

packages/admin/admin-icons/src/CometColor.tsx

@@ -1,23 +1,33 @@
 import { SvgIcon, SvgIconProps } from "@mui/material";
+import useConstant from "use-constant";
+import { v4 as uuidv4 } from "uuid";
+
+function getUniqueId() {
+    return `comet-icon-${uuidv4()}`;
+}
 
 export default function Comet(props: SvgIconProps) {
+    const uniqueIdA = useConstant(getUniqueId);
+    const uniqueIdB = useConstant(getUniqueId);
+    const uniqueIdC = useConstant(getUniqueId);
+
     return (
         <SvgIcon {...props} viewBox="0 0 200 200">
             <defs>
                 <path
-                    id="comet-icon-a"
+                    id={uniqueIdA}
                     d="M64.09713,-2.58960077e-15 L135.90287,2.58960077e-15 C158.190838,-1.50463262e-15 166.272994,2.32064028 174.421143,6.67831759 C182.569291,11.0359949 188.964005,17.4307093 193.321682,25.5788574 C197.67936,33.7270056 200,41.8091615 200,64.09713 L200,135.90287 C200,158.190838 197.67936,166.272994 193.321682,174.421143 C188.964005,182.569291 182.569291,188.964005 174.421143,193.321682 C166.272994,197.67936 158.190838,200 135.90287,200 L64.09713,200 C41.8091615,200 33.7270056,197.67936 25.5788574,193.321682 C17.4307093,188.964005 11.0359949,182.569291 6.67831759,174.421143 C2.32064028,166.272994 1.00308841e-15,158.190838 -1.72640051e-15,135.90287 L1.72640051e-15,64.09713 C-1.00308841e-15,41.8091615 2.32064028,33.7270056 6.67831759,25.5788574 C11.0359949,17.4307093 17.4307093,11.0359949 25.5788574,6.67831759 C33.7270056,2.32064028 41.8091615,1.50463262e-15 64.09713,-2.58960077e-15 Z"
                 />
-                <linearGradient id="comet-icon-b" x1="50%" x2="50%" y1="0%" y2="100%">
+                <linearGradient id={uniqueIdB} x1="50%" x2="50%" y1="0%" y2="100%">
                     <stop offset=".022%" stopColor="#14CC33" />
                     <stop offset="100%" stopColor="#29B6F6" />
                 </linearGradient>
             </defs>
             <g fill="none" fillRule="evenodd">
-                <mask id="comet-icon-c" fill="#fff">
-                    <use xlinkHref="#comet-icon-a" />
+                <mask id={uniqueIdC} fill="#fff">
+                    <use xlinkHref={`#${uniqueIdA}`} />
                 </mask>
-                <rect width="200" height="200" fill="url(#comet-icon-b)" fillRule="nonzero" mask="url(#comet-icon-c)" />
+                <rect width="200" height="200" fill={`url(#${uniqueIdB})`} fillRule="nonzero" mask={`url(#${uniqueIdC})`} />
                 <path
                     fill="#FFF"
                     d="M51.6257424,79.494565 C55.513236,79.494565 59.2754556,79.7871142 62.9430532,80.2987413 L62.9430532,80.2987413 L48.5858476,96.6106964 C39.9912483,97.0274788 32.12697,99.2115789 25.0130032,103.204408 C17.063432,107.668789 10.8317144,113.817665 6.31785052,121.657716 C1.80265396,129.497767 -0.453611624,138.263556 -0.453611624,147.94974 C-0.453611624,157.638595 1.80265396,166.403048 6.31785052,174.241763 C10.8317144,182.081814 17.063432,188.234698 25.0130032,192.695071 C32.9599091,197.158116 41.8303779,199.386299 51.6257424,199.386299 C61.415776,199.386299 70.2249405,197.158116 78.0465723,192.695071 C85.8668715,188.234698 92.035952,182.081814 96.5511486,174.241763 C99.4137938,169.267091 101.358207,163.914376 102.404379,158.194305 L102.404379,158.194305 L122.100391,141.144965 C122.297631,143.371812 122.398916,145.638735 122.398916,147.94974 C122.398916,160.952816 119.34836,172.649441 113.243249,183.038276 C107.138138,193.429784 98.6794747,201.586429 87.8712562,207.513556 C77.0603724,213.442019 64.9780902,216.40625 51.6257424,216.40625 C38.1441224,216.40625 25.9965378,213.442019 15.1883193,207.513556 C4.37876817,201.586429 -4.11188039,193.396388 -10.2782955,182.942096 C-16.4487088,172.490476 -19.53125,160.827247 -19.53125,147.94974 C-19.53125,135.076239 -16.4487088,123.41034 -10.2782955,112.957383 C-4.11188039,102.505763 4.37876817,94.3130498 15.1883193,88.3872589 C25.9965378,82.4587963 38.1441224,79.494565 51.6257424,79.494565 Z M198.08843,38.3934076 L103.227989,144.738378 C102.890815,138.41985 101.54212,132.515432 99.2018941,127.01711 L99.2018941,127.01711 L198.08843,38.3934076 Z M202.34375,0 L94.65338,118.618678 C91.7987309,114.36536 88.3870122,110.682446 84.4368815,107.547227 L84.4368815,107.547227 L202.34375,0 Z M142.759947,25.5947145 L76.1541346,102.20787 C71.3723975,99.748587 66.2374942,98.0894724 60.7494247,97.2305266 L60.7494247,97.2305266 L142.759947,25.5947145 Z"