icons

src/pages/recipes/styles/addRecipe.js

@@ -1,8 +1,7 @@
 import { Image, Text, TextInput, View } from "react-native"
 import styled from 'styled-components'
-import { GiHotMeal, GiMeal, GiCookingPot } from 'react-icons/gi'
-import { HiCheck } from 'react-icons/hi'
-import { BiImageAdd } from 'react-icons/bi'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import theme from "../../../styles/theme";
 
 export const Wrapper = styled(View)`
     display: flex;
@@ -63,33 +62,23 @@ export const InputInstructions = styled(Text)`
     width: 100%;
 `
 export const StyledImage = styled(Image)`
-    resize-mode: contain;
     width: 100px;
     height: 100px;
 `
-export const IconRecipe = styled(GiHotMeal)`
-    color: ${({ theme }) => theme.colors.primaryVar};
-    font-size: ${({theme}) => theme.fontSize.fontM};
-`
-export const IconPot = styled(GiCookingPot)`
-    color: ${({ theme }) => theme.colors.primaryVar};
-    font-size: ${({theme}) => theme.fontSize.fontM};
-`
-export const IconMeal = styled(GiMeal)`
-    margin-left: 5px;
-    color: ${({ theme }) => theme.colors.primaryVar};
-    font-size: ${({theme}) => theme.fontSize.fontM};
-`
-export const IconImage = styled(BiImageAdd)`
-    color: ${({ theme }) => theme.colors.primaryVar};
-    font-size: ${({theme}) => theme.fontSize.fontM};
-`
-export const IconCheck = styled(HiCheck)`
+export const IconRecipe = () => <MaterialCommunityIcons name="pasta" color={theme.colors.primaryVar} size={theme.fontSize.fontM} />
+
+export const IconPot = () => <MaterialCommunityIcons name="pot-steam" color={theme.colors.primaryVar} size={theme.fontSize.fontM} />
+
+export const IconMeal = () => <MaterialCommunityIcons name="pot-steam" color={theme.colors.primaryVar} size={theme.fontSize.fontM} />
+
+export const IconImage = () => <MaterialCommunityIcons name="food" color={theme.colors.primaryVar} size={theme.fontSize.fontM} />
+
+const Check = () => <MaterialCommunityIcons name="check" color={theme.colors.textB3} size={theme.fontSize.fontL} />
+
+export const IconCheck = styled(Check)`
     margin-right: 10px;
-    color: ${({ theme }) => theme.colors.textB3};
     background-color: ${({ theme }) => theme.colors.primary + 'cc'};
     border-radius: 30px;
     min-width:  40px;
     height:     40px;
-    font-size: ${({theme}) => theme.fontSize.fontL};
 `

src/pages/recipes/styles/recipe.js

@@ -1,6 +1,7 @@
 import { Image, Text, View } from "react-native"
 import styled from 'styled-components'
-import { GiCookingPot, GiMeal } from 'react-icons/gi'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import theme from "../../../styles/theme";
 
 export const Title = styled(Text)`
     margin-top: 10px;
@@ -34,7 +35,6 @@ export const InstructionNumber = styled(Text)`
 
 export const StyledImage = styled(Image)`
     margin-top: -70px;
-    resize-mode: contain;
     height: 200px;
     width: 100%;
     @media ${({theme}) => theme.mediaQueries.above768}{
@@ -72,15 +72,16 @@ export const TextServings = styled(Text)`
     margin-top: -5px;
     font-weight: bold;
 `
-export const IconPotLarge = styled(GiCookingPot)`
+const PotLarge = () => <MaterialCommunityIcons name="pot-steam" color={theme.colors.primary} size={theme.fontSize.fontL} />
+
+export const IconPotLarge = styled(PotLarge)`
     margin: -20px 0px -16px 0px;
-    color: ${({ theme }) => theme.colors.primary};
-    font-size: ${({theme}) => theme.fontSize.fontL};
 `
-export const IconMeal = styled(GiMeal)`
+
+const Meal = () => <MaterialCommunityIcons name="food-turkey" color={theme.colors.primary} size={theme.fontSize.fontL} />
+
+export const IconMeal = styled(Meal)`
     margin: -20px 0px -16px 0px;
-    color: ${({ theme }) => theme.colors.primary};
-    font-size: ${({theme}) => theme.fontSize.fontL};
 `
 
 

src/pages/styles/HomePage.js

@@ -1,6 +1,6 @@
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { View } from "react-native"
 import styled from 'styled-components'
-import { FiMenu } from 'react-icons/fi'
 
 export const Wrapper = styled(View)`
     display: flex;
@@ -24,7 +24,4 @@ export const WrapperRight = styled(View)`
     width: 50%;
     padding: 0px 8px 8px 4px;
 `
-// export const Menu = styled(FiMenu)`
-//     color: ${props=>props.theme.colors.textW2};
-//     font-size: 45px;
-// `
+export const Menu = () => <MaterialCommunityIcons name="menu" color={theme.colors.textW2} size={45} />

src/pages/styles/page.js

@@ -1,9 +1,4 @@
 import styled from 'styled-components'
-import { BiArrowBack } from 'react-icons/bi'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
-export const ArrowBack = styled(BiArrowBack).attrs(props=>({
-    // onClick:() => history.goBack()
-}))`
-    color: ${({theme}) => theme.colors.textW2};
-    font-size: 45px;
-`
+export const ArrowBack = () => <MaterialCommunityIcons name="arrow-left" color={theme.colors.textW2} size={45} />