fix(widgets): fix widget icons (#2517)

Author: pwltr

src/components/SvgImage.tsx

@@ -1,8 +1,9 @@
+import { useNavigation } from '@react-navigation/native';
 import React, { memo, ReactElement, ReactNode, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { SvgXml } from 'react-native-svg';
 
-import { useNavigation } from '@react-navigation/native';
 import { widgets } from '../../constants/widgets';
 import { useAppDispatch, useAppSelector } from '../../hooks/redux';
 import { RootNavigationProp } from '../../navigation/types';
@@ -15,7 +16,6 @@ import { BodyMSB } from '../../styles/text';
 import { truncate } from '../../utils/helpers';
 import Dialog from '../Dialog';
 // import LoadingView from '../LoadingView';
-import SvgImage from '../SvgImage';
 
 const BaseWidget = ({
 	id,
@@ -70,10 +70,12 @@ const BaseWidget = ({
 				{(showTitle || isEditing) && (
 					<View style={styles.header}>
 						<View style={styles.title}>
-							<View style={styles.icon}>
-								<SvgImage image={widget.icon} size={32} />
-							</View>
-
+							<SvgXml
+								style={styles.icon}
+								xml={widget.icon}
+								width={32}
+								height={32}
+							/>
 							<BodyMSB style={styles.name} numberOfLines={1}>
 								{truncate(widget.name, 18)}
 							</BodyMSB>

src/components/widgets/BaseWidget.tsx

@@ -1,12 +1,12 @@
+import { isEqual } from 'lodash';
 import React, { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import { StyleSheet, View } from 'react-native';
+import { SvgXml } from 'react-native-svg';
 
-import { isEqual } from 'lodash';
 import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
 import NavigationHeader from '../../components/NavigationHeader';
 import SafeAreaInset from '../../components/SafeAreaInset';
-import SvgImage from '../../components/SvgImage';
 import Button from '../../components/buttons/Button';
 import BlocksWidget from '../../components/widgets/BlocksWidget';
 import CalculatorWidget from '../../components/widgets/CalculatorWidget';
@@ -115,9 +115,7 @@ const Widget = ({
 								{widget.name.split(' ').join('\n')}
 							</Headline>
 						</View>
-						<View style={styles.headerImage}>
-							<SvgImage image={widget.icon} size={64} />
-						</View>
+						<SvgXml style={styles.headerImage} xml={widget.icon} />
 					</View>
 
 					<BodyM style={styles.description} color="secondary">

src/screens/Widgets/Widget.tsx

@@ -1,10 +1,10 @@
 import React, { ReactElement } from 'react';
 import { StyleSheet } from 'react-native';
+import { SvgXml } from 'react-native-svg';
 
 import { useNavigation } from '@react-navigation/native';
 import { useTranslation } from 'react-i18next';
 import Divider from '../../components/Divider';
-import SvgImage from '../../components/SvgImage';
 import { widgets } from '../../constants/widgets';
 import { useCurrency } from '../../hooks/displayValues';
 import { RootNavigationProp } from '../../navigation/types';
@@ -31,9 +31,7 @@ const WidgetListItem = ({ id }: { id: TWidgetId }): ReactElement => {
 	return (
 		<TouchableOpacity testID={`WidgetListItem-${id}`} onPress={onPress}>
 			<View style={styles.feed}>
-				<View style={styles.icon}>
-					<SvgImage image={widget.icon} size={48} />
-				</View>
+				<SvgXml style={styles.icon} xml={widget.icon} />
 				<View style={styles.text}>
 					<BodyMSB numberOfLines={1}>{widget.name}</BodyMSB>
 					<CaptionB color="secondary" numberOfLines={1}>