icons

2021-10-31 20:26:57 +01:00
parent a8a150a191
commit e3c0555452
21 changed files with 212 additions and 256 deletions
--- a/package.json
+++ b/package.json
@@ -18,13 +18,13 @@
    "expo-status-bar": "~1.1.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
-    "react-icons": "^4.3.1",
    "react-native": "0.64.2",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-modal": "^13.0.0",
    "react-native-reanimated": "~2.2.0",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.8.0",
+    "react-native-vector-icons": "^9.0.0",
    "react-native-web": "0.17.1",
    "react-redux": "^7.2.5",
    "styled-components": "^5.3.3"
--- a/src/components/GroceryList/groceries/styles/buttons.js
+++ b/src/components/GroceryList/groceries/styles/buttons.js
@@ -1,10 +1,9 @@
 import styled, { css } from 'styled-components'
 //dependencies
-import { MdAddShoppingCart, MdDeleteForever } from 'react-icons/md'
-import { FiMenu, FiCheckSquare } from 'react-icons/fi'
-import { CgFileAdd } from 'react-icons/cg'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 //blueprints
 import { Button } from '../../../../styles/componentBlueprints'
+import theme from '../../../../styles/theme';


 export const WrapperButtons = styled(Button)`
@@ -52,23 +51,12 @@ export const WrapperSelect = styled(Button)`
            bottom:70px; 
            `};
 `
-export const MenuIcon = styled(FiMenu)`
-    color: ${({ theme }) => theme.colors.textB2};
-    font-size: 47px;
-`
-export const PlusIcon = styled(MdAddShoppingCart)`
-color: ${({ theme }) => theme.colors.textB2};
-    font-size: 45px;
-`
-export const RemoveIcon = styled(MdDeleteForever)`
-color: ${({ theme }) => theme.colors.textB2};
-    font-size: 45px;
-`
-export const CheckIcon = styled(FiCheckSquare)`
-    color: ${({ theme }) => theme.colors.textB2};
-    font-size: 40px;
-`
-export const ListIcon = styled(CgFileAdd)`
-    color: ${({ theme }) => theme.colors.textB2};
-    font-size: 40px;
-`
+export const MenuIcon = () => <MaterialCommunityIcons name="menu" color={theme.colors.textB2} size={47} />
+
+export const PlusIcon = () => <MaterialCommunityIcons name="cart-plus" color={theme.colors.textB2} size={45} />
+
+export const RemoveIcon = () => <MaterialCommunityIcons name="deleter-forever" color={theme.colors.textB2} size={45} />
+
+export const CheckIcon = () => <MaterialCommunityIcons name="check" color={theme.colors.textB2} size={40} />
+
+export const ListIcon = () => <MaterialCommunityIcons name="text-box-plus-outline" color={theme.colors.textB2} size={40} />
--- a/src/components/GroceryList/groceries/styles/list.js
+++ b/src/components/GroceryList/groceries/styles/list.js
@@ -1,8 +1,7 @@
 import { Text, TouchableOpacity, View } from 'react-native'
 import styled, { css } from 'styled-components'
-import { MdClose } from 'react-icons/md'
-import { BiEditAlt } from 'react-icons/bi'
-import { IoChevronDown } from 'react-icons/io5'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import theme from '../../../../styles/theme';

 export const WrapperGroceryList = styled(View)`
    width:100%;
@@ -60,22 +59,22 @@ export const ListSubtitle = styled(Text)`
    font-size: 17px;
 `

-export const ButtonRemoveList = styled(MdClose)`
-    color: ${({ theme }) => theme.colors.textW5};
-    height: 28px;
-    width:  28px;
-    margin: 4px 10px 4px 0px;
-`
-export const ButtonEditList = styled(BiEditAlt)`
-    color: ${({ theme }) => theme.colors.textW5};
-    height: 28px;
-    width:  28px;
-    margin: 4px 10px 4px 0px;
-`
-export const IconArrowDown = styled(IoChevronDown)`
-    transform: rotate(${props => props.visible === 'true' ? css`-180deg` : css`0deg`});
+const Close = () => <MaterialCommunityIcons name="close" color={theme.colors.textW5} size={28} />

