@magmamath/students-features 0.9.0-rc3 → 0.9.0-rc4

package/src/shared/icons/MATH/NotEqualIcon/NotEqualIcon.tsx

@@ -1,33 +1,28 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
 
 export const NotEqualIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M0.800049 5.92012C0.800049 5.47829 1.15822 5.12012 1.60005 5.12012H14.4C14.8419 5.12012 15.2 5.47829 15.2 5.92012C15.2 6.36194 14.8419 6.72012 14.4 6.72012H1.60005C1.15822 6.72012 0.800049 6.36194 0.800049 5.92012Z"
         fill={color}
       />
-      <path
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M0.800049 10.08C0.800049 9.6382 1.15822 9.28003 1.60005 9.28003H14.4C14.8419 9.28003 15.2 9.6382 15.2 10.08C15.2 10.5219 14.8419 10.88 14.4 10.88H1.60005C1.15822 10.88 0.800049 10.5219 0.800049 10.08Z"
         fill={color}
       />
-      <path
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M2.90882 13.0911C2.59641 12.7787 2.59641 12.2721 2.90882 11.9597L11.9598 2.90874C12.2722 2.59632 12.7787 2.59632 13.0912 2.90874C13.4036 3.22116 13.4036 3.72769 13.0912 4.04011L4.0402 13.0911C3.72778 13.4035 3.22124 13.4035 2.90882 13.0911Z"
         fill={color}
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/NthPowerIcon/NthPowerIcon.tsx

@@ -1,17 +1,12 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Rect } from 'react-native-svg'
 
 export const NthPowerIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 21 21"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect x="4.49902" y="7.57617" width="9.24" height="9.24" rx="1.548" stroke={color} />
-      <rect
+    <Svg width={size} height={size} viewBox="0 0 21 21" fill="none">
+      <Rect x="4.49902" y="7.57617" width="9.24" height="9.24" rx="1.548" stroke={color} />
+      <Rect
         x="14.149"
         y="1.08408"
         width="5.95203"
@@ -20,6 +15,6 @@ export const NthPowerIcon = ({ size = 20, color }: IconProps) => {
         stroke={color}
         strokeWidth="0.8"
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/NthRootIcon/NthRootIcon.tsx

@@ -1,24 +1,19 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path, Rect } from 'react-native-svg'
 
 const ASPECT_RATIO = 20 / 17
 
 export const NthRootIcon = ({ size = 20, color, extraColor }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size / ASPECT_RATIO}
-      viewBox="0 0 20 17"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size} height={size / ASPECT_RATIO} viewBox="0 0 20 17" fill="none">
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M10.3613 3.37678C10.4463 3.01541 10.7688 2.76001 11.14 2.76001H16.58C17.0218 2.76001 17.38 3.11818 17.38 3.56001C17.38 4.00184 17.0218 4.36001 16.58 4.36001H11.7736L9.35873 14.6232C9.28236 14.9478 9.01273 15.1909 8.68204 15.2335C8.35135 15.276 8.02896 15.109 7.87296 14.8143L5.21833 9.80001H4.42C3.97817 9.80001 3.62 9.44184 3.62 9.00001C3.62 8.55818 3.97817 8.20001 4.42 8.20001H5.7C5.99632 8.20001 6.26838 8.36381 6.40703 8.6257L8.28955 12.1816L10.3613 3.37678Z"
         fill={color}
       />
-      <rect
+      <Rect
         x="2.4"
         y="0.4"
         width="5.95203"
