Turn symptom icons into icon font

components/home.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { ScrollView, View, TouchableOpacity, TouchableHighlight, Dimensions } from 'react-native'
 import { LocalDate, ChronoUnit } from 'js-joda'
 import Icon from 'react-native-vector-icons/Entypo'
-import Svg, { G } from 'react-native-svg'
+import { Surface } from 'react-native/Libraries/ART/ReactNativeART'
 import { secondaryColor, cycleDayColor, periodColor } from '../styles'
 import { home as labels, bleedingPrediction as predictLabels, shared } from './labels'
 import CycleDayIcon from '../assets/home-circle'
@@ -73,15 +73,15 @@ export default class Home extends Component {
               style={styles.homeIconElement}
             >
               <View position='absolute'>
-                <Svg
+                <Surface
                   width={80}
                   height={80}
-                  viewBox='340 345 170 170'
                 >
-                  <G fill="none" stroke="#1E0B7A" strokeWidth="2">
-                    <CycleDayIcon/>
-                  </G>
-                </Svg>
+                  <CycleDayIcon
+                    strokeWidth={2}
+                    scale={0.46}
+                  />
+                </Surface>
               </View>
               <View style={[styles.homeIconTextWrapper, styles.wrapperCycle]}>
                 <AppTextLight style={styles.iconText}>
@@ -107,7 +107,7 @@ export default class Home extends Component {
               style={styles.homeIconElement}
             >
               <View position='absolute'>
-                <Drop/>
+                <Drop scale={0.55}/>
               </View>
               <View style={[styles.homeIconTextWrapper, styles.wrapperDrop]}>
                 <AppTextLight style={styles.iconText}>