-    color: ${({ theme }) => theme.colors.textW5};
+export const ButtonRemoveList = styled(Close)`
+    margin: 4px 10px 4px 0px;
+`
+
+const Edit = () => <MaterialCommunityIcons name="pencil" color={theme.colors.textW5} size={28} />
+
+export const ButtonEditList = styled(Edit)`
+    margin: 4px 10px 4px 0px;
+`
+
+const ArrowDown = () => <MaterialCommunityIcons name="chevron-down" color={theme.colors.textW5} size={32} />
+
+export const IconArrowDown = styled(ArrowDown)`
+    transform: rotate(${props => props.visible === 'true' ? css`-180deg` : css`0deg`});
    height: 28px;
    width:  28px;
    margin: 4px;
--- a/src/components/GroceryList/products/styles/buttons.js
+++ b/src/components/GroceryList/products/styles/buttons.js
@@ -1,10 +1,10 @@
 import styled from 'styled-components'
 //dependencies
-import { FiPlus, FiMenu , FiUploadCloud, FiDownloadCloud } from 'react-icons/fi'
-import { MdDeleteForever } from 'react-icons/md'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 //blueprints
 import { Button } from '../../../../styles/componentBlueprints'
 import { TextInput } from 'react-native'
+import theme from '../../../../styles/theme';

 export const WrapperButtons = styled(Button)`
    position:absolute;
@@ -48,36 +48,12 @@ export const WrapperDownload = styled(Button)`
    
 `

-export const MenuIcon = styled(FiMenu)`
-    color: ${({theme})=> theme.colors.textB2};
-    font-size: 60px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        font-size: 50px;
-    }
-`
-export const PlusIcon = styled(FiPlus)`
-    color: ${({theme})=> theme.colors.textB2};
-    font-size: 60px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        font-size: 60px;
-    }
-`
-export const UploadIcon = styled(FiUploadCloud)`
-    font-size: 50px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        font-size: 40px;
-    }
-`
-export const DownloadIcon = styled(FiDownloadCloud)`
-    font-size: 50px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        font-size: 40px;
-    }
-`
-export const RemoveIcon = styled(MdDeleteForever)`
-    color: ${({theme})=> theme.colors.textB2};
-    font-size: 60px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        font-size: 45px;
-    }
-`
+export const MenuIcon = () => <MaterialCommunityIcons name="menu" color={theme.colors.textB2} size={50} />
+
+export const PlusIcon = () => <MaterialCommunityIcons name="plus" color={theme.colors.textB2} size={60} />
+
+export const UploadIcon = () => <MaterialCommunityIcons name="cloud-upload-outline" color={theme.colors.textB2} size={40} />
+
+export const DownloadIcon = () => <MaterialCommunityIcons name="cloud-download-outline" color={theme.colors.textB2} size={40} />
+
+export const RemoveIcon = () => <MaterialCommunityIcons name="delete-forever" color={theme.colors.textB2} size={45} />
--- a/src/components/GroceryList/products/styles/listedProduct.js
+++ b/src/components/GroceryList/products/styles/listedProduct.js
@@ -1,7 +1,7 @@
 import { View, Text, Image, TouchableOpacity } from 'react-native'
 import styled, { css } from 'styled-components'
 //dependencies
-import { HiCheck } from 'react-icons/hi'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 //functions
 import LightenDarken from '../../../../functions'

@@ -75,7 +75,4 @@ export const StyledImage = styled(Image)`
 `


-export const IconCheck = styled(HiCheck)`
-    font-size: 16px;
-    color: ${({ theme }) => theme.colors.dp00};
-`
+export const IconCheck = () => <MaterialCommunityIcons name="check" color={theme.colors.dp00} size={16} />
--- a/src/components/GroceryList/styles/tabMenu.js
+++ b/src/components/GroceryList/styles/tabMenu.js
@@ -1,7 +1,7 @@
 import { TouchableOpacity, View } from 'react-native'
 import styled, { css } from 'styled-components'