@@ -27,6 +22,6 @@ export const NthRootIcon = ({ size = 20, color, extraColor }: IconProps) => {
         stroke={extraColor}
         strokeWidth="0.8"
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/OmegaLowercaseIcon/OmegaLowercaseIcon.tsx

@@ -1,21 +1,16 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
 
 export const OmegaLowercaseIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M3.50062 4.41783C4.17209 3.67296 5.03321 3.25 5.69231 3.25C6.10652 3.25 6.44231 3.58579 6.44231 4C6.44231 4.41421 6.10652 4.75 5.69231 4.75C5.58218 4.75 5.09715 4.88704 4.61476 5.42217C4.16646 5.91949 3.75 6.73877 3.75 8C3.75 9.626 4.26296 10.4047 4.69739 10.787C4.92595 10.9881 5.16172 11.1056 5.35503 11.1726C5.45172 11.2061 5.53555 11.2262 5.59895 11.2376C5.65371 11.2475 5.68548 11.2495 5.69193 11.2499C5.69343 11.25 5.69356 11.25 5.69231 11.25C6.00099 11.25 6.20367 11.16 6.36331 11.0168C6.53991 10.8583 6.71224 10.5894 6.85648 10.1608C7.15031 9.28769 7.25 7.99712 7.25 6.4C7.25 5.98579 7.58579 5.65 8 5.65C8.41421 5.65 8.75 5.98579 8.75 6.4C8.75 7.99712 8.84969 9.28769 9.14352 10.1608C9.28776 10.5894 9.46009 10.8583 9.63669 11.0168C9.79633 11.16 9.99901 11.25 10.3077 11.25C10.5608 11.25 11.0373 11.0446 11.4881 10.4479C11.9172 9.87994 12.25 9.03915 12.25 8C12.25 6.96085 11.9172 6.12006 11.4881 5.5521C11.0373 4.95537 10.5608 4.75 10.3077 4.75C9.89348 4.75 9.55769 4.41421 9.55769 4C9.55769 3.58579 9.89348 3.25 10.3077 3.25C11.2085 3.25 12.0781 3.84463 12.685 4.6479C13.3136 5.47994 13.75 6.63915 13.75 8C13.75 9.36085 13.3136 10.5201 12.685 11.3521C12.0781 12.1554 11.2085 12.75 10.3077 12.75C9.65484 12.75 9.08829 12.54 8.63494 12.1332C8.37276 11.898 8.16545 11.6124 8 11.2979C7.83456 11.6124 7.62724 11.898 7.36506 12.1332C6.91171 12.54 6.34516 12.75 5.69231 12.75C5.34763 12.75 4.48936 12.602 3.70645 11.913C2.89088 11.1953 2.25 9.974 2.25 8C2.25 6.38123 2.79508 5.20051 3.50062 4.41783Z"
         fill={color}
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/OmegaUppercaseIcon/OmegaUppercaseIcon.tsx

@@ -1,21 +1,16 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
 
 export const OmegaUppercaseIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M8 2.75C5.23558 2.75 3.25 4.73558 3.25 7.5C3.25 9.23777 3.99334 10.3133 4.79829 11.1758C4.99774 11.3895 5.19819 11.587 5.39877 11.7847L5.41908 11.8047C5.62105 12.0038 5.82975 12.21 6.01237 12.4143C6.35794 12.801 6.75 13.3276 6.75 14C6.75 14.4142 6.41421 14.75 6 14.75H2C1.58579 14.75 1.25 14.4142 1.25 14C1.25 13.5858 1.58579 13.25 2 13.25H4.74168C4.63079 13.1344 4.50615 13.0111 4.36608 12.873L4.3396 12.8469C4.14335 12.6535 3.92302 12.4364 3.70171 12.1992C2.75666 11.1867 1.75 9.76223 1.75 7.5C1.75 3.90715 4.40715 1.25 8 1.25C11.5929 1.25 14.25 3.90715 14.25 7.5C14.25 9.79963 13.0802 11.2341 12.013 12.2347C11.7609 12.471 11.5099 12.6874 11.2855 12.8809L11.2555 12.9068C11.1114 13.0311 10.9811 13.1439 10.8635 13.25H14C14.4142 13.25 14.75 13.5858 14.75 14C14.75 14.4142 14.4142 14.75 14 14.75H9.5C9.08579 14.75 8.75 14.4142 8.75 14C8.75 13.2894 9.21903 12.7515 9.60028 12.3782C9.80766 12.1751 10.0448 11.9701 10.2758 11.7709L10.2993 11.7507C10.5283 11.5531 10.7583 11.3548 10.987 11.1403C11.9198 10.2659 12.75 9.20037 12.75 7.5C12.75 4.73558 10.7644 2.75 8 2.75Z"
         fill={color}
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/OrderedPairIcon/OrderedPairIcon.tsx

@@ -1,35 +1,30 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path, Rect } from 'react-native-svg'
 
 const ASPECT_RATIO = 37 / 20
 
 export const OrderedPairIcon = ({ size = 20, color, extraColor }: IconProps) => {
   return (
-    <svg
-      width={size * ASPECT_RATIO}
-      height={size}
-      viewBox="0 0 37 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size * ASPECT_RATIO} height={size} viewBox="0 0 37 20" fill="none">
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M3.90533 3.21967C4.19823 3.51256 4.19823 3.98744 3.90533 4.28033C0.67361 7.51206 0.736927 13.001 3.8631 15.6806C4.17759 15.9501 4.21401 16.4236 3.94445 16.7381C3.67488 17.0526 3.20141 17.089 2.88691 16.8194C-0.986916 13.499 -0.923598 6.98794 2.84467 3.21967C3.13757 2.92678 3.61244 2.92678 3.90533 3.21967Z"
         fill={color}
       />
-      <rect x="5.625" y="5.37988" width="9.24" height="9.24" rx="1.548" stroke={extraColor} />
-      <path
+      <Rect x="5.625" y="5.37988" width="9.24" height="9.24" rx="1.548" stroke={extraColor} />
+      <Path
         d="M16.7652 11.5199C16.7652 12.4036 17.4816 13.1199 18.3652 13.1199C18.3652 14.1199 16.3652 14.2455 16.3652 14.6199C16.3652 14.9943 16.6986 15.1199 16.8652 15.1199C18.606 15.1199 19.9652 13.3726 19.9652 11.5199C19.9652 10.6363 19.2489 9.91992 18.3652 9.91992C17.4816 9.91992 16.7652 10.6363 16.7652 11.5199Z"
         fill={color}
       />
-      <rect x="21.4648" y="5.37988" width="9.24" height="9.24" rx="1.548" stroke={extraColor} />
-      <path
+      <Rect x="21.4648" y="5.37988" width="9.24" height="9.24" rx="1.548" stroke={extraColor} />
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M32.4247 3.21967C32.1319 3.51256 32.1319 3.98744 32.4247 4.28033C35.6565 7.51206 35.5932 13.001 32.467 15.6806C32.1525 15.9501 32.1161 16.4236 32.3856 16.7381C32.6552 17.0526 33.1287 17.089 33.4432 16.8194C37.317 13.499 37.2537 6.98794 33.4854 3.21967C33.1925 2.92678 32.7176 2.92678 32.4247 3.21967Z"
         fill={color}
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/ParallelIcon/ParallelIcon.tsx

@@ -1,27 +1,22 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
 
 export const ParallelIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M6.45002 15.1998C6.0082 15.1998 5.65002 14.8416 5.65002 14.3998V1.5998C5.65002 1.15798 6.0082 0.799805 6.45002 0.799805C6.89185 0.799805 7.25002 1.15798 7.25002 1.5998V14.3998C7.25002 14.8416 6.89185 15.1998 6.45002 15.1998Z"
         fill={color}
       />
-      <path
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M9.55002 15.1998C9.1082 15.1998 8.75002 14.8416 8.75002 14.3998V1.5998C8.75002 1.15798 9.1082 0.799805 9.55002 0.799805C9.99185 0.799805 10.35 1.15798 10.35 1.5998V14.3998C10.35 14.8416 9.99185 15.1998 9.55002 15.1998Z"
         fill={color}
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/ParenthesesIcon/ParenthesesIcon.tsx

@@ -1,27 +1,22 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
 
 export const ParenthesesIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M5.78033 1.21967C6.07323 1.51256 6.07323 1.98744 5.78033 2.28033C2.54861 5.51206 2.61193 11.001 5.7381 13.6806C6.05259 13.9501 6.08901 14.4236 5.81945 14.7381C5.54988 15.0526 5.07641 15.089 4.76191 14.8194C0.888084 11.499 0.951402 4.98794 4.71967 1.21967C5.01257 0.926777 5.48744 0.926777 5.78033 1.21967Z"
         fill={color}
       />
-      <path
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M10.2197 1.21967C9.92677 1.51256 9.92677 1.98744 10.2197 2.28033C13.4514 5.51206 13.3881 11.001 10.2619 13.6806C9.94741 13.9501 9.91099 14.4236 10.1806 14.7381C10.4501 15.0526 10.9236 15.089 11.2381 14.8194C15.1119 11.499 15.0486 4.98794 11.2803 1.21967C10.9874 0.926777 10.5126 0.926777 10.2197 1.21967Z"
         fill={color}
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/PerMilleIcon/PerMilleIcon.tsx

@@ -1,41 +1,36 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
 
 const ASPECT_RATIO = 22 / 18
 
 export const PerMilleIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size * ASPECT_RATIO}
-      height={size}
-      viewBox="0 0 22 18"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size * ASPECT_RATIO} height={size} viewBox="0 0 22 18" fill="none">
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M5.24142 2.75094C6.63935 3.59354 7.11832 5.4597 6.31122 6.91913C5.50413 8.37855 3.7166 8.87859 2.31867 8.03599C0.920745 7.19339 0.441779 5.32723 1.24887 3.8678C2.05597 2.40838 3.84349 1.90834 5.24142 2.75094ZM5.18626 6.24105C5.63464 5.43026 5.36855 4.39351 4.59192 3.9254C3.8153 3.45729 2.82223 3.73508 2.37384 4.54588C1.92545 5.35667 2.19155 6.39342 2.96817 6.86153C3.7448 7.32964 4.73787 7.05185 5.18626 6.24105Z"
         fill={color}
       />
