chore: fix icon view box and color

.svgrrc.js

@@ -1,6 +1,9 @@
 module.exports = {
+  svgProps: {
+    viewBox: '0 0 24 24',
+  },
   replaceAttrValues: {
-    '#10161F': 'currentColor',
+    '#10161F': '{props.color || theme.colors.gray12}',
   },
   plugins: ['@svgr/plugin-jsx'],
   jsx: {

components/icons/add-cute-re.tsx

@@ -1,9 +1,13 @@
 import { memo } from 'react'
 import type { SvgProps } from 'react-native-svg'
 import Svg, { Path } from 'react-native-svg'
+import { useStyles } from 'react-native-unistyles'
 
 function SvgAddCuteRe(props: SvgProps) {
-  return <Svg width={24} height={24} fill="none" {...props}><Path stroke="currentColor" strokeLinecap="round" strokeWidth={2} d="M5 12h14m-7 7V5" /></Svg>
+  const {
+    theme,
+  } = useStyles()
+  return <Svg width={24} height={24} fill="none" viewBox="0 0 24 24" {...props}><Path stroke={props.color || theme.colors.gray12} strokeLinecap="round" strokeWidth={2} d="M5 12h14m-7 7V5" /></Svg>
 }
 const Memo = memo(SvgAddCuteRe)
 export default Memo

components/icons/announcement-cute-fi.tsx

@@ -1,9 +1,13 @@
 import { memo } from 'react'
 import type { SvgProps } from 'react-native-svg'
 import Svg, { Path } from 'react-native-svg'
+import { useStyles } from 'react-native-unistyles'
 
 function SvgAnnouncementCuteFi(props: SvgProps) {
-  return <Svg width={24} height={24} fill="none" {...props}><Path fill="currentColor" fillRule="evenodd" d="M16.895 1.822c.79-.158 1.62.187 2.063.86.285.431.33.962.4 1.46.183 1.326.314 2.641.393 3.952a3.001 3.001 0 0 1 0 5.811 50.66 50.66 0 0 1-.379 3.845c-.056.416-.095.852-.3 1.227a2.017 2.017 0 0 1-2.492.9c-.396-.158-.709-.472-1.018-.756-.466-.427-.924-.869-1.407-1.277A11 11 0 0 0 10 15.645v2.645a2.71 2.71 0 0 1-5.316.744l-1.57-5.497a4.7 4.7 0 0 1 3.326-7.73c.855-.047 1.719-.063 2.57-.165a11 11 0 0 0 4.727-1.723c.636-.416 1.232-.896 1.84-1.352.4-.3.814-.643 1.318-.745M5.634 15.078l.973 3.407A.71.71 0 0 0 8 18.29v-3.006c-.786-.065-1.595-.027-2.366-.206m14.2-3.527a.996.996 0 0 0 0-1.103c.005.368.005.736 0 1.103" clipRule="evenodd" /></Svg>
+  const {
+    theme,
+  } = useStyles()
+  return <Svg width={24} height={24} fill="none" viewBox="0 0 24 24" {...props}><Path fill={props.color || theme.colors.gray12} fillRule="evenodd" d="M16.895 1.822c.79-.158 1.62.187 2.063.86.285.431.33.962.4 1.46.183 1.326.314 2.641.393 3.952a3.001 3.001 0 0 1 0 5.811 50.66 50.66 0 0 1-.379 3.845c-.056.416-.095.852-.3 1.227a2.017 2.017 0 0 1-2.492.9c-.396-.158-.709-.472-1.018-.756-.466-.427-.924-.869-1.407-1.277A11 11 0 0 0 10 15.645v2.645a2.71 2.71 0 0 1-5.316.744l-1.57-5.497a4.7 4.7 0 0 1 3.326-7.73c.855-.047 1.719-.063 2.57-.165a11 11 0 0 0 4.727-1.723c.636-.416 1.232-.896 1.84-1.352.4-.3.814-.643 1.318-.745M5.634 15.078l.973 3.407A.71.71 0 0 0 8 18.29v-3.006c-.786-.065-1.595-.027-2.366-.206m14.2-3.527a.996.996 0 0 0 0-1.103c.005.368.005.736 0 1.103" clipRule="evenodd" /></Svg>
 }
 const Memo = memo(SvgAnnouncementCuteFi)
 export default Memo

components/icons/arrow-right-circle-cute-fi.tsx

@@ -1,9 +1,13 @@
 import { memo } from 'react'
 import type { SvgProps } from 'react-native-svg'
 import Svg, { Path } from 'react-native-svg'
+import { useStyles } from 'react-native-unistyles'
 
 function SvgArrowRightCircleCuteFi(props: SvgProps) {
-  return <Svg width={24} height={24} fill="none" {...props}><Path fill="currentColor" fillRule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10 10-4.477 10-10M11.819 8.014a1 1 0 0 0 .443 1.343c.887.447 1.58.977 2.146 1.643h-6.65a1 1 0 1 0 0 2h6.65c-.566.666-1.258 1.195-2.146 1.642a1 1 0 1 0 .9 1.787c1.456-.734 2.564-1.692 3.422-3.01.214-.327.539-.772.539-1.42 0-.646-.325-1.092-.539-1.42-.859-1.316-1.966-2.275-3.422-3.008a1 1 0 0 0-1.344.443" clipRule="evenodd" /></Svg>
+  const {
+    theme,
+  } = useStyles()
+  return <Svg width={24} height={24} fill="none" viewBox="0 0 24 24" {...props}><Path fill={props.color || theme.colors.gray12} fillRule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10 10-4.477 10-10M11.819 8.014a1 1 0 0 0 .443 1.343c.887.447 1.58.977 2.146 1.643h-6.65a1 1 0 1 0 0 2h6.65c-.566.666-1.258 1.195-2.146 1.642a1 1 0 1 0 .9 1.787c1.456-.734 2.564-1.692 3.422-3.01.214-.327.539-.772.539-1.42 0-.646-.325-1.092-.539-1.42-.859-1.316-1.966-2.275-3.422-3.008a1 1 0 0 0-1.344.443" clipRule="evenodd" /></Svg>
 }
 const Memo = memo(SvgArrowRightCircleCuteFi)
 export default Memo

components/icons/arrow-right-up-cute-re.tsx

@@ -1,9 +1,13 @@
 import { memo } from 'react'
 import type { SvgProps } from 'react-native-svg'
 import Svg, { Path } from 'react-native-svg'
+import { useStyles } from 'react-native-unistyles'
 
 function SvgArrowRightUpCuteRe(props: SvgProps) {
-  return <Svg width={24} height={24} fill="none" {...props}><Path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16.946 7.054 6.339 17.661M9.409 6.59a15.963 15.963 0 0 1 6.796-.249c.571.1.857.149 1.08.373.225.224.274.51.374 1.08a15.963 15.963 0 0 1-.25 6.796" /></Svg>
+  const {
+    theme,
+  } = useStyles()
+  return <Svg width={24} height={24} fill="none" viewBox="0 0 24 24" {...props}><Path stroke={props.color || theme.colors.gray12} strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16.946 7.054 6.339 17.661M9.409 6.59a15.963 15.963 0 0 1 6.796-.249c.571.1.857.149 1.08.373.225.224.274.51.374 1.08a15.963 15.963 0 0 1-.25 6.796" /></Svg>
 }
 const Memo = memo(SvgArrowRightUpCuteRe)
 export default Memo

components/icons/back-2-cute-re.tsx

@@ -1,9 +1,13 @@
 import { memo } from 'react'
 import type { SvgProps } from 'react-native-svg'
 import Svg, { Path } from 'react-native-svg'
+import { useStyles } from 'react-native-unistyles'
 
 function SvgBack2CuteRe(props: SvgProps) {
-  return <Svg width={24} height={24} fill="none" {...props}><Path fill="currentColor" d="M10.704 12.858a1 1 0 0 0-.86-1.806zM4.319 7.182a1 1 0 1 0-1.991-.189zM12.499 7v1zm7.5 8.5a1 1 0 1 0 2 0zM4.644 13.02l-.073.998zm5.202-1.968c-1.688.802-3.296 1.106-5.129.971l-.146 1.995c2.184.16 4.137-.211 6.134-1.16zm-4.692 1.277c-.752-1.674-1.01-3.284-.834-5.147l-1.991-.189c-.209 2.198.103 4.157 1 6.156zM12.5 8a7.5 7.5 0 0 1 7.5 7.5h2A9.5 9.5 0 0 0 12.5 6zm-7.17 5.294A7.504 7.504 0 0 1 12.5 8V6a9.502 9.502 0 0 0-9.082 6.706zm-.614-1.27a.52.52 0 0 1 .437.305l-1.824.82a1.48 1.48 0 0 0 1.24.869z" /></Svg>
+  const {
+    theme,
+  } = useStyles()
+  return <Svg width={24} height={24} fill="none" viewBox="0 0 24 24" {...props}><Path fill={props.color || theme.colors.gray12} d="M10.704 12.858a1 1 0 0 0-.86-1.806zM4.319 7.182a1 1 0 1 0-1.991-.189zM12.499 7v1zm7.5 8.5a1 1 0 1 0 2 0zM4.644 13.02l-.073.998zm5.202-1.968c-1.688.802-3.296 1.106-5.129.971l-.146 1.995c2.184.16 4.137-.211 6.134-1.16zm-4.692 1.277c-.752-1.674-1.01-3.284-.834-5.147l-1.991-.189c-.209 2.198.103 4.157 1 6.156zM12.5 8a7.5 7.5 0 0 1 7.5 7.5h2A9.5 9.5 0 0 0 12.5 6zm-7.17 5.294A7.504 7.504 0 0 1 12.5 8V6a9.502 9.502 0 0 0-9.082 6.706zm-.614-1.27a.52.52 0 0 1 .437.305l-1.824.82a1.48 1.48 0 0 0 1.24.869z" /></Svg>
 }
 const Memo = memo(SvgBack2CuteRe)
 export default Memo

components/icons/bug-cute-re.tsx

@@ -1,9 +1,13 @@
 import { memo } from 'react'
 import type { SvgProps } from 'react-native-svg'
 import Svg, { Path } from 'react-native-svg'
+import { useStyles } from 'react-native-unistyles'
 
 function SvgBugCuteRe(props: SvgProps) {
-  return <Svg width={24} height={24} fill="none" {...props}><Path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 13H3m18 0h-3M7 9C6 9 4.5 8 4 7m3 11c-1.5 0-2 2-2 3m12-3c1.5 0 2 2 2 3M17 9c1 0 2.5-1 3-2m-8 13.88v-8m-6 .62c0-1.688.446-3.246 1.2-4.5h9.6c.754 1.254 1.2 2.812 1.2 4.5 0 4.142-2.686 7.5-6 7.5s-6-3.358-6-7.5M8.535 6h6.93A3.998 3.998 0 0 0 12 4c-1.48 0-2.773.804-3.465 2" /></Svg>
+  const {
+    theme,
+  } = useStyles()
+  return <Svg width={24} height={24} fill="none" viewBox="0 0 24 24" {...props}><Path stroke={props.color || theme.colors.gray12} strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 13H3m18 0h-3M7 9C6 9 4.5 8 4 7m3 11c-1.5 0-2 2-2 3m12-3c1.5 0 2 2 2 3M17 9c1 0 2.5-1 3-2m-8 13.88v-8m-6 .62c0-1.688.446-3.246 1.2-4.5h9.6c.754 1.254 1.2 2.812 1.2 4.5 0 4.142-2.686 7.5-6 7.5s-6-3.358-6-7.5M8.535 6h6.93A3.998 3.998 0 0 0 12 4c-1.48 0-2.773.804-3.465 2" /></Svg>
 }
 const Memo = memo(SvgBugCuteRe)
 export default Memo

components/icons/celebrate-cute-re.tsx

@@ -1,9 +1,13 @@
 import { memo } from 'react'
 import type { SvgProps } from 'react-native-svg'
 import Svg, { Path } from 'react-native-svg'
+import { useStyles } from 'react-native-unistyles'
 
 function SvgCelebrateCuteRe(props: SvgProps) {
-  return <Svg width={24} height={24} fill="none" {...props}><Path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="m14.182 9.818 1.06-1.06m-3.535-.708s1.414-2.828.707-4.95m3.182 9.546s2.475-.353 4.243.707m-2.475-6.717.707-.707m.354 3.889h.707M9.236 19.844l1.394-.477c2.723-.932 4.085-1.398 4.336-2.48.25-1.08-.767-2.098-2.802-4.133l-.918-.918C9.211 9.801 8.193 8.783 7.112 9.034c-1.081.25-1.547 1.612-2.479 4.336l-.477 1.394c-1.15 3.36-1.724 5.04-.842 5.922.881.882 2.561.307 5.922-.842" /></Svg>
+  const {
+    theme,
+  } = useStyles()
+  return <Svg width={24} height={24} fill="none" viewBox="0 0 24 24" {...props}><Path stroke={props.color || theme.colors.gray12} strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="m14.182 9.818 1.06-1.06m-3.535-.708s1.414-2.828.707-4.95m3.182 9.546s2.475-.353 4.243.707m-2.475-6.717.707-.707m.354 3.889h.707M9.236 19.844l1.394-.477c2.723-.932 4.085-1.398 4.336-2.48.25-1.08-.767-2.098-2.802-4.133l-.918-.918C9.211 9.801 8.193 8.783 7.112 9.034c-1.081.25-1.547 1.612-2.479 4.336l-.477 1.394c-1.15 3.36-1.724 5.04-.842 5.922.881.882 2.561.307 5.922-.842" /></Svg>
 }
 const Memo = memo(SvgCelebrateCuteRe)
 export default Memo

components/icons/check-circle-cute-re.tsx

@@ -1,9 +1,13 @@
 import { memo } from 'react'
 import type { SvgProps } from 'react-native-svg'
 import Svg, { Path } from 'react-native-svg'
+import { useStyles } from 'react-native-unistyles'
 
 function SvgCheckCircleCuteRe(props: SvgProps) {
-  return <Svg width={24} height={24} fill="none" {...props}><Path fill="currentColor" d="M8.332 11.099a1 1 0 1 0-1.15 1.636zm2.254 3.646-.818.575a1 1 0 0 0 1.695-.095zm6.136-4.78a1 1 0 1 0-.96-1.754zM20 12a8 8 0 0 1-8 8v2c5.523 0 10-4.477 10-10zm-8 8a8 8 0 0 1-8-8H2c0 5.523 4.477 10 10 10zm-8-8a8 8 0 0 1 8-8V2C6.477 2 2 6.477 2 12zm8-8a8 8 0 0 1 8 8h2c0-5.523-4.477-10-10-10zm-4.818 8.735a10.387 10.387 0 0 1 2.586 2.585l1.636-1.15a12.385 12.385 0 0 0-3.072-3.071zm4.281 2.49c1.282-2.346 2.913-3.977 5.26-5.26l-.96-1.754c-2.682 1.466-4.59 3.372-6.055 6.054z" /></Svg>
+  const {
+    theme,
+  } = useStyles()
+  return <Svg width={24} height={24} fill="none" viewBox="0 0 24 24" {...props}><Path fill={props.color || theme.colors.gray12} d="M8.332 11.099a1 1 0 1 0-1.15 1.636zm2.254 3.646-.818.575a1 1 0 0 0 1.695-.095zm6.136-4.78a1 1 0 1 0-.96-1.754zM20 12a8 8 0 0 1-8 8v2c5.523 0 10-4.477 10-10zm-8 8a8 8 0 0 1-8-8H2c0 5.523 4.477 10 10 10zm-8-8a8 8 0 0 1 8-8V2C6.477 2 2 6.477 2 12zm8-8a8 8 0 0 1 8 8h2c0-5.523-4.477-10-10-10zm-4.818 8.735a10.387 10.387 0 0 1 2.586 2.585l1.636-1.15a12.385 12.385 0 0 0-3.072-3.071zm4.281 2.49c1.282-2.346 2.913-3.977 5.26-5.26l-.96-1.754c-2.682 1.466-4.59 3.372-6.055 6.054z" /></Svg>
 }
 const Memo = memo(SvgCheckCircleCuteRe)
 export default Memo

components/icons/check-circle-filled.tsx

@@ -1,9 +1,13 @@
 import { memo } from 'react'
 import type { SvgProps } from 'react-native-svg'
 import Svg, { Path } from 'react-native-svg'
+import { useStyles } from 'react-native-unistyles'
 
 function SvgCheckCircleFilled(props: SvgProps) {
-  return <Svg width={24} height={24} fill="none" {...props}><Path fill="currentColor" fillRule="evenodd" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m4.95 7.795a1 1 0 0 0-1.415-1.414l-4.95 4.95-2.12-2.121a1 1 0 0 0-1.415 1.414l2.829 2.828a1 1 0 0 0 1.414 0z" clipRule="evenodd" /></Svg>
+  const {
+    theme,
+  } = useStyles()
+  return <Svg width={24} height={24} fill="none" viewBox="0 0 24 24" {...props}><Path fill={props.color || theme.colors.gray12} fillRule="evenodd" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m4.95 7.795a1 1 0 0 0-1.415-1.414l-4.95 4.95-2.12-2.121a1 1 0 0 0-1.415 1.414l2.829 2.828a1 1 0 0 0 1.414 0z" clipRule="evenodd" /></Svg>
 }
 const Memo = memo(SvgCheckCircleFilled)
 export default Memo

components/icons/check-filled.tsx

@@ -1,9 +1,13 @@
 import { memo } from 'react'
 import type { SvgProps } from 'react-native-svg'
 import Svg, { Path } from 'react-native-svg'
+import { useStyles } from 'react-native-unistyles'
 
 function SvgCheckFilled(props: SvgProps) {
-  return <Svg width={24} height={24} fill="none" {...props}><Path fill="currentColor" fillRule="evenodd" d="M21.546 5.112a1.5 1.5 0 0 1 0 2.121L10.232 18.547a1.5 1.5 0 0 1-2.121 0L2.454 12.89a1.5 1.5 0 1 1 2.121-2.121l4.596 4.596L19.424 5.112a1.5 1.5 0 0 1 2.122 0" clipRule="evenodd" /></Svg>
+  const {
+    theme,
+  } = useStyles()
+  return <Svg width={24} height={24} fill="none" viewBox="0 0 24 24" {...props}><Path fill={props.color || theme.colors.gray12} fillRule="evenodd" d="M21.546 5.112a1.5 1.5 0 0 1 0 2.121L10.232 18.547a1.5 1.5 0 0 1-2.121 0L2.454 12.89a1.5 1.5 0 1 1 2.121-2.121l4.596 4.596L19.424 5.112a1.5 1.5 0 0 1 2.122 0" clipRule="evenodd" /></Svg>
 }
 const Memo = memo(SvgCheckFilled)
 export default Memo

components/icons/close-cute-re.tsx

@@ -1,9 +1,13 @@
 import { memo } from 'react'
 import type { SvgProps } from 'react-native-svg'
 import Svg, { Path } from 'react-native-svg'
+import { useStyles } from 'react-native-unistyles'
 
 function SvgCloseCuteRe(props: SvgProps) {
-  return <Svg width={24} height={24} fill="none" {...props}><Path fill="currentColor" d="M6.343 4.93a1 1 0 0 0-1.414 1.414zm11.314 14.142a1 1 0 1 0 1.414-1.415zM4.929 17.658a1 1 0 0 0 1.414 1.414zM19.07 6.344a1 1 0 0 0-1.414-1.414zm-14.142 0 12.728 12.728 1.414-1.415L6.343 4.93zm1.414 12.728L19.07 6.344 17.657 4.93 4.929 17.658z" /></Svg>
+  const {
+    theme,
+  } = useStyles()
+  return <Svg width={24} height={24} fill="none" viewBox="0 0 24 24" {...props}><Path fill={props.color || theme.colors.gray12} d="M6.343 4.93a1 1 0 0 0-1.414 1.414zm11.314 14.142a1 1 0 1 0 1.414-1.415zM4.929 17.658a1 1 0 0 0 1.414 1.414zM19.07 6.344a1 1 0 0 0-1.414-1.414zm-14.142 0 12.728 12.728 1.414-1.415L6.343 4.93zm1.414 12.728L19.07 6.344 17.657 4.93 4.929 17.658z" /></Svg>
 }
 const Memo = memo(SvgCloseCuteRe)
 export default Memo

components/icons/copy-2-cute-re.tsx

@@ -1,9 +1,13 @@
 import { memo } from 'react'
 import type { SvgProps } from 'react-native-svg'
 import Svg, { Path } from 'react-native-svg'
+import { useStyles } from 'react-native-unistyles'
 
 function SvgCopy2CuteRe(props: SvgProps) {
-  return <Svg width={24} height={24} fill="none" {...props}><Path stroke="currentColor" strokeWidth={2} d="M7.824 5c.09-.266.204-.504.35-.722a4 4 0 0 1 1.104-1.104C10.286 2.5 11.69 2.5 14.5 2.5c2.809 0 4.213 0 5.222.674.437.292.812.667 1.104 1.104.674 1.009.674 2.413.674 5.222 0 2.809 0 4.213-.674 5.222a4.003 4.003 0 0 1-1.104 1.104c-.219.146-.456.26-.722.35M9.5 21.5c2.809 0 4.213 0 5.222-.674a4.003 4.003 0 0 0 1.104-1.104c.674-1.009.674-2.413.674-5.222 0-2.809 0-4.213-.674-5.222a4.002 4.002 0 0 0-1.104-1.104C13.713 7.5 12.31 7.5 9.5 7.5c-2.809 0-4.213 0-5.222.674a4 4 0 0 0-1.104 1.104C2.5 10.287 2.5 11.69 2.5 14.5c0 2.809 0 4.213.674 5.222.292.437.667.812 1.104 1.104 1.009.674 2.413.674 5.222.674Z" /></Svg>
+  const {
+    theme,
+  } = useStyles()
+  return <Svg width={24} height={24} fill="none" viewBox="0 0 24 24" {...props}><Path stroke={props.color || theme.colors.gray12} strokeWidth={2} d="M7.824 5c.09-.266.204-.504.35-.722a4 4 0 0 1 1.104-1.104C10.286 2.5 11.69 2.5 14.5 2.5c2.809 0 4.213 0 5.222.674.437.292.812.667 1.104 1.104.674 1.009.674 2.413.674 5.222 0 2.809 0 4.213-.674 5.222a4.003 4.003 0 0 1-1.104 1.104c-.219.146-.456.26-.722.35M9.5 21.5c2.809 0 4.213 0 5.222-.674a4.003 4.003 0 0 0 1.104-1.104c.674-1.009.674-2.413.674-5.222 0-2.809 0-4.213-.674-5.222a4.002 4.002 0 0 0-1.104-1.104C13.713 7.5 12.31 7.5 9.5 7.5c-2.809 0-4.213 0-5.222.674a4 4 0 0 0-1.104 1.104C2.5 10.287 2.5 11.69 2.5 14.5c0 2.809 0 4.213.674 5.222.292.437.667.812 1.104 1.104 1.009.674 2.413.674 5.222.674Z" /></Svg>
 }
 const Memo = memo(SvgCopy2CuteRe)
 export default Memo

components/icons/delete-2-cute-re.tsx

@@ -1,9 +1,13 @@
 import { memo } from 'react'
 import type { SvgProps } from 'react-native-svg'
 import Svg, { Path } from 'react-native-svg'
+import { useStyles } from 'react-native-unistyles'
 
 function SvgDelete2CuteRe(props: SvgProps) {
-  return <Svg width={24} height={24} fill="none" {...props}><Path stroke="currentColor" strokeLinecap="round" strokeWidth={2} d="m4.5 5.5.595 9.513c.16 2.576.241 3.864.89 4.788a4 4 0 0 0 1.18 1.108c.963.591 2.254.591 4.835.591v0c2.581 0 3.872 0 4.834-.59a4 4 0 0 0 1.18-1.11c.65-.923.73-2.211.892-4.787L19.5 5.5m-12 0 .088-.265c.44-1.32.66-1.98 1.184-2.357.524-.378 1.22-.378 2.611-.378h1.234c1.391 0 2.087 0 2.61.378.525.377.745 1.037 1.185 2.357l.088.265M10 11v5m4-5v5M3.5 5.5h17" /></Svg>
+  const {
+    theme,
+  } = useStyles()
+  return <Svg width={24} height={24} fill="none" viewBox="0 0 24 24" {...props}><Path stroke={props.color || theme.colors.gray12} strokeLinecap="round" strokeWidth={2} d="m4.5 5.5.595 9.513c.16 2.576.241 3.864.89 4.788a4 4 0 0 0 1.18 1.108c.963.591 2.254.591 4.835.591v0c2.581 0 3.872 0 4.834-.59a4 4 0 0 0 1.18-1.11c.65-.923.73-2.211.892-4.787L19.5 5.5m-12 0 .088-.265c.44-1.32.66-1.98 1.184-2.357.524-.378 1.22-.378 2.611-.378h1.234c1.391 0 2.087 0 2.61.378.525.377.745 1.037 1.185 2.357l.088.265M10 11v5m4-5v5M3.5 5.5h17" /></Svg>
 }
 const Memo = memo(SvgDelete2CuteRe)
 export default Memo

components/icons/discord-cute-fi.tsx

@@ -1,9 +1,13 @@
 import { memo } from 'react'
 import type { SvgProps } from 'react-native-svg'
 import Svg, { Path } from 'react-native-svg'
+import { useStyles } from 'react-native-unistyles'
 
 function SvgDiscordCuteFi(props: SvgProps) {
-  return <Svg width={24} height={24} fill="none" {...props}><Path fill="currentColor" fillRule="evenodd" d="M9.99 5.147A13.65 13.65 0 0 1 12 5c.692 0 1.366.05 2.014.148A1.012 1.012 0 0 1 15.004 4c.93 0 1.924.406 2.777.763 1.26.528 1.968 1.636 2.517 2.853.89 1.975 1.509 4.608 1.723 6.61.102.95.127 1.906-.056 2.549-.245.858-1.232 1.403-1.995 1.824l-.18.1c-.687.384-1.446.756-1.97 1.013l-.37.182a1 1 0 1 1-.894-1.788l.416-.206.375-.184-.58-.609c-1.39.57-3.028.893-4.767.893-1.739 0-3.376-.322-4.766-.893l-.58.608.339.166.455.225a1 1 0 1 1-.895 1.788l-.544-.27c-.604-.298-1.208-.596-1.796-.925a54.33 54.33 0 0 0-.18-.1c-.762-.42-1.749-.966-1.994-1.824-.184-.643-.158-1.598-.056-2.55.214-2.001.832-4.634 1.723-6.609.549-1.217 1.257-2.325 2.517-2.853C7.06 4.413 8.072 4 9 4c.603 0 1.077.555.99 1.147m.51 7.103a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M15.25 14a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5" clipRule="evenodd" /></Svg>
+  const {
+    theme,
+  } = useStyles()
+  return <Svg width={24} height={24} fill="none" viewBox="0 0 24 24" {...props}><Path fill={props.color || theme.colors.gray12} fillRule="evenodd" d="M9.99 5.147A13.65 13.65 0 0 1 12 5c.692 0 1.366.05 2.014.148A1.012 1.012 0 0 1 15.004 4c.93 0 1.924.406 2.777.763 1.26.528 1.968 1.636 2.517 2.853.89 1.975 1.509 4.608 1.723 6.61.102.95.127 1.906-.056 2.549-.245.858-1.232 1.403-1.995 1.824l-.18.1c-.687.384-1.446.756-1.97 1.013l-.37.182a1 1 0 1 1-.894-1.788l.416-.206.375-.184-.58-.609c-1.39.57-3.028.893-4.767.893-1.739 0-3.376-.322-4.766-.893l-.58.608.339.166.455.225a1 1 0 1 1-.895 1.788l-.544-.27c-.604-.298-1.208-.596-1.796-.925a54.33 54.33 0 0 0-.18-.1c-.762-.42-1.749-.966-1.994-1.824-.184-.643-.158-1.598-.056-2.55.214-2.001.832-4.634 1.723-6.609.549-1.217 1.257-2.325 2.517-2.853C7.06 4.413 8.072 4 9 4c.603 0 1.077.555.99 1.147m.51 7.103a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M15.25 14a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5" clipRule="evenodd" /></Svg>
 }
 const Memo = memo(SvgDiscordCuteFi)
 export default Memo