-import { RiShoppingBasketLine } from 'react-icons/ri'
-import { FaAppleAlt } from 'react-icons/fa'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import theme from '../../../styles/theme';


 const iconSize = '2.0px'
@@ -19,7 +19,6 @@ export const Wrapper = styled(View)`
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
-    /* background-color: #1A2C31cc; */
    background-color: ${({ theme }) => theme.colors.dp00 +'88'};
    width: 250px;
    height: 60px;
@@ -55,12 +54,15 @@ export const WrapperGroceries = styled(WrapperIcon)`
    flex:1;
    height: 65px;
 `
-export const IconGroceries = styled(RiShoppingBasketLine)`
+
+const Groceries = () => <MaterialCommunityIcons name="shopping" color={theme.colors.textW0} size={iconSize} />
+
+export const IconGroceries = styled(Groceries)`
    font-size: ${iconSize};
    ${props => props.currenttab === 'Groceries' &&
        css` 
-    color: ${props => props.theme.colors.textW0};
-    font-size: ${iconSizeSelected};`
+        color: ${props => props.theme.colors.textW0};
+        font-size: ${iconSizeSelected};`
    };
 `
 //products
@@ -69,13 +71,16 @@ export const WrapperProducts = styled(WrapperIcon)`
    height: 65px;

 `
-export const IconProducts = styled(FaAppleAlt)`
+
+const Products = () => <MaterialCommunityIcons name="apple" color={theme.colors.textW0} size={iconSize} />
+
+export const IconProducts = styled(Products)`
    font-size: 16px;
    margin-top:-5px;
    ${props => props.currenttab === 'Products' &&
        css` 
-    color: ${props => props.theme.colors.textW0};
-    font-size: 16px;`
+        color: ${props => props.theme.colors.textW0};
+        font-size: 16px;`
    };

 `
--- a/src/components/Home/styles/groceryCard.js
+++ b/src/components/Home/styles/groceryCard.js
@@ -1,7 +1,8 @@
+import React from 'react'
 import { Text, TouchableOpacity, View } from 'react-native'
 import styled from 'styled-components'
-import { FiCoffee } from 'react-icons/fi'
-import { GiHotMeal } from 'react-icons/gi'
+import theme from '../../../styles/theme'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

 export const WrapperLink = styled(View)`
    position: absolute;
@@ -30,13 +31,14 @@ export const TextCard = styled(Text)`
    color: ${props => props.theme.colors.textW2};
    background-color: #0003;
    `
-export const IconCoffee = styled(FiCoffee)`
+const Coffee = () => <MaterialCommunityIcons name="coffee" color={theme.colors.primaryVar} size={50} />
+
+export const IconCoffee = styled(Coffee)`
    margin-top: 15px;
-    color: ${({ theme }) => theme.colors.primaryVar};
-    font-size: 50px;
 `
-export const IconRecipe = styled(GiHotMeal)`
+
+const Meal = () => <MaterialCommunityIcons name="food-turkey" color={theme.colors.primaryVar} size={50} />
+
+export const IconRecipe = styled(Meal)`
    margin-top: 15px;
-    color: ${({ theme }) => theme.colors.primaryVar};
-    font-size: 50px;
 `
--- a/src/components/modals/groceries/styles/addItem.js
+++ b/src/components/modals/groceries/styles/addItem.js
@@ -1,13 +1,10 @@
 import styled from 'styled-components'