-      <path
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M3.92337 15.6063C3.53506 15.3723 3.40202 14.8539 3.62621 14.4485L10.1212 2.70397C10.3454 2.29857 10.8419 2.15967 11.2302 2.39373C11.6186 2.62778 11.7516 3.14616 11.5274 3.55155L5.03242 15.2961C4.80822 15.7015 4.31169 15.8404 3.92337 15.6063Z"
         fill={color}
       />
-      <path
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M12.8349 9.96407C14.2329 10.8067 14.7118 12.6728 13.9047 14.1323C13.0977 15.5917 11.3101 16.0917 9.9122 15.2491C8.51427 14.4065 8.03531 12.5404 8.8424 11.0809C9.6495 9.62151 11.437 9.12147 12.8349 9.96407ZM12.7798 13.4542C13.2282 12.6434 12.9621 11.6066 12.1854 11.1385C11.4088 10.6704 10.4158 10.9482 9.96737 11.759C9.51898 12.5698 9.78507 13.6065 10.5617 14.0747C11.3383 14.5428 12.3314 14.265 12.7798 13.4542Z"
         fill={color}
       />
-      <path
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M19.6814 10.3055C21.0793 11.1481 21.5583 13.0143 20.7512 14.4737C19.9441 15.9332 18.1565 16.4332 16.7586 15.5906C15.3607 14.748 14.8817 12.8818 15.6888 11.4224C16.4959 9.96299 18.2834 9.46295 19.6814 10.3055ZM19.6262 13.7957C20.0746 12.9849 19.8085 11.9481 19.0319 11.48C18.2552 11.0119 17.2622 11.2897 16.8138 12.1005C16.3654 12.9113 16.6315 13.948 17.4081 14.4161C18.1847 14.8842 19.1778 14.6065 19.6262 13.7957Z"
         fill={color}
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/PercentIcon/PercentIcon.tsx

