Add svgs and Icon component that manages svgs

recipes/src/components/Drawer/index.tsx

@@ -1,17 +1,19 @@
 import React, { ReactNode, ReactChildren } from 'react';
 import Drawer, {
   DrawerHeader,
-  DrawerSubtitle,
   DrawerTitle,
   DrawerContent,
 } from '@material/react-drawer';
-import List, {ListItem, ListItemText} from '@material/react-list';
+import List, { ListItem } from '@material/react-list';
+import { ReactComponent as Logo } from 'svgs/logo.svg';
+import { ReactNodeArray } from 'prop-types';
+
+import Icon from 'components/Icon';
 
 import '@material/react-drawer/dist/drawer.min.css';
 import '@material/react-list/dist/list.min.css';
 
 import './styles.scss';
-import { ReactNodeArray } from 'prop-types';
 
 type CBKDrawerProps = {
   children: ReactNodeArray,
@@ -21,6 +23,9 @@ function CBKDrawer(props: CBKDrawerProps) {
   return (
     <Drawer className='cbk-drawer'>
       <DrawerHeader>
+        <Icon width={64}>
+          <Logo />
+        </Icon>
         <DrawerTitle tag='h1'>
           cookbook
         </DrawerTitle>

recipes/src/components/Drawer/styles.scss

@@ -7,6 +7,12 @@
   font-family: $font-family-display;
   color: $white;
   
+  .cbk-icon {
+    svg > g path {
+      fill: $white;
+    }
+  }
+
   .mdc-drawer__title {
     text-transform: uppercase;
     color: $white;

recipes/src/components/Icon/index.tsx

@@ -0,0 +1,27 @@
+import React, { FunctionComponent, ReactElement, SVGProps } from 'react';
+
+export type IconProps = {
+  children: any, // ReactElement throws error wtf
+  className?: string|undefined,
+  height?: number,
+  width?: number,
+  color?: string,
+}
+
+function Icon({ color, children, width, height, className }: IconProps) {
+  return (
+    <div className='cbk-icon'>
+      {
+        React.cloneElement(children, {
+          viewBox: '0 0 100 100',
+          className,
+          fill: color,
+          width,
+          height,
+        })
+      }
+    </div>
+  )
+}
+
+export default Icon;