hazemKrimi/personal-website
1
0
Fork 0
mirror of https://github.com/hazemKrimi/personal-website.git synced 2026-05-01 18:00:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add width and height as props for icon button component

Browse Source
This commit is contained in:
Hazem Krimi
2021-01-12 23:32:06 +01:00
parent 31ade8ab82
commit f79c18d097
1 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/IconButton.tsx
+12 -4
View File
@@ -3,21 +3,29 @@ import styled from 'styled-components';
import Image from 'next/image'; import Image from 'next/image';
interface Props { interface Props {
icon: string; icon: string;
width?: number;
height?: number;
onClick?: () => void; onClick?: () => void;
} }
const Btn = styled.button` const Btn = styled.button`
display: inline;
cursor: pointer; cursor: pointer;
background: none; background: none;
border: 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 ( return (
<Btn onClick={onClick} className={className}> <Btn onClick={onClick} className={className}>
<Image src={icon} width={24} height={24} /> <Image src={icon} width={width} height={height} />
</Btn> </Btn>
); );
}; };