@@ -1,33 +1,28 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
 
 export const PercentIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M5.66461 1.75094C7.06254 2.59354 7.54151 4.4597 6.73441 5.91913C5.92732 7.37855 4.13979 7.87859 2.74186 7.03599C1.34393 6.19339 0.864966 4.32723 1.67206 2.8678C2.47916 1.40838 4.26668 0.908344 5.66461 1.75094ZM5.60944 5.24105C6.05783 4.43026 5.79174 3.39351 5.01511 2.9254C4.23848 2.45729 3.24541 2.73508 2.79703 3.54588C2.34864 4.35667 2.61473 5.39342 3.39136 5.86153C4.16799 6.32964 5.16106 6.05185 5.60944 5.24105Z"
         fill={color}
       />
-      <path
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M4.34656 14.6063C3.95825 14.3723 3.8252 13.8539 4.0494 13.4485L10.5444 1.70397C10.7686 1.29857 11.2651 1.15967 11.6534 1.39373C12.0417 1.62778 12.1748 2.14616 11.9506 2.55155L5.4556 14.2961C5.23141 14.7015 4.73488 14.8404 4.34656 14.6063Z"
         fill={color}
       />
-      <path
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M13.2581 8.96407C14.6561 9.80667 15.135 11.6728 14.3279 13.1323C13.5208 14.5917 11.7333 15.0917 10.3354 14.2491C8.93746 13.4065 8.45849 11.5404 9.26559 10.0809C10.0727 8.62151 11.8602 8.12147 13.2581 8.96407ZM13.203 12.4542C13.6514 11.6434 13.3853 10.6066 12.6086 10.1385C11.832 9.67041 10.8389 9.94821 10.3906 10.759C9.94217 11.5698 10.2083 12.6065 10.9849 13.0747C11.7615 13.5428 12.7546 13.265 13.203 12.4542Z"
         fill={color}
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/PerpendicularIcon/PerpendicularIcon.tsx

