Improve SVGs Icons: Load them dynamically to its own component

recipes/src/components/Drawer/index.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode, ReactChildren } from 'react';
+import React, { ReactNode, ReactChildren, createElement } from 'react';
+import ReactDOMServer from 'react-dom/server';
 import Drawer, {
   DrawerHeader,
   DrawerTitle,
@@ -7,8 +8,9 @@ import Drawer, {
 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 Svgs from 'svgs';
+import ReactSVG from 'react-svg';
 
 import '@material/react-drawer/dist/drawer.min.css';
 import '@material/react-list/dist/list.min.css';
@@ -23,9 +25,7 @@ function CBKDrawer(props: CBKDrawerProps) {
   return (
     <Drawer className='cbk-drawer'>
       <DrawerHeader>
-        <Icon width={64}>
-          <Logo />
-        </Icon>
+        <Icon icon='logo' />
         <DrawerTitle tag='h1'>
           cookbook
         </DrawerTitle>

recipes/src/components/Icon/index.tsx

@@ -1,26 +1,30 @@
-import React, { FunctionComponent, ReactElement, SVGProps } from 'react';
+import React from 'react';
+import Svgs from 'svgs';
+import ReactSVG from 'react-svg';
 
 export type IconProps = {
-  children: any, // ReactElement throws error wtf
-  className?: string|undefined,
-  height?: number,
+  icon: string,
+  className?: string,
+  fill?: string,
   width?: number,
-  color?: string,
+  height?: number,
 }
 
-function Icon({ color, children, width, height, className }: IconProps) {
+export function Icon(props: IconProps) {
+  const styles = {
+    width: props.width || 64,
+    height: props.height || 'auto',
+    fill: props.fill,
+  };
+
   return (
-    <div className='cbk-icon'>
-      {
-        React.cloneElement(children, {
-          viewBox: '0 0 100 100',
-          className,
-          fill: color,
-          width,
-          height,
-        })
-      }
-    </div>
+    <ReactSVG
+      // @ts-ignore
+      src={Svgs[props.icon]}
+      className='cbk-icon'
+      svgClassName={props.className}
+      svgStyle={styles}
+    />
   )
 }
 

recipes/src/components/RecipeCard/index.tsx

@@ -33,15 +33,15 @@ function CBKRecipeCard(props: RecipeCardProps) {
           <p>{recipe.summary}</p>
           <ul>
             <li>
-              <Icon width={32} height={32}><Preparation/></Icon>
+              <Icon width={32} height={32} icon='preparation' />
               <label>{prepTime}</label>
             </li>
             <li>
-              <Icon width={32} height={32}><Cooking/></Icon>
+              <Icon width={32} height={32} icon='cooking' />
               <label>{cookTime}</label>
             </li>
             <li>
-              <Icon width={32} height={32}><Servings/></Icon>
+              <Icon width={32} height={32} icon='servings' />
               <label>{servings}</label>
             </li>
           </ul>

recipes/src/svgs/index.js

@@ -0,0 +1,14 @@
+const reqSvgs = require.context('./', true, /\.svg$/);
+
+export const availableIcons = reqSvgs.keys().map(
+  key => key.slice(2, -4)
+);
+
+const svgs = reqSvgs
+  .keys()
+  .reduce((images, path) => {
+    images[path.slice(2, -4)] = reqSvgs(path)
+    return images
+  }, {} );
+
+export default svgs;