-import { IoFastFood } from 'react-icons/io5'
-import {AiOutlineFieldNumber} from 'react-icons/ai'
-import {IoPersonCircleSharp} from 'react-icons/io5'
-import {BiCommentAdd} from 'react-icons/bi'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { Image } from 'react-native'
+import theme from '../../../../styles/theme';

 export const StyledImage = styled(Image)`
    position: absolute;
-    resize-mode: contain;
    z-index:0;
    opacity: 0.1;
    width: 70%;
@@ -18,20 +15,8 @@ export const StyledImage = styled(Image)`
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 100px;
 `
-const iconSize = '32px'
-export const IconProduct = styled(IoFastFood)`
-    font-size: ${iconSize};
-    color: ${({theme})=>theme.colors.iconGrey};
-`
-export const IconAmount = styled(AiOutlineFieldNumber)`
-    font-size: ${iconSize};
-    color: ${({theme})=>theme.colors.iconGrey};
-`
-export const IconPerson = styled(IoPersonCircleSharp)`
-    font-size: ${iconSize};
-    color: ${({theme})=>theme.colors.iconGrey};
-`
-export const IconDetails = styled(BiCommentAdd)`
-    font-size: ${iconSize};
-    color: ${({theme})=>theme.colors.iconGrey};
-`
+
+export const IconProduct = () => <MaterialCommunityIcons name="food" color={theme.colors.buttonGrey} size={32} />
+export const IconAmount = () => <MaterialCommunityIcons name="counter" color={theme.colors.buttonGrey} size={32} />
+export const IconPerson = () => <MaterialCommunityIcons name="account-circle" color={theme.colors.buttonGrey} size={32} />
+export const IconDetails = () => <MaterialCommunityIcons name="comment-plus-outline" color={theme.colors.buttonGrey} size={32} />
--- a/src/components/modals/groceries/styles/addProduct.js
+++ b/src/components/modals/groceries/styles/addProduct.js
@@ -1,32 +1,21 @@
 import styled from 'styled-components'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

-import { IoFastFood } from 'react-icons/io5'
-import { BsTag } from 'react-icons/bs'
-import { BiDollar ,BiLinkAlt} from 'react-icons/bi'
 import { Image } from 'react-native'
+import theme from '../../../../styles/theme';

 export const StyledImage = styled(Image)`
    position: absolute;
-    resize-mode: contain;
    width: 35%;
    height: 50%;
    right:0;
    border-radius: 15px; 
 `
 const iconSize = '32px'
-export const IconProduct = styled(IoFastFood)`
-    font-size: ${iconSize};
-    color: ${({theme})=>theme.colors.iconGrey};
-`
-export const IconTag = styled(BsTag)`
-    font-size: ${iconSize};
-    color: ${({theme})=>theme.colors.iconGrey};
-`
-export const IconDollar = styled(BiDollar)`
-    font-size: ${iconSize};
-    color: ${({theme})=>theme.colors.iconGrey};
-`
-export const IconLink = styled(BiLinkAlt)`
-    font-size: ${iconSize};
-    color: ${({theme})=>theme.colors.iconGrey};
-`
+export const IconProduct = () => <MaterialCommunityIcons name="fast-food" color={theme.colors.iconGrey} size={iconSize} />
+
+export const IconTag = () => <MaterialCommunityIcons name="tag-outline" color={theme.colors.iconGrey} size={iconSize} />
+
+export const IconDollar = () => <MaterialCommunityIcons name="currency-usd" color={theme.colors.iconGrey} size={iconSize} />
+
+export const IconLink = () => <MaterialCommunityIcons name="link" color={theme.colors.iconGrey} size={iconSize} />
--- a/src/components/modals/groceries/styles/edit.js
+++ b/src/components/modals/groceries/styles/edit.js
@@ -33,7 +33,6 @@ export const TextTag = styled(Text)`
    margin: 0px 5px;
 `
 export const StyledImage = styled(Image)`
-    resize-mode: contain;
    width:  150px;
    height: 150px;
    margin-top:-50px; 
--- a/src/components/modals/recipes/ModalAddIngredients.js
+++ b/src/components/modals/recipes/ModalAddIngredients.js
@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import styled from "styled-components"
-import { CgFile } from "react-icons/cg"
-import { GiMeal } from "react-icons/gi"
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

 import { useDispatch, useSelector } from 'react-redux'
 import { findRecipeById } from '../../../redux/slices/recipesSlice'