@@ -1,25 +1,20 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
 
 export const PerpendicularIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
         d="M7.19995 14L7.19995 1.2C7.19995 0.758175 7.55812 0.400002 7.99995 0.400002C8.44178 0.400002 8.79995 0.758175 8.79995 1.2V14H7.19995Z"
         fill={color}
       />
-      <path
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M0.800049 14.8C0.800049 14.3582 1.15822 14 1.60005 14H14.4C14.8419 14 15.2 14.3582 15.2 14.8C15.2 15.2418 14.8419 15.6 14.4 15.6H1.60005C1.15822 15.6 0.800049 15.2418 0.800049 14.8Z"
         fill={color}
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/PesoIcon/PesoIcon.tsx

@@ -1,21 +1,16 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
 
 const ASPECT_RATIO = 16 / 17
 
 export const PesoIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size * ASPECT_RATIO}
-      height={size}
-      viewBox="0 0 16 17"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size * ASPECT_RATIO} height={size} viewBox="0 0 16 17" fill="none">
+      <Path
         d="M8.6113 5.636C10.7533 5.636 11.9853 7.316 11.9853 9.332C11.9853 11.334 10.7393 13 8.6253 13C7.6593 13 6.8473 12.65 6.4133 12.062V16.094H4.4253V5.804H6.3573V6.714C6.7073 6.07 7.5613 5.636 8.6113 5.636ZM6.3993 9.318C6.3993 10.438 7.1273 11.25 8.2333 11.25C9.2973 11.25 10.0113 10.438 10.0113 9.318C10.0113 8.24 9.3393 7.386 8.2333 7.386C7.1273 7.386 6.3993 8.198 6.3993 9.318Z"
         fill={color}
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/PhiIcon/PhiIcon.tsx

@@ -1,21 +1,16 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
 
 export const PhiIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M9.52123 3C9.01615 3 8.57037 3.12863 8.20762 3.39733C7.84995 3.66227 7.63579 4.01685 7.50648 4.36164C7.27047 4.99098 7.27087 5.73169 7.27112 6.20163L7.27114 6.24461L7.27112 6.24992V9.42363C6.25664 9.20401 5.64568 8.53647 5.38118 7.75857C5.04132 6.75901 5.268 5.56376 6.05146 4.78034C6.34436 4.48746 6.34437 4.01258 6.05148 3.71968C5.7586 3.42678 5.28372 3.42677 4.99082 3.71966C3.77418 4.93624 3.45086 6.74099 3.96103 8.24143C4.42236 9.59825 5.56066 10.6978 7.27112 10.947V14.25C7.27112 14.6642 7.60692 15 8.02113 15C8.43534 15 8.77112 14.6641 8.77112 14.2499V10.9482C9.85783 10.793 10.7012 10.2988 11.2902 9.60137C11.9915 8.77091 12.2839 7.71086 12.2712 6.74018C12.2612 5.98113 12.0719 5.10234 11.6673 4.38716C11.2611 3.66925 10.5583 3 9.52123 3ZM8.77112 9.4261C9.40026 9.29297 9.84066 8.99297 10.1441 8.63359C10.573 8.12569 10.7801 7.43575 10.7713 6.75982C10.764 6.20282 10.6196 5.58161 10.3617 5.12581C10.1054 4.67272 9.81685 4.5 9.52123 4.5C9.27632 4.5 9.15959 4.55887 9.10046 4.60267C9.03626 4.65023 8.96917 4.73315 8.91097 4.88836C8.78021 5.23701 8.77119 5.71636 8.77114 6.25008L8.77112 6.25567V9.4261Z"
         fill={color}
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/PiIcon/PiIcon.tsx

