From 2746bad86ba95c9a5055269787bec9b4ca9bfd6b Mon Sep 17 00:00:00 2001
From: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Date: Thu, 24 Jul 2025 14:46:55 +0530
Subject: [PATCH] [WEB-4561] fix: SVG attributes in react components (#7470)

* chore: svg attribute fix (#7446)

* fix: replace invalid --env-file with dotenv-cli for tsup onSuccess

* fix: replace invalid --env-file usage in start script and move dotenv-cli to dependencies

* chor: update SVG attributes to camelCase for JSX compatibility

* chor: update SVG attributes to camelCase

* fix: removed dontenv-cli

* fix: svg attibute fixes

* chore: minor attribute customizations

---------

Co-authored-by: Donal Noye <68372408+Donal-Noye@users.noreply.github.com>
---
 packages/ui/src/form-fields/checkbox.tsx       |  2 +-
 .../ui/src/form-fields/input-color-picker.tsx  | 14 +++++++-------
 packages/ui/src/icons/activity-icon.tsx        | 18 +++++++++++++-----
 packages/ui/src/icons/ai-icon.tsx              |  2 +-
 packages/ui/src/icons/at-risk-icon.tsx         |  6 +++---
 packages/ui/src/icons/center-panel-icon.tsx    | 12 ++++++------
 .../src/icons/cycle/circle-dot-full-icon.tsx   |  4 ++--
 packages/ui/src/icons/discord-icon.tsx         |  2 +-
 packages/ui/src/icons/done-icon.tsx            |  6 +++---
 packages/ui/src/icons/favorite-folder-icon.tsx | 14 ++++++--------
 packages/ui/src/icons/in-progress-icon.tsx     |  4 ++--
 packages/ui/src/icons/info-icon.tsx            |  6 +++---
 packages/ui/src/icons/lead-icon.tsx            |  6 +++---
 packages/ui/src/icons/multiple-sticky.tsx      |  8 ++++----
 packages/ui/src/icons/off-track-icon.tsx       |  6 +++---
 packages/ui/src/icons/on-track-icon.tsx        | 18 +++++++++---------
 packages/ui/src/icons/pending-icon.tsx         |  8 ++++----
 packages/ui/src/icons/plane-icon.tsx           |  2 +-
 packages/ui/src/icons/planned-icon.tsx         | 14 +++++++-------
 packages/ui/src/icons/sticky-note-icon.tsx     |  4 ++--
 packages/ui/src/icons/updates-icon.tsx         |  4 ++--
 packages/ui/src/icons/wiki-icon.tsx            |  2 +-
 22 files changed, 84 insertions(+), 78 deletions(-)

diff --git a/packages/ui/src/form-fields/checkbox.tsx b/packages/ui/src/form-fields/checkbox.tsx
index 3c45cf4f5..b2e01908d 100644
--- a/packages/ui/src/form-fields/checkbox.tsx
+++ b/packages/ui/src/form-fields/checkbox.tsx
@@ -78,7 +78,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>((props, ref)
         strokeLinecap="round"
         strokeLinejoin="round"
       >
-        <path d="M5.75 4H2.25" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M5.75 4H2.25" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
       </svg>
     </div>
   );
diff --git a/packages/ui/src/form-fields/input-color-picker.tsx b/packages/ui/src/form-fields/input-color-picker.tsx
index d71a15005..eb7b83977 100644
--- a/packages/ui/src/form-fields/input-color-picker.tsx
+++ b/packages/ui/src/form-fields/input-color-picker.tsx
@@ -1,12 +1,12 @@
-import * as React from "react";
 import { Popover, Transition } from "@headlessui/react";
+import * as React from "react";
 import { ColorResult, SketchPicker } from "react-color";
-// components
-import { Input } from "./input";
 import { usePopper } from "react-popper";
-import { Button } from "../button";
 // helpers
 import { cn } from "../../helpers";
+// components
+import { Button } from "../button";
+import { Input } from "./input";
 
 export interface InputColorPickerProps {
   hasError: boolean;
@@ -71,9 +71,9 @@ export const InputColorPicker: React.FC<InputColorPickerProps> = (props) => {
                     viewBox="0 0 24 24"
                     fill="none"
                     stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
                     className="lucide lucide-palette"
                   >
                     <circle cx="13.5" cy="6.5" r=".5" />
diff --git a/packages/ui/src/icons/activity-icon.tsx b/packages/ui/src/icons/activity-icon.tsx
index 2ac482836..14f3b1d42 100644
--- a/packages/ui/src/icons/activity-icon.tsx
+++ b/packages/ui/src/icons/activity-icon.tsx
@@ -3,14 +3,22 @@ import * as React from "react";
 import { ISvgIcons } from "./type";
 
 export const ActivityIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0_15681_9387)">
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...rest}
+  >
+    <g clipPath="url(#clip0_15681_9387)">
       <path
         d="M14.6666 8.00001H13.0133C12.7219 7.99939 12.4384 8.09421 12.206 8.26999C11.9736 8.44576 11.8053 8.69281 11.7266 8.97334L10.1599 14.5467C10.1498 14.5813 10.1288 14.6117 10.0999 14.6333C10.0711 14.655 10.036 14.6667 9.99992 14.6667C9.96386 14.6667 9.92877 14.655 9.89992 14.6333C9.87107 14.6117 9.85002 14.5813 9.83992 14.5467L6.15992 1.45334C6.14982 1.41872 6.12877 1.38831 6.09992 1.36668C6.07107 1.34504 6.03598 1.33334 5.99992 1.33334C5.96386 1.33334 5.92877 1.34504 5.89992 1.36668C5.87107 1.38831 5.85002 1.41872 5.83992 1.45334L4.27325 7.02668C4.1949 7.30611 4.02751 7.55235 3.79649 7.72802C3.56548 7.90368 3.28347 7.99918 2.99325 8.00001H1.33325"
         stroke="#8591AD"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </g>
     <defs>
diff --git a/packages/ui/src/icons/ai-icon.tsx b/packages/ui/src/icons/ai-icon.tsx
index 55518401a..149d9db39 100644
--- a/packages/ui/src/icons/ai-icon.tsx
+++ b/packages/ui/src/icons/ai-icon.tsx
@@ -11,7 +11,7 @@ export const AiIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16", class
     xmlns="http://www.w3.org/2000/svg"
     className={className}
   >
-    <g clip-path="url(#clip0_888_35571)">
+    <g clipPath="url(#clip0_888_35571)">
       <path
         d="M14.2082 0H1.79185C0.801553 0 0 0.801553 0 1.79185V14.2093C0 15.1984 0.801553 16.0012 1.79185 16.0012H14.2093C15.1984 16.0012 16.0012 15.1996 16.0012 14.2093V1.79185C16.0012 0.802748 15.1996 0 14.2093 0H14.2082ZM13.1032 11.5276C13.1032 12.3984 12.3972 13.1032 11.5276 13.1032H4.47245C3.60161 13.1032 2.89682 12.3972 2.89682 11.5276V4.47245C2.89682 3.60161 3.60281 2.89682 4.47245 2.89682H11.5276C12.3984 2.89682 13.1032 3.60281 13.1032 4.47245V11.5276Z"
         fill={color}
diff --git a/packages/ui/src/icons/at-risk-icon.tsx b/packages/ui/src/icons/at-risk-icon.tsx
index 65e5ae63d..748307b3c 100644
--- a/packages/ui/src/icons/at-risk-icon.tsx
+++ b/packages/ui/src/icons/at-risk-icon.tsx
@@ -4,10 +4,10 @@ import { ISvgIcons } from "./type";
 
 export const AtRiskIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16" }) => (
   <svg width={width} height={height} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0_365_7561)">
+    <g clipPath="url(#clip0_365_7561)">
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M2.03658 7.33335H2.66663C3.03482 7.33335 3.33329 7.63183 3.33329 8.00002C3.33329 8.36821 3.03482 8.66669 2.66663 8.66669H2.03658C2.36821 11.6667 4.91159 14 7.99996 14C11.0883 14 13.6317 11.6667 13.9633 8.66669H13.3333C12.9651 8.66669 12.6666 8.36821 12.6666 8.00002C12.6666 7.63183 12.9651 7.33335 13.3333 7.33335H13.9633C13.6317 4.33339 11.0883 2.00002 7.99996 2.00002C4.91159 2.00002 2.36821 4.33339 2.03658 7.33335ZM0.666626 8.00002C0.666626 3.94993 3.94987 0.666687 7.99996 0.666687C12.05 0.666687 15.3333 3.94993 15.3333 8.00002C15.3333 12.0501 12.05 15.3334 7.99996 15.3334C3.94987 15.3334 0.666626 12.0501 0.666626 8.00002ZM7.99996 4.66669C8.36815 4.66669 8.66663 4.96516 8.66663 5.33335V8.00002C8.66663 8.36821 8.36815 8.66669 7.99996 8.66669C7.63177 8.66669 7.33329 8.36821 7.33329 8.00002V5.33335C7.33329 4.96516 7.63177 4.66669 7.99996 4.66669ZM7.33329 10.6667C7.33329 10.2985 7.63177 10 7.99996 10H8.00663C8.37482 10 8.67329 10.2985 8.67329 10.6667C8.67329 11.0349 8.37482 11.3334 8.00663 11.3334H7.99996C7.63177 11.3334 7.33329 11.0349 7.33329 10.6667Z"
         fill="#CC7700"
       />
diff --git a/packages/ui/src/icons/center-panel-icon.tsx b/packages/ui/src/icons/center-panel-icon.tsx
index de01e2e2d..4704dbf0a 100644
--- a/packages/ui/src/icons/center-panel-icon.tsx
+++ b/packages/ui/src/icons/center-panel-icon.tsx
@@ -14,17 +14,17 @@ export const CenterPanelIcon: React.FC<ISvgIcons> = ({ className = "text-current
     <path
       d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
     <path
       d="M15.1111 8.00009H8.8001C8.33334 8.00007 8.00003 8.0001 8.00012 8.88897V15.1111C8.00012 16 8.00012 16 8.8001 16H15.1111C16 16 16 16 16 15.1111V8.88897C16 8.00009 16 8.00009 15.1111 8.00009H15.1111Z"
       fill="currentColor"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
   </svg>
 );
diff --git a/packages/ui/src/icons/cycle/circle-dot-full-icon.tsx b/packages/ui/src/icons/cycle/circle-dot-full-icon.tsx
index f8b528a61..d6cf059ef 100644
--- a/packages/ui/src/icons/cycle/circle-dot-full-icon.tsx
+++ b/packages/ui/src/icons/cycle/circle-dot-full-icon.tsx
@@ -4,7 +4,7 @@ import { ISvgIcons } from "../type";
 
 export const CircleDotFullIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
   <svg viewBox="0 0 24 24" className={`${className} stroke-1`} fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
-    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" strokeLinecap="round" />
-    <circle cx="12" cy="12" r="6.25" fill="currentColor" stroke-width="0.5" />
+    <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+    <circle cx="12" cy="12" r="6.25" fill="currentColor" strokeWidth="0.5" />
   </svg>
 );
diff --git a/packages/ui/src/icons/discord-icon.tsx b/packages/ui/src/icons/discord-icon.tsx
index 6a2e0083a..89f441045 100644
--- a/packages/ui/src/icons/discord-icon.tsx
+++ b/packages/ui/src/icons/discord-icon.tsx
@@ -11,7 +11,7 @@ export const DiscordIcon: React.FC<ISvgIcons> = ({ width = "24", height = "24",
     fill="currentColor"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g clip-path="url(#clip0_4112_17440)">
+    <g clipPath="url(#clip0_4112_17440)">
       <mask id="mask0_4112_17440" maskUnits="userSpaceOnUse" x="0" y="0" width={width} height={height}>
         <path d="M24 0H0V24H24V0Z" fill="white" />
       </mask>
diff --git a/packages/ui/src/icons/done-icon.tsx b/packages/ui/src/icons/done-icon.tsx
index f8f65aa5f..82783ea1d 100644
--- a/packages/ui/src/icons/done-icon.tsx
+++ b/packages/ui/src/icons/done-icon.tsx
@@ -11,10 +11,10 @@ export const DoneState: React.FC<ISvgIcons> = ({ width = "10", height = "11", cl
     xmlns="http://www.w3.org/2000/svg"
     className={className}
   >
-    <circle cx="5" cy="5.5" r="4.4" stroke="#15A34A" stroke-width="1.2" />
+    <circle cx="5" cy="5.5" r="4.4" stroke="#15A34A" strokeWidth="1.2" />
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M2.5 5.59375L3.82582 6.91957L4.26777 6.47763L2.94194 5.15181L2.5 5.59375ZM4.26777 7.36152L7.36136 4.26793L6.91942 3.82599L3.82583 6.91958L4.26777 7.36152Z"
       fill="#15A34A"
     />
diff --git a/packages/ui/src/icons/favorite-folder-icon.tsx b/packages/ui/src/icons/favorite-folder-icon.tsx
index 03ebba71b..2f464e815 100644
--- a/packages/ui/src/icons/favorite-folder-icon.tsx
+++ b/packages/ui/src/icons/favorite-folder-icon.tsx
@@ -15,17 +15,15 @@ export const FavoriteFolderIcon: React.FC<ISvgIcons> = ({ className = "text-curr
   >
     <path
       d="M7.33325 13.3334H2.66659C2.31296 13.3334 1.97382 13.1929 1.72378 12.9429C1.47373 12.6928 1.33325 12.3537 1.33325 12.0001V3.3334C1.33325 2.97978 1.47373 2.64064 1.72378 2.39059C1.97382 2.14054 2.31296 2.00006 2.66659 2.00006H5.26659C5.48958 1.99788 5.70955 2.05166 5.90638 2.15648C6.10322 2.2613 6.27061 2.41381 6.39325 2.60006L6.93325 3.40006C7.05466 3.58442 7.21994 3.73574 7.41425 3.84047C7.60857 3.94519 7.82585 4.00003 8.04658 4.00006H13.3333C13.6869 4.00006 14.026 4.14054 14.2761 4.39059C14.5261 4.64064 14.6666 4.97978 14.6666 5.3334V6.3334"
-      // stroke="#60646C"
-      stroke-width="1.25"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
     <path
       d="M12.1373 8L13.0038 9.75535L14.9414 10.0386L13.5394 11.4041L13.8702 13.3333L12.1373 12.422L10.4044 13.3333L10.7353 11.4041L9.33325 10.0386L11.2709 9.75535L12.1373 8Z"
-      stroke-width="1.25"
-      // stroke="#60646C"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       fill="none"
     />
   </svg>
diff --git a/packages/ui/src/icons/in-progress-icon.tsx b/packages/ui/src/icons/in-progress-icon.tsx
index 085f9d74d..f85b7b26e 100644
--- a/packages/ui/src/icons/in-progress-icon.tsx
+++ b/packages/ui/src/icons/in-progress-icon.tsx
@@ -11,7 +11,7 @@ export const InProgressState: React.FC<ISvgIcons> = ({ width = "10", height = "1
     xmlns="http://www.w3.org/2000/svg"
     className={className}
   >
-    <circle cx="6" cy="6.5" r="4.4" stroke="#EA8900" stroke-width="1.2" />
-    <circle cx="6" cy="6.5" r="2.4" stroke="#EA8900" stroke-width="1.2" stroke-dasharray="4 4" />
+    <circle cx="6" cy="6.5" r="4.4" stroke={color ?? "#EA8900"} strokeWidth="1.2" />
+    <circle cx="6" cy="6.5" r="2.4" stroke={color ?? "#EA8900"} strokeWidth="1.2" strokeDasharray="4 4" />
   </svg>
 );
diff --git a/packages/ui/src/icons/info-icon.tsx b/packages/ui/src/icons/info-icon.tsx
index 5dbc7f756..b71337539 100644
--- a/packages/ui/src/icons/info-icon.tsx
+++ b/packages/ui/src/icons/info-icon.tsx
@@ -8,9 +8,9 @@ export const InfoIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...r
     className={`${className} stroke-2`}
     stroke="currentColor"
     fill="none"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
     xmlns="http://www.w3.org/2000/svg"
     {...rest}
   >
diff --git a/packages/ui/src/icons/lead-icon.tsx b/packages/ui/src/icons/lead-icon.tsx
index 75575d35e..5bb9d4b81 100644
--- a/packages/ui/src/icons/lead-icon.tsx
+++ b/packages/ui/src/icons/lead-icon.tsx
@@ -8,11 +8,11 @@ export const LeadIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...r
       d="M0.571533 9C0.571533 4.02944 4.60097 0 9.57153 0C14.5421 0 18.5715 4.02944 18.5715 9C18.5715 13.9706 14.5421 18 9.57153 18C4.60097 18 0.571533 13.9706 0.571533 9Z"
       fill="#3372FF"
     />
-    <g clip-path="url(#clip0_8992_2377)">
+    <g clipPath="url(#clip0_8992_2377)">
       <circle cx="9.57153" cy="6.5" r="2.5" fill="#F5F5FF" />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M8.94653 9.625C6.53029 9.625 4.57153 11.5838 4.57153 14H9.57153H14.5715C14.5715 11.5838 12.6128 9.625 10.1965 9.625H9.82153L10.8215 13.0278L9.57153 14L8.32153 13.0278L9.32153 9.625H8.94653Z"
         fill="#F5F5FF"
       />
diff --git a/packages/ui/src/icons/multiple-sticky.tsx b/packages/ui/src/icons/multiple-sticky.tsx
index 9c33205e9..60f2eaf9b 100644
--- a/packages/ui/src/icons/multiple-sticky.tsx
+++ b/packages/ui/src/icons/multiple-sticky.tsx
@@ -13,14 +13,14 @@ export const RecentStickyIcon: React.FC<ISvgIcons> = ({ className = "text-curren
     {...rest}
   >
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M2.23602 12.7638C2.60067 13.1285 3.09525 13.3333 3.61095 13.3333H9.72206C9.94307 13.3333 10.155 13.2455 10.3113 13.0892L13.0891 10.3115C13.2454 10.1552 13.3332 9.94323 13.3332 9.72221V3.6111C13.3332 3.0954 13.1283 2.60083 12.7637 2.23617C12.399 1.87152 11.9044 1.66666 11.3887 1.66666H3.61095C3.09525 1.66666 2.60067 1.87152 2.23602 2.23617C1.87136 2.60083 1.6665 3.0954 1.6665 3.6111V11.3889C1.6665 11.9046 1.87136 12.3992 2.23602 12.7638ZM11.0435 9.99999L9.99984 11.0437V10.2778C9.99984 10.2041 10.0291 10.1334 10.0812 10.0813C10.1333 10.0293 10.2039 9.99999 10.2776 9.99999H11.0435ZM8.33317 11.6667V10.2778C8.33317 9.76207 8.53803 9.26749 8.90269 8.90284C9.26734 8.53819 9.76192 8.33332 10.2776 8.33332H11.6665V3.6111C11.6665 3.53743 11.6372 3.46678 11.5851 3.41468C11.5331 3.36259 11.4624 3.33332 11.3887 3.33332H3.61095C3.53728 3.33332 3.46662 3.36259 3.41453 3.41468C3.36244 3.46678 3.33317 3.53743 3.33317 3.6111V11.3889C3.33317 11.4626 3.36244 11.5332 3.41453 11.5853C3.46662 11.6374 3.53728 11.6667 3.61095 11.6667H8.33317Z"
       fill="currentColor"
     />
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M6.36088 16.832C6.65667 17.2545 7.10816 17.5421 7.61603 17.6317L13.6343 18.6928C13.852 18.7312 14.0759 18.6816 14.257 18.5548L17.4749 16.3016C17.656 16.1748 17.7792 15.9813 17.8176 15.7636L18.8788 9.74538C18.9683 9.23752 18.8525 8.71488 18.5567 8.29244C18.2609 7.87001 17.8094 7.58238 17.3015 7.49283L15.1445 7.11249C14.6913 7.03257 14.2591 7.33521 14.1792 7.78846C14.0992 8.2417 14.4019 8.67392 14.8551 8.75384L17.0121 9.13417C17.0847 9.14697 17.1492 9.18806 17.1914 9.2484C17.2337 9.30875 17.2502 9.38341 17.2374 9.45597L16.4174 14.1064L15.0497 13.8653C14.5418 13.7757 14.0192 13.8916 13.5967 14.1874C13.1743 14.4832 12.8867 14.9347 12.7971 15.4425L12.5559 16.8103L7.90544 15.9903C7.83289 15.9775 7.76839 15.9364 7.72613 15.8761C7.68388 15.8157 7.66733 15.7411 7.68012 15.6685L7.77252 15.1445C7.85244 14.6913 7.5498 14.259 7.09655 14.1791C6.64331 14.0992 6.21109 14.4018 6.13117 14.8551L6.03877 15.3791C5.94922 15.887 6.06509 16.4096 6.36088 16.832ZM14.3054 16.4862L14.4384 15.7319C14.4512 15.6594 14.4923 15.5949 14.5527 15.5526C14.613 15.5104 14.6877 15.4938 14.7602 15.5066L15.5145 15.6396L14.3054 16.4862Z"
       fill="currentColor"
     />
diff --git a/packages/ui/src/icons/off-track-icon.tsx b/packages/ui/src/icons/off-track-icon.tsx
index cbb8ba1f8..1069d36f9 100644
--- a/packages/ui/src/icons/off-track-icon.tsx
+++ b/packages/ui/src/icons/off-track-icon.tsx
@@ -4,10 +4,10 @@ import { ISvgIcons } from "./type";
 
 export const OffTrackIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16" }) => (
   <svg width={width} height={height} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0_365_7595)">
+    <g clipPath="url(#clip0_365_7595)">
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M2.03658 7.33335H2.66663C3.03482 7.33335 3.33329 7.63183 3.33329 8.00002C3.33329 8.36821 3.03482 8.66669 2.66663 8.66669H2.03658C2.36821 11.6667 4.91159 14 7.99996 14C11.0883 14 13.6317 11.6667 13.9633 8.66669H13.3333C12.9651 8.66669 12.6666 8.36821 12.6666 8.00002C12.6666 7.63183 12.9651 7.33335 13.3333 7.33335H13.9633C13.6317 4.33339 11.0883 2.00002 7.99996 2.00002C4.91159 2.00002 2.36821 4.33339 2.03658 7.33335ZM0.666626 8.00002C0.666626 3.94993 3.94987 0.666687 7.99996 0.666687C12.05 0.666687 15.3333 3.94993 15.3333 8.00002C15.3333 12.0501 12.05 15.3334 7.99996 15.3334C3.94987 15.3334 0.666626 12.0501 0.666626 8.00002ZM6.66663 4.66669C7.03482 4.66669 7.33329 4.96516 7.33329 5.33335V8.00002C7.33329 8.36821 7.03482 8.66669 6.66663 8.66669C6.29844 8.66669 5.99996 8.36821 5.99996 8.00002V5.33335C5.99996 4.96516 6.29844 4.66669 6.66663 4.66669ZM9.33329 4.66669C9.70148 4.66669 9.99996 4.96516 9.99996 5.33335V8.00002C9.99996 8.36821 9.70148 8.66669 9.33329 8.66669C8.9651 8.66669 8.66663 8.36821 8.66663 8.00002V5.33335C8.66663 4.96516 8.9651 4.66669 9.33329 4.66669ZM5.99996 10.6667C5.99996 10.2985 6.29844 10 6.66663 10H6.67329C7.04148 10 7.33996 10.2985 7.33996 10.6667C7.33996 11.0349 7.04148 11.3334 6.67329 11.3334H6.66663C6.29844 11.3334 5.99996 11.0349 5.99996 10.6667ZM8.66663 10.6667C8.66663 10.2985 8.9651 10 9.33329 10H9.33996C9.70815 10 10.0066 10.2985 10.0066 10.6667C10.0066 11.0349 9.70815 11.3334 9.33996 11.3334H9.33329C8.9651 11.3334 8.66663 11.0349 8.66663 10.6667Z"
         fill="#CC0000"
       />
diff --git a/packages/ui/src/icons/on-track-icon.tsx b/packages/ui/src/icons/on-track-icon.tsx
index 5dcabcec9..55abe8b34 100644
--- a/packages/ui/src/icons/on-track-icon.tsx
+++ b/packages/ui/src/icons/on-track-icon.tsx
@@ -4,28 +4,28 @@ import { ISvgIcons } from "./type";
 
 export const OnTrackIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16" }) => (
   <svg width={width} height={height} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0_365_7535)">
+    <g clipPath="url(#clip0_365_7535)">
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M11.0001 2.80075C9.81139 2.11486 8.42345 1.85723 7.06776 2.07082C5.71206 2.28441 4.47057 2.9563 3.55031 3.97445C2.63004 4.9926 2.08664 6.29547 2.01071 7.66578C1.93479 9.03609 2.33093 10.391 3.13308 11.5046C3.93523 12.6182 5.0949 13.4231 6.4187 13.7852C7.74249 14.1472 9.1504 14.0445 10.4076 13.4941C11.6649 12.9438 12.6954 11.979 13.3274 10.7608C13.9594 9.5426 14.1547 8.14453 13.8807 6.79975C13.8072 6.43897 14.0401 6.08691 14.4009 6.0134C14.7616 5.93988 15.1137 6.17276 15.1872 6.53353C15.5221 8.17715 15.2834 9.88591 14.511 11.3748C13.7385 12.8638 12.4789 14.0429 10.9423 14.7156C9.4057 15.3882 7.68493 15.5138 6.06696 15.0713C4.44898 14.6288 3.03161 13.645 2.05121 12.2839C1.0708 10.9229 0.586626 9.26684 0.679423 7.59202C0.772221 5.91719 1.43638 4.3248 2.56115 3.08039C3.68591 1.83598 5.2033 1.01478 6.86025 0.753732C8.51721 0.492682 10.2136 0.807564 11.6665 1.64587C11.9854 1.82987 12.0947 2.23757 11.9107 2.55648C11.7267 2.8754 11.319 2.98476 11.0001 2.80075ZM15.138 2.19524C15.3984 2.45559 15.3984 2.8777 15.138 3.13805L8.47136 9.80471C8.21101 10.0651 7.7889 10.0651 7.52855 9.80471L5.52856 7.80471C5.26821 7.54436 5.26821 7.12225 5.52856 6.8619C5.7889 6.60155 6.21101 6.60155 6.47136 6.8619L7.99996 8.3905L14.1952 2.19524C14.4556 1.93489 14.8777 1.93489 15.138 2.19524Z"
         fill="#1FAD40"
       />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M7.99996 15.3333C7.63177 15.3333 7.33329 15.0348x33329 14.6666V13.3333C7.33329 12.9651 7.63177 12.6666 7.99996 12.6666C8.36815 12.6666 8.66663 12.9651 8.66663 13.3333V14.6666C8.66663 15.0348 8.36815 15.3333 7.99996 15.3333Z"
         fill="#1FAD40"
       />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M7.99996 3.33331C7.63177 3.33331 7.33329 3.03483 7.33329 2.66664V1.33331C7.33329 0.965117 7.63177 0.66664 7.99996 0.66664C8.36815 0.66664 8.66663 0.965117 8.66663 1.33331V2.66664C8.66663 3.03483 8.36815 3.33331 7.99996 3.33331Z"
         fill="#1FAD40"
       />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M3.33329 7.99997C3.33329 8.36816 3.03482 8.66664 2.66663 8.66664H1.33329C0.965103 8.66664 0.666626 8.36816 0.666626 7.99997C0.666626 7.63178 0.965103 7.33331 1.33329 7.33331H2.66663C3.03482 7.33331 3.33329 7.63178 3.33329 7.99997Z"
         fill="#1FAD40"
       />
diff --git a/packages/ui/src/icons/pending-icon.tsx b/packages/ui/src/icons/pending-icon.tsx
index 5269a22e2..217edaf83 100644
--- a/packages/ui/src/icons/pending-icon.tsx
+++ b/packages/ui/src/icons/pending-icon.tsx
@@ -12,14 +12,14 @@ export const PendingState: React.FC<ISvgIcons> = ({ width = "10", height = "11",
     className={className}
   >
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12Z"
       fill={color}
     />
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M12 5C12.5523 5 13 5.44772 13 6V11.382L16.4472 13.1056C16.9412 13.3526 17.1414 13.9532 16.8944 14.4472C16.6474 14.9412 16.0468 15.1414 15.5528 14.8944L11.5528 12.8944C11.214 12.725 11 12.3788 11 12V6C11 5.44772 11.4477 5 12 5Z"
       fill={color}
     />
diff --git a/packages/ui/src/icons/plane-icon.tsx b/packages/ui/src/icons/plane-icon.tsx
index f56e8e03e..113d2dfd0 100644
--- a/packages/ui/src/icons/plane-icon.tsx
+++ b/packages/ui/src/icons/plane-icon.tsx
@@ -16,7 +16,7 @@ export const PlaneNewIcon: React.FC<ISvgIcons> = ({
     xmlns="http://www.w3.org/2000/svg"
     className={className}
   >
-    <g clip-path="url(#clip0_888_35560)">
+    <g clipPath="url(#clip0_888_35560)">
       <path
         d="M5.15383 9.50566V5.15381H1.34152C0.601228 5.15381 0 5.75399 0 6.49533V14.6595C0 15.3998 0.600183 16.001 1.34152 16.001H9.50568C10.246 16.001 10.8472 15.4008 10.8472 14.6595V10.8461H6.49536C5.75506 10.8461 5.15383 10.246 5.15383 9.50461V9.50566Z"
         fill={color}
diff --git a/packages/ui/src/icons/planned-icon.tsx b/packages/ui/src/icons/planned-icon.tsx
index 88aa6bbe3..eefc7da30 100644
--- a/packages/ui/src/icons/planned-icon.tsx
+++ b/packages/ui/src/icons/planned-icon.tsx
@@ -11,22 +11,22 @@ export const PlannedState: React.FC<ISvgIcons> = ({ width = "10", height = "11",
     xmlns="http://www.w3.org/2000/svg"
     className={className}
   >
-    <g clip-path="url(#clip0_3180_28635)">
+    <g clipPath="url(#clip0_3180_28635)">
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M7.11853 4.7C7.20073 4.88749 7.38342 5.01866 7.59656 5.02037C7.88848 5.02271 8.12698 4.7813 8.12925 4.48116L8.13344 3.92962C8.1348 3.74982 8.04958 3.58096 7.90581 3.47859C7.76203 3.37623 7.57832 3.3536 7.41509 3.41815L3.97959 4.77682C3.77547 4.85755 3.64077 5.05919 3.64077 5.28406L3.64077 9.0883C3.64077 9.27834 3.73732 9.45458 3.8954 9.55308C4.05347 9.65157 4.25011 9.65802 4.41396 9.57008L4.90523 9.30643C5.16402 9.16754 5.26431 8.83925 5.12922 8.57317C5.04115 8.39971 4.8748 8.29551 4.69795 8.28247L4.69795 5.65729L7.11853 4.7Z"
         fill="#455068"
       />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M5.00428 3.06914C5.08648 3.25663 5.26916 3.3878 5.4823 3.38951C5.77422 3.39185 6.01272 3.15044 6.015 2.8503L6.01918 2.29876C6.02054 2.11896 5.93532 1.9501 5.79155 1.84774C5.64777 1.74537 5.46406 1.72274 5.30084 1.78729L1.86534 3.14597C1.66121 3.22669 1.52652 3.42834 1.52652 3.6532L1.52652 7.45745C1.52652 7.64749 1.62307 7.82372 1.78114 7.92222C1.93922 8.02071 2.13585 8.02716 2.29971 7.93922L2.79097 7.67557C3.04977 7.53668 3.15005 7.20839 3.01496 6.94231C2.92689 6.76885 2.76054 6.66465 2.5837 6.65161L2.5837 4.02643L5.00428 3.06914Z"
         fill="#455068"
       />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M10.473 9.34799C10.4728 9.57269 10.3382 9.77413 10.1342 9.85482L6.70129 11.2129C6.53874 11.2772 6.35582 11.255 6.21225 11.1536C6.06867 11.0523 5.98288 10.8847 5.98288 10.7056L5.98288 6.90139C5.98288 6.67653 6.11757 6.47489 6.3217 6.39416L9.7572 5.03548C9.91981 4.97118 10.1028 4.99338 10.2464 5.09484C10.3899 5.19629 10.4757 5.36397 10.4756 5.5431L10.473 9.34799ZM9.41784 6.33426L7.04006 7.27463L7.04006 9.91423L9.41605 8.97431L9.41784 6.33426Z"
         fill="#455068"
       />
diff --git a/packages/ui/src/icons/sticky-note-icon.tsx b/packages/ui/src/icons/sticky-note-icon.tsx
index 871950289..fd1652dad 100644
--- a/packages/ui/src/icons/sticky-note-icon.tsx
+++ b/packages/ui/src/icons/sticky-note-icon.tsx
@@ -23,8 +23,8 @@ export const StickyNoteIcon: React.FC<ISvgIcons> = ({ width = "17", height = "17
       fill="currentColor"
     />
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M1.27694 15.8898C1.66764 16.2805 2.19755 16.5 2.75008 16.5H11.9167C12.0273 16.5 12.1332 16.4561 12.2114 16.3779L16.378 12.2113C16.4562 12.1331 16.5001 12.0271 16.5001 11.9166V2.74996C16.5001 2.19742 16.2806 1.66752 15.8899 1.27682C15.4992 0.88612 14.9693 0.666626 14.4167 0.666626H2.75008C2.19755 0.666626 1.66764 0.88612 1.27694 1.27682C0.886241 1.66752 0.666748 2.19742 0.666748 2.74996V14.4166C0.666748 14.9692 0.886241 15.4991 1.27694 15.8898ZM15.6667 11.5V11.744L11.7442 15.6666H11.5001V12.75C11.5001 12.4184 11.6318 12.1005 11.8662 11.8661C12.1006 11.6317 12.4186 11.5 12.7501 11.5H15.6667ZM10.6667 15.6666V12.75C10.6667 12.1974 10.8862 11.6675 11.2769 11.2768C11.6676 10.8861 12.1975 10.6666 12.7501 10.6666H15.6667V2.74996C15.6667 2.41844 15.5351 2.1005 15.3006 1.86608C15.0662 1.63166 14.7483 1.49996 14.4167 1.49996H2.75008C2.41856 1.49996 2.10062 1.63166 1.8662 1.86608C1.63178 2.1005 1.50008 2.41844 1.50008 2.74996V14.4166C1.50008 14.7481 1.63178 15.0661 1.8662 15.3005C2.10062 15.5349 2.41856 15.6666 2.75008 15.6666H10.6667Z"
       fill="currentColor"
     />
diff --git a/packages/ui/src/icons/updates-icon.tsx b/packages/ui/src/icons/updates-icon.tsx
index 978eb5f05..1b480f618 100644
--- a/packages/ui/src/icons/updates-icon.tsx
+++ b/packages/ui/src/icons/updates-icon.tsx
@@ -5,8 +5,8 @@ import { ISvgIcons } from "./type";
 export const UpdatesIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
   <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M6.54325 5.056C8.46325 2.58867 11.4633 1 14.8333 1C14.9659 1 15.093 1.05268 15.1868 1.14645C15.2806 1.24021 15.3333 1.36739 15.3333 1.5C15.3333 4.87067 13.7446 7.87 11.2773 9.79067C11.3799 10.4335 11.3418 11.0909 11.1656 11.7176C10.9895 12.3443 10.6795 12.9253 10.257 13.4205C9.83454 13.9158 9.30964 14.3135 8.71854 14.5862C8.12744 14.8588 7.48422 15 6.83325 15C6.70064 15 6.57347 14.9473 6.4797 14.8536C6.38593 14.7598 6.33325 14.6326 6.33325 14.5V11.746C5.6852 11.2342 5.09942 10.6482 4.58792 10H1.83325C1.70064 10 1.57347 9.94732 1.4797 9.85355C1.38593 9.75979 1.33325 9.63261 1.33325 9.5C1.3332 8.84897 1.47441 8.20568 1.74713 7.61453C2.01986 7.02337 2.41761 6.49843 2.91293 6.07594C3.40824 5.65345 3.98934 5.34346 4.6161 5.16737C5.24287 4.99128 5.90038 4.95328 6.54325 5.056ZM10.3333 4.5C9.93543 4.5 9.5539 4.65804 9.27259 4.93934C8.99129 5.22064 8.83325 5.60218 8.83325 6C8.83325 6.39782 8.99129 6.77936 9.27259 7.06066C9.5539 7.34196 9.93543 7.5 10.3333 7.5C10.7311 7.5 11.1126 7.34196 11.3939 7.06066C11.6752 6.77936 11.8333 6.39782 11.8333 6C11.8333 5.60218 11.6752 5.22064 11.3939 4.93934C11.1126 4.65804 10.7311 4.5 10.3333 4.5Z"
       fill="#8591AD"
     />
diff --git a/packages/ui/src/icons/wiki-icon.tsx b/packages/ui/src/icons/wiki-icon.tsx
index 7ef090714..5a3b992c7 100644
--- a/packages/ui/src/icons/wiki-icon.tsx
+++ b/packages/ui/src/icons/wiki-icon.tsx
@@ -11,7 +11,7 @@ export const WikiIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16", cla
     xmlns="http://www.w3.org/2000/svg"
     className={className}
   >
-    <g clip-path="url(#clip0_888_35566)">
+    <g clipPath="url(#clip0_888_35566)">
       <path
         d="M15.558 6.93332L9.06623 0.441504C8.47755 -0.147168 7.5229 -0.147168 6.93332 0.441504L0.441504 6.93332C-0.147168 7.52199 -0.147168 8.47664 0.441504 9.06623L6.93332 15.558C7.52199 16.1467 8.47664 16.1467 9.06623 15.558L15.558 9.06623C16.1467 8.47755 16.1467 7.5229 15.558 6.93332ZM10.7629 9.65855C10.7629 10.2682 10.2691 10.762 9.65946 10.762H6.341C5.73133 10.762 5.23758 10.2682 5.23758 9.65855V6.34008C5.23758 5.73042 5.73133 5.23667 6.341 5.23667H9.65946C10.2691 5.23667 10.7629 5.73042 10.7629 6.34008V9.65855Z"
         fill={color}