@@ -13,16 +12,11 @@ import {
 import Ingredient from '../../recipes/Ingredient&Button'
 import { itemAdded } from '../../../redux/slices/groceryList/itemsSlice'
 import Dropdown from '../../Dropdown'
+import theme from '../../../styles/theme';

-const IconList = styled(CgFile)`
-    font-size: 16px;
-    color: ${({ theme }) => theme.colors.primaryVar};
-`
-const IconMeal = styled(GiMeal)`
-    font-size: 16px;
-    color: ${({ theme }) => theme.colors.primaryVar};
-`
+const IconList = () => <MaterialCommunityIcons name="format-list-bulleted" color={theme.colors.primaryVar} size={16} />

+const IconMeal = () => <MaterialCommunityIcons name="food" color={theme.colors.primaryVar} size={16} />

 const ModalAddIngredients = (props) => {
    const dispatch = useDispatch()
--- a/src/components/modals/styles/modal.js
+++ b/src/components/modals/styles/modal.js
@@ -1,8 +1,8 @@
 import { Text, View, TextInput } from 'react-native'
 import styled from 'styled-components'
 import Modal from 'react-native-modal';
-import { FaAsterisk } from 'react-icons/fa'
-import { HiCheck } from 'react-icons/hi'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import theme from '../../../styles/theme';

 export const StyledModal = styled(Modal)`
    .modal-content{
@@ -77,17 +77,18 @@ export const ModalDescription = styled(Text)`
    padding: 2px;
 `

-export const IconWrong = styled(FaAsterisk)`
+const Wrong = () => <MaterialCommunityIcons name="asterisk" color={theme.colors.error + 'aa'} size={theme.fontSize.fontS} />
+
+export const IconWrong = styled(Wrong)`
    margin-left: -10px;
    margin-top: -10px;
-    font-size: ${({ theme }) => theme.fontSize.fontS};
-    color: ${({ theme }) => theme.colors.error + 'aa'};
 `
-export const IconCheck = styled(HiCheck)`
+
+const Check = () => <MaterialCommunityIcons name="check" color={theme.colors.primary} size={theme.fontSize.fontM}/>
+
+export const IconCheck = styled(Check)`
    margin-left: -15px;
    margin-top: -3px;
-    font-size: ${({ theme }) => theme.fontSize.fontM};
-    color: ${({ theme }) => theme.colors.primary};
 `


--- a/src/components/recipes/addRecipe/styles/buttons.js
+++ b/src/components/recipes/addRecipe/styles/buttons.js
@@ -2,9 +2,8 @@ import { View } from "react-native"
 import styled, {css} from 'styled-components'
 import { Button } from '../../../../styles/componentBlueprints'

-import { FiPlus, FiSettings } from 'react-icons/fi'
-import { GoTrashcan } from 'react-icons/go'
-import { BiEditAlt } from 'react-icons/bi'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import theme from "../../../../styles/theme";

 export const WrapperAddRecipe = styled(Button)`
    position:absolute;
@@ -16,13 +15,8 @@ export const WrapperAddRecipe = styled(Button)`
        right:10px;
    }
 `
-export const IconPlus = styled(FiPlus)`
-    color: ${({ theme }) => theme.colors.textB2};
-    font-size: 60px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        font-size: 60px;
-    }
-`
+export const IconPlus = () => <MaterialCommunityIcons name="plus" color={theme.colors.textB2} size={60} />
+
 export const WrapperOptions = styled(View)`
    position: absolute;
    top: 0px;
@@ -42,21 +36,23 @@ export const WrapperOptionButtons = styled(View)`
    border-bottom-left-radius: 8px;
    overflow: hidden;
 `
-export const IconOptions = styled(FiSettings)`
+const Options = () => <MaterialCommunityIcons name="cog-outline" color={theme.colors.textW2} size={40} />
+
+export const IconOptions = styled(Options)`
    margin-right: 5px;
    margin-top: 10px;
-    color: ${({ theme }) => theme.colors.textW2};
    transform: rotate(${props => props.toggled ? css`135deg` : css`0deg` });
-    font-size: 40px;
 `
-export const IconRemove = styled(GoTrashcan)`
+
+const Remove = () => <MaterialCommunityIcons name="trash-can-outline" color={theme.colors.error} size={40} />
+
+export const IconRemove = styled(Remove)`
    position: absolute;
-    font-size: 40px;
-    color: ${({ theme }) => theme.colors.error};
 `
-export const IconEdit = styled(BiEditAlt)`
+
+const Edit = () => <MaterialCommunityIcons name="pencil-outline" color={theme.colors.textW2} size={40} />
+
+export const IconEdit = styled(Edit)`
    position: absolute;
    top: 50px;
-    color: ${({ theme }) => theme.colors.textW2};
-    font-size: 40px;
 `
--- a/src/components/recipes/addRecipe/styles/ingredient.js
+++ b/src/components/recipes/addRecipe/styles/ingredient.js
@@ -1,7 +1,8 @@
 import { Text, View } from "react-native"
 import styled from 'styled-components'
-import { GoTrashcan } from 'react-icons/go'
-import { BiEditAlt } from 'react-icons/bi'
+
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import theme from "../../../../styles/theme";

 export const WrapperIngredient = styled(View)`
 margin: 5px 0px;
@@ -47,15 +48,15 @@ font-size: ${({theme}) => theme.fontSize.fontS};
 /* overflow-wrap: break-word; */
 color: ${props => props.theme.colors.textW5};
 `
-export const IconRemove = styled(GoTrashcan)`
+const Remove = () => <MaterialCommunityIcons name="trash-can-outline" color={theme.colors.error + 'aa'} size={theme.fontSize.fontS} />
+
+export const IconRemove = styled(Remove)`
 position:absolute;
 right: 0px;
-color: ${({ theme }) => theme.colors.error + 'aa'};
-font-size: ${({theme}) => theme.fontSize.fontS};
 `
-export const IconEdit = styled(BiEditAlt)`
+const Edit = () => <MaterialCommunityIcons name="pencil-outline" color={theme.colors.textW5} size={theme.fontSize.fontS} />
+
+export const IconEdit = styled(Edit)`
 position:absolute;
 right: 20px;
-color: ${({ theme }) => theme.colors.textW5};
-font-size: ${({theme}) => theme.fontSize.fontS};
 `
--- a/src/components/recipes/styles/recipeCard.js
+++ b/src/components/recipes/styles/recipeCard.js
@@ -32,7 +32,6 @@ export const RecipeName = styled(Text)`
 `

 export const ImageRecipe = styled(Image)`
-    resize-mode: contain;
    width: 100%;
    height: 100%;
    border-radius: 20px;
--- a/src/pages/recipes/styles/addRecipe.js
+++ b/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};
 `
--- a/src/pages/recipes/styles/recipe.js
+++ b/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};
 `


--- a/src/pages/styles/HomePage.js
+++ b/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} />
--- a/src/pages/styles/page.js
+++ b/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} />
--- a/src/styles/componentBlueprints.js
+++ b/src/styles/componentBlueprints.js
@@ -2,22 +2,18 @@ import { TouchableOpacity, View } from "react-native"
 import React from 'react'
 import styled, { css } from 'styled-components'
 //deps
-import { HiCheck } from 'react-icons/hi'
-
 import LightenDarken from '../functions'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import theme from "./theme";
 //standard button layout 
 export const Button = styled(TouchableOpacity)`
-  box-shadow: ${({ theme }) => theme.colors.shadow};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 80px;
-  height:80px;
-  border-radius: 50px;
-  @media ${({ theme }) => theme.mediaQueries.below768}{
-      height: 65px;
-      width:  65px;
-  }
+    box-shadow: ${({ theme }) => theme.colors.shadow};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 65px;
+    width:  65px;
+    border-radius: 35px;
 `
 const CheckButtonWrapper = styled(View)`
    display:flex;
@@ -31,14 +27,11 @@ const CheckButtonWrapper = styled(View)`
    margin: 0px 5px ;
    background-color: ${props => props.checked ? props.theme.colors.selected : props.theme.colors.buttonGrey};
    `
-const IconCheck = styled(HiCheck)`
-    font-size: ${({ theme }) => theme.fontSize.fontL};
-    color: ${({ theme }) => theme.colors.dp00};
-`
+
 export const CheckButton = (props) => {
 	return (
 		<CheckButtonWrapper checked={props.checked} >
-			{/* <IconCheck checked={props.checked} /> */}
+            <MaterialCommunityIcons name="check" color={theme.colors.dp00} size={25} />
 		</CheckButtonWrapper>
 	)
 }
--- a/yarn.lock
+++ b/yarn.lock
@@ -2090,6 +2090,15 @@ cliui@^6.0.0:
    strip-ansi "^6.0.0"
    wrap-ansi "^6.2.0"

+cliui@^7.0.2:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
+  integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^7.0.0"
+
 clone-deep@^4.0.1:
  version "4.0.1"
  resolved "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz"
@@ -2908,7 +2917,7 @@ gensync@^1.0.0-beta.2:
  resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"
  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==

-get-caller-file@^2.0.1:
+get-caller-file@^2.0.1, get-caller-file@^2.0.5:
  version "2.0.5"
  resolved "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz"
  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
@@ -4636,11 +4645,6 @@ react-dom@17.0.1:
    object-assign "^4.1.1"
    scheduler "^0.20.1"

-react-icons@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz"
-  integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==
-
 react-is@^16.13.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
  version "16.13.1"
  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -4708,6 +4712,20 @@ react-native-screens@~3.8.0:
  dependencies:
    warn-once "^0.1.0"

+react-native-vector-icons@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-9.0.0.tgz#ab38ec6941f3f340d39846f1e8300e59863e2fb1"
+  integrity sha512-qKX5d5/TafHmI4B7UOSZCL3BAGh7ZfF30iLwRgxBkKfZl2lKSuHp8Ottj9OyWh9b5fFtlg+LtyvZrns3g2kh+w==
+  dependencies:
+    lodash.frompairs "^4.0.1"
+    lodash.isequal "^4.5.0"
+    lodash.isstring "^4.0.1"
+    lodash.omit "^4.5.0"
+    lodash.pick "^4.4.0"
+    lodash.template "^4.5.0"
+    prop-types "^15.7.2"
+    yargs "^16.1.1"
+
 react-native-web@0.17.1:
  version "0.17.1"
  resolved "https://registry.npmjs.org/react-native-web/-/react-native-web-0.17.1.tgz"
@@ -5727,6 +5745,15 @@ wrap-ansi@^6.2.0:
    string-width "^4.1.0"
    strip-ansi "^6.0.0"

+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrappy@1:
  version "1.0.2"
  resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
@@ -5817,6 +5844,11 @@ y18n@^4.0.0:
  resolved "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz"
  integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==

+y18n@^5.0.5:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
+  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
+
 yallist@^4.0.0:
  version "4.0.0"
  resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"
@@ -5830,6 +5862,11 @@ yargs-parser@^18.1.2:
    camelcase "^5.0.0"
    decamelize "^1.2.0"

+yargs-parser@^20.2.2:
+  version "20.2.9"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
+  integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
+
 yargs@^15.1.0, yargs@^15.3.1:
  version "15.4.1"
  resolved "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz"
@@ -5847,6 +5884,19 @@ yargs@^15.1.0, yargs@^15.3.1:
    y18n "^4.0.0"
    yargs-parser "^18.1.2"

+yargs@^16.1.1:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
+  integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
+  dependencies:
+    cliui "^7.0.2"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.0"
+    y18n "^5.0.5"
+    yargs-parser "^20.2.2"
+
 yocto-queue@^0.1.0:
  version "0.1.0"
  resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"