[WEB-4561] fix: SVG attributes in react components

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>
   );

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" />

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>

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}

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"
       />

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>
 );

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>
 );

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>

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"
     />

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>

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>
 );

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}
   >

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"
       />

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"
     />

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"
       />

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"
       />

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}
     />

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}