From 7d8b7fc14dd8b76c391c95d1e92f0c4236c55576 Mon Sep 17 00:00:00 2001
From: Hey <80324173+Shaocang@users.noreply.github.com>
Date: Wed, 15 May 2024 21:22:05 +0800
Subject: [PATCH] fix: compatible safari layers button svg (#8020)

Co-authored-by: ysen <ysen.ge@hairobotics.com>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
---
 packages/excalidraw/components/icons.tsx      |  8 ++-
 .../__snapshots__/contextmenu.test.tsx.snap   | 60 +++++++++++++++----
 2 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/packages/excalidraw/components/icons.tsx b/packages/excalidraw/components/icons.tsx
index 5b19a74a4..3d7ac956f 100644
--- a/packages/excalidraw/components/icons.tsx
+++ b/packages/excalidraw/components/icons.tsx
@@ -698,14 +698,18 @@ export const BringForwardIcon = createIcon(arrownNarrowUpJSX, tablerIconProps);
 
 export const SendBackwardIcon = createIcon(arrownNarrowUpJSX, {
   ...tablerIconProps,
-  transform: "rotate(180)",
+  style: {
+    transform: "rotate(180deg)",
+  },
 });
 
 export const BringToFrontIcon = createIcon(arrowBarToTopJSX, tablerIconProps);
 
 export const SendToBackIcon = createIcon(arrowBarToTopJSX, {
   ...tablerIconProps,
-  transform: "rotate(180)",
+  style: {
+    transform: "rotate(180deg)",
+  },
 });
 
 //
diff --git a/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap
index f032e9672..712bf1a71 100644
--- a/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap
+++ b/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap
@@ -398,7 +398,11 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth={2}
-          transform="rotate(180)"
+          style={
+            {
+              "transform": "rotate(180deg)",
+            }
+          }
           viewBox="0 0 24 24"
         >
           <g
@@ -493,7 +497,11 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth={2}
-          transform="rotate(180)"
+          style={
+            {
+              "transform": "rotate(180deg)",
+            }
+          }
           viewBox="0 0 24 24"
         >
           <g
@@ -4811,7 +4819,11 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth={2}
-          transform="rotate(180)"
+          style={
+            {
+              "transform": "rotate(180deg)",
+            }
+          }
           viewBox="0 0 24 24"
         >
           <g
@@ -4906,7 +4918,11 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth={2}
-          transform="rotate(180)"
+          style={
+            {
+              "transform": "rotate(180deg)",
+            }
+          }
           viewBox="0 0 24 24"
         >
           <g
@@ -5922,7 +5938,11 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth={2}
-          transform="rotate(180)"
+          style={
+            {
+              "transform": "rotate(180deg)",
+            }
+          }
           viewBox="0 0 24 24"
         >
           <g
@@ -6017,7 +6037,11 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth={2}
-          transform="rotate(180)"
+          style={
+            {
+              "transform": "rotate(180deg)",
+            }
+          }
           viewBox="0 0 24 24"
         >
           <g
@@ -7740,7 +7764,11 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth={2}
-          transform="rotate(180)"
+          style={
+            {
+              "transform": "rotate(180deg)",
+            }
+          }
           viewBox="0 0 24 24"
         >
           <g
@@ -7835,7 +7863,11 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth={2}
-          transform="rotate(180)"
+          style={
+            {
+              "transform": "rotate(180deg)",
+            }
+          }
           viewBox="0 0 24 24"
         >
           <g
@@ -8618,7 +8650,11 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth={2}
-          transform="rotate(180)"
+          style={
+            {
+              "transform": "rotate(180deg)",
+            }
+          }
           viewBox="0 0 24 24"
         >
           <g
@@ -8713,7 +8749,11 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth={2}
-          transform="rotate(180)"
+          style={
+            {
+              "transform": "rotate(180deg)",
+            }
+          }
           viewBox="0 0 24 24"
         >
           <g