icons

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};
 `