Turn symptom icons into icon font

components/cycle-day/cycle-day-overview.js

@@ -6,21 +6,13 @@ import {
   Dimensions
 } from 'react-native'
 import { LocalDate } from 'js-joda'
-import Svg, { G } from 'react-native-svg'
 import Header from '../header'
 import { getCycleDay } from '../../db'
 import cycleModule from '../../lib/cycle'
 import styles from '../../styles'
 import * as labels from './labels'
 import AppText from '../app-text'
-import BleedingIcon from '../../assets/bleeding'
-import CervixIcon from '../../assets/cervix'
-import DesireIcon from '../../assets/desire'
-import MucusIcon from '../../assets/mucus'
-import NoteIcon from '../../assets/note'
-import PainIcon from '../../assets/pain'
-import SexIcon from '../../assets/sex'
-import TemperatureIcon from '../../assets/temperature'
+import DripIcon from '../../assets/drip-icons'
 
 const bleedingLabels = labels.bleeding
 const feelingLabels = labels.mucus.feeling.categories
@@ -183,63 +175,63 @@ export default class CycleDayOverView extends Component {
               onPress={() => this.navigate('BleedingEditView')}
               data={this.getLabel('bleeding')}
               disabled={dateInFuture}
+              iconName='drip-icon-bleeding'
             >
-              <BleedingIcon viewBox='10 10 320 400' />
             </SymptomBox>
             <SymptomBox
               title='Temperature'
               onPress={() => this.navigate('TemperatureEditView')}
               data={this.getLabel('temperature')}
               disabled={dateInFuture}
+              iconName='drip-icon-temperature'
             >
-              <TemperatureIcon viewBox='10 10 320 400' />
             </SymptomBox>
             <SymptomBox
               title='Mucus'
               onPress={() => this.navigate('MucusEditView')}
               data={this.getLabel('mucus')}
               disabled={dateInFuture}
+              iconName='drip-icon-mucus'
             >
-              <MucusIcon viewBox='10 10 320 400' />
             </SymptomBox>
             <SymptomBox
               title='Cervix'
               onPress={() => this.navigate('CervixEditView')}
               data={this.getLabel('cervix')}
               disabled={dateInFuture}
+              iconName='drip-icon-cervix'
             >
-              <CervixIcon viewBox='10 10 320 440' />
             </SymptomBox>
             <SymptomBox
               title='Desire'
               onPress={() => this.navigate('DesireEditView')}
               data={this.getLabel('desire')}
               disabled={dateInFuture}
+              iconName='drip-icon-desire'
             >
-              <DesireIcon viewBox='10 10 320 380' />
             </SymptomBox>
             <SymptomBox
               title='Sex'
               onPress={() => this.navigate('SexEditView')}
               data={this.getLabel('sex')}
               disabled={dateInFuture}
+              iconName='drip-icon-sex'
             >
-              <SexIcon viewBox='10 10 320 400' />
             </SymptomBox>
             <SymptomBox
               title='Pain'
               onPress={() => this.navigate('PainEditView')}
               data={this.getLabel('pain')}
               disabled={dateInFuture}
+              iconName='drip-icon-pain'
             >
-              <PainIcon viewBox='10 10 300 400' />
             </SymptomBox>
             <SymptomBox
               title='Note'
               onPress={() => this.navigate('NoteEditView')}
               data={this.getLabel('note')}
+              iconName='drip-icon-note'
             >
-              <NoteIcon viewBox='10 10 270 400' />
             </SymptomBox>
             {/*  this is just to make the last row adhere to the grid
         (and) because there are no pseudo properties in RN */}
@@ -267,20 +259,7 @@ class SymptomBox extends Component {
         disabled={this.props.disabled}
       >
         <View style={[styles.symptomBox, boxActive, disabledStyle]}>
-
-          {this.props.children ?
-            React.Children.map(this.props.children, child => {
-              return (
-                <Svg width={100} height={50} viewBox={child.props.viewBox}>
-                  <G fill={d ? 'white' : 'black'}>
-                    {child}
-                  </G>
-                </Svg>
-              )
-            })
-            : null
-          }
-
+          <DripIcon name={this.props.iconName} size={50} color={d ? 'white' : 'black'}/>
           <AppText style={[textActive, disabledStyle]}>
             {this.props.title}
           </AppText>