From f79c18d097c4612467fad1f38ec4dc3667eebeeb Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Tue, 12 Jan 2021 23:32:06 +0100
Subject: [PATCH] Add width and height as props for icon button component

---
 components/IconButton.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/components/IconButton.tsx b/components/IconButton.tsx
index 12b35eb..7958165 100644
--- a/components/IconButton.tsx
+++ b/components/IconButton.tsx
@@ -3,21 +3,29 @@ import styled from 'styled-components';
 import Image from 'next/image';
 interface Props {
 	icon: string;
+	width?: number;
+	height?: number;
 	onClick?: () => void;
 }
 
 const Btn = styled.button`
-	display: inline;
 	cursor: pointer;
 	background: none;
 	border: none;
-	color: none;
+	display: flex;
+	align-items: center;
 `;
 
-const IconButton: FC<Props & { className?: string }> = ({ icon, onClick, className }) => {
+const IconButton: FC<Props & { className?: string }> = ({
+	icon,
+	onClick,
+	className,
+	width = 24,
+	height = 24
+}) => {
 	return (
 		<Btn onClick={onClick} className={className}>
-			<Image src={icon} width={24} height={24} />
+			<Image src={icon} width={width} height={height} />
 		</Btn>
 	);
 };