@@ -1,16 +1,11 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
 
 export const PiIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M5.43698 3.77106C4.75988 3.77106 4.11291 4.03587 3.64932 4.50276L2.38647 5.7746C2.14446 6.01834 1.73943 6.03031 1.48181 5.80135C1.22419 5.57239 1.21153 5.1892 1.45354 4.94546L2.71639 3.67362C3.42192 2.96307 4.40653 2.56006 5.43698 2.56006H14.08C14.4335 2.56006 14.72 2.83115 14.72 3.16556C14.72 3.49996 14.4335 3.77106 14.08 3.77106H10.8541V11.2032C10.8541 11.7698 11.3396 12.2291 11.9385 12.2291C12.7677 12.2291 13.44 11.593 13.44 10.8085V10.5736C13.44 10.2392 13.7265 9.96808 14.08 9.96808C14.4335 9.96808 14.72 10.2392 14.72 10.5736V10.8085C14.72 12.2619 13.4747 13.4401 11.9385 13.4401C10.6327 13.4401 9.5741 12.4386 9.5741 11.2032V3.77106H6.79587C6.79104 3.9333 6.78384 4.12402 6.77312 4.33837C6.73733 5.05402 6.66214 6.03751 6.50408 7.10641C6.34632 8.17318 6.10406 9.33877 5.72949 10.4136C5.35772 11.4805 4.83959 12.5053 4.10167 13.249C3.85974 13.4928 3.45472 13.5049 3.19701 13.276C2.93931 13.0471 2.92652 12.6639 3.16845 12.4201C3.72384 11.8604 4.16867 11.025 4.51385 10.0345C4.85622 9.052 5.08489 7.96326 5.23641 6.93862C5.38762 5.91613 5.46004 4.97113 5.49454 4.28115C5.5041 4.08991 5.51074 3.91861 5.51533 3.77106H5.43698Z"
@@ -19,6 +14,6 @@ export const PiIcon = ({ size = 20, color }: IconProps) => {
         strokeWidth="0.2"
         strokeLinecap="round"
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/PlusMinusIcon/PlusMinusIcon.tsx

@@ -1,25 +1,20 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
 
 export const PlusMinusIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
         d="M8.75 1.25C8.75 0.835786 8.41421 0.5 8 0.5C7.58579 0.5 7.25 0.835786 7.25 1.25V4.5H4C3.58579 4.5 3.25 4.83579 3.25 5.25C3.25 5.66421 3.58579 6 4 6H7.25V9.25C7.25 9.66421 7.58579 10 8 10C8.41421 10 8.75 9.66421 8.75 9.25V6H12C12.4142 6 12.75 5.66421 12.75 5.25C12.75 4.83579 12.4142 4.5 12 4.5H8.75V1.25Z"
         fill={color}
       />
-      <path
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M3.25 12.75C3.25 12.3358 3.58579 12 4 12H12C12.4142 12 12.75 12.3358 12.75 12.75C12.75 13.1642 12.4142 13.5 12 13.5H4C3.58579 13.5 3.25 13.1642 3.25 12.75Z"
         fill={color}
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/PoundIcon/PoundIcon.tsx

@@ -1,19 +1,14 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
 
 export const PoundIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
         d="M12.2857 12.6667H6.57143C7.42857 11.6 7.28571 10.6667 7.28571 9.33333H9.42857C9.85714 9.33333 10.1429 9.06667 10.1429 8.66667C10.1429 8.26667 9.85714 8 9.42857 8H7.28571V5.33333C7.28571 4.2 8.21429 3.33333 9.42857 3.33333C10.6429 3.33333 11.5714 4.2 11.5714 5.33333C11.5714 5.73333 11.8571 6 12.2857 6C12.7143 6 13 5.73333 13 5.33333C13 3.46667 11.4286 2 9.42857 2C7.42857 2 5.85714 3.46667 5.85714 5.33333V8H3.71429C3.28571 8 3 8.26667 3 8.66667C3 9.06667 3.28571 9.33333 3.71429 9.33333H5.85714V10.6667C5.85714 11.8 4.92857 12.6667 3.71429 12.6667C3.28571 12.6667 3 12.9333 3 13.3333C3 13.7333 3.28571 14 3.71429 14H12.2857C12.7143 14 13 13.7333 13 13.3333C13 12.9333 12.7143 12.6667 12.2857 12.6667Z"
         fill={color}
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/RhoIcon/RhoIcon.tsx

@@ -1,23 +1,18 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
 
 const ASPECT_RATIO = 20 / 18
 
 export const RhoIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size * ASPECT_RATIO}
