Simplify active state

assets/bleeding.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import { G, Path } from 'react-native-svg'
 
-export default function BleedingIcon(props) {
+export default function BleedingIcon() {
   return (
-    <G fill={props.active ? "white" : "black"}>
+    <G>
       <G>
         <G>
           <Path d="M339.933,239.523c-0.208,44.132-21.328,86.257-57.085,112.321c-36.515,26.616-84.173,33.427-126.899,19.16

assets/cervix.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import { G, Path } from 'react-native-svg'
 
-export default function CervixIcon(props) {
+export default function CervixIcon() {
   return (
-    <G fill={props.active ? "white" : "black"}>
+    <G>
       <G>
         <G>
           <Path d="M308.051,59.094c39.578,30.329,64.919,77.001,68.909,126.668c3.615,44.995-10.341,90.543-38.73,125.662

assets/desire.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import { G, Path } from 'react-native-svg'
 
-export default function DesireIcon(props) {
+export default function DesireIcon() {
   return (
-    <G fill={props.active ? "white" : "black"}>
+    <G>
       <G>
         <G>
           <Path d="M203.217,178.64c9.173-15.347,24.414-28.187,41.641-33.383c6.98-2.105,15.02-2.824,21.802,0.123

assets/mucus.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import { G, Path } from 'react-native-svg'
 
-export default function MucusIcon(props) {
+export default function MucusIcon() {
   return (
-    <G fill={props.active ? "white" : "black"}>
+    <G>
       <G>
         <G>
           <Path d="M207.504,377.768c-16.918-6.602-30.629-12.56-47.482-20.145c-29.7-13.368-59.341-27.672-86.712-45.414

assets/note.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import { G, Path } from 'react-native-svg'
 
-export default function NoteIcon(props) {
+export default function NoteIcon() {
   return (
-    <G fill={props.active ? "white" : "black"}>
+    <G>
       <G>
         <G>
           <Path d="M293.542,218.325c0,48.787,0,97.574,0,146.361c0,4.704,1.495,12.814-5.511,12.814c-5.347,0-10.694,0-16.041,0

assets/pain.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import { G, Path } from 'react-native-svg'
 
-export default function PainIcon(props) {
+export default function PainIcon() {
   return (
-    <G fill={props.active ? "white" : "black"}>
+    <G>
       <G>
         <G>
           <Path d="M213.298,12.215c-22.873,41.561-45.747,83.121-68.62,124.682c-13.959,25.363-27.918,50.726-41.877,76.09

assets/sex.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import { G, Path } from 'react-native-svg'
 
-export default function SexIcon(props) {
+export default function SexIcon() {
   return (
-    <G fill={props.active ? "white" : "black"}>
+    <G>
       <G>
         <G>
           <Path d="M223.866,273.491c-9.27,7.609-18.641,15.09-28.046,22.531c3.03-0.391,6.059-0.782,9.089-1.173

assets/temperature.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import { G, Path } from 'react-native-svg'
 
-export default function TemperatureIcon(props) {
+export default function TemperatureIcon() {
   return (
-    <G fill={props.active ? "white" : "black"}>
+    <G>
       <G>
         <G>
           <Path d="M191.099,160.115c10.413,0,20.827,0,31.24,0c9.673,0,9.673-15,0-15c-10.413,0-20.827,0-31.24,0

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

@@ -6,7 +6,7 @@ import {
   Dimensions
 } from 'react-native'
 import { LocalDate } from 'js-joda'
-import Svg from 'react-native-svg'
+import Svg, { G } from 'react-native-svg'
 import Header from '../header'
 import { getOrCreateCycleDay } from '../../db'
 import cycleModule from '../../lib/cycle'
@@ -260,7 +260,9 @@ class SymptomBox extends Component {
             React.Children.map(this.props.children, child => {
               return (
                 <Svg width={100} height={50} viewBox={child.props.viewBox}>
-                  {React.cloneElement(child, { active: !!d })}
+                  <G fill={d ? 'white' : 'black'}>
+                    {child}
+                  </G>
                 </Svg>
               )
             })