-      height={size}
-      viewBox="0 0 20 18"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size * ASPECT_RATIO} height={size} viewBox="0 0 20 18" fill="none">
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M7.75 8.56937C7.7548 9.34764 8.06471 10.0686 8.52474 10.5926C8.99276 11.1258 9.55591 11.3929 10.0285 11.3929C10.4746 11.3929 11.0249 11.112 11.4949 10.5472C11.9563 9.99266 12.25 9.26521 12.25 8.57143C12.25 7.82425 12.0148 7.09571 11.6144 6.57076C11.2239 6.05886 10.6897 5.75 10.0285 5.75C9.30372 5.75 8.75759 6.08645 8.36933 6.61057C7.96819 7.15207 7.75044 7.88298 7.75 8.56937ZM7.16402 5.71768C7.79162 4.87049 8.75973 4.25001 10.0285 4.25C11.2245 4.24999 12.176 4.83378 12.807 5.66106C13.4281 6.47531 13.75 7.53248 13.75 8.57143C13.75 9.66377 13.3008 10.722 12.6479 11.5067C12.0036 12.2811 11.0681 12.8929 10.0285 12.8929C9.19385 12.8929 8.40497 12.523 7.77711 11.9646C7.77755 11.9996 7.77799 12.0346 7.77843 12.0694C7.77991 12.1872 7.78139 12.304 7.78286 12.4196C7.79546 13.4127 7.80697 14.3189 7.80697 15C7.80697 15.4142 7.47118 15.75 7.05697 15.75C6.64276 15.75 6.30697 15.4142 6.30697 15C6.30697 14.3291 6.2956 13.4334 6.28296 12.4372C6.2815 12.3222 6.28003 12.2058 6.27855 12.0883C6.26431 10.9562 6.25001 9.72193 6.25 8.57143V8.57143C6.25 7.60083 6.5497 6.54696 7.16402 5.71768Z"
         fill={color}
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/SigmaIcon/SigmaIcon.tsx

@@ -1,21 +1,16 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
 
 export const SigmaIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M3.75 8C3.75 5.94046 5.16065 3.75 7.5 3.75H11.4997L11.5 4.5L11.5 5.25H10.365C10.9383 6.03486 11.25 7.03189 11.25 8C11.25 10.0569 9.85612 12.25 7.5 12.25C5.14388 12.25 3.75 10.0569 3.75 8ZM11.5 4.5L11.5 5.25C11.9142 5.25 12.25 4.91421 12.25 4.5C12.25 4.08579 11.914 3.75 11.4997 3.75L11.5 4.5ZM7.5 5.25C6.26815 5.25 5.25 6.45908 5.25 8C5.25 9.54356 6.25566 10.75 7.5 10.75C8.74434 10.75 9.75 9.54356 9.75 8C9.75 6.45908 8.73185 5.25 7.5 5.25Z"
         fill={color}
       />
-    </svg>
+    </Svg>
   )
 }

package/src/shared/icons/MATH/SigmaSumIcon/SigmaSumIcon.tsx

@@ -1,21 +1,16 @@
 import React from 'react'
 import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
 
 export const SigmaSumIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M1.81863 0.686607C1.94102 0.420506 2.20711 0.25 2.50001 0.25H13.5C13.9142 0.25 14.25 0.585786 14.25 1V3C14.25 3.41421 13.9142 3.75 13.5 3.75C13.0858 3.75 12.75 3.41421 12.75 3V1.75H4.13068L9.06945 7.51191C9.3102 7.79277 9.3102 8.20723 9.06945 8.48809L4.13068 14.25H12.75V13C12.75 12.5858 13.0858 12.25 13.5 12.25C13.9142 12.25 14.25 12.5858 14.25 13V15C14.25 15.4142 13.9142 15.75 13.5 15.75H2.50001C2.20711 15.75 1.94102 15.5795 1.81863 15.3134C1.69624 15.0473 1.73995 14.7343 1.93057 14.5119L7.5122 8L1.93057 1.48809C1.73995 1.26571 1.69624 0.952708 1.81863 0.686607Z"
         fill={color}
       />
-    </svg>
+    </Svg>
   )
 }