Add customization options to the icon display and download (#113)

* feat: ability to customize icons before downloading PNG or SVG

* feat: change color input to be a graphical color picker

* feat: tweak appearance of new inputs

* fix: switch to correct Chakra-UI@Next slider syntax

* fix: make default color `currentColor` and also add Reset button

site/src/pages/index.tsx

@@ -5,6 +5,7 @@ import IconOverview from "../components/IconOverview";
 import IconDetailOverlay from "../components/IconDetailOverlay";
 import { useRouter } from "next/router";
 import Header from "../components/Header";
+import {CustomizeIconContext} from "../components/CustomizeIconContext";
 
 const IndexPage = ({ data }) => {
   const router = useRouter();
@@ -12,13 +13,15 @@ const IndexPage = ({ data }) => {
 
   return (
     <Layout>
-      <IconDetailOverlay
-        isOpen={!!router.query.iconName}
-        icon={getIcon(router.query.iconName)}
-        onClose={() => router.push('/')}
-      />
-      <Header {...{data}}/>
-      <IconOverview {...{data}}/>
+      <CustomizeIconContext>
+        <IconDetailOverlay
+          isOpen={!!router.query.iconName}
+          icon={getIcon(router.query.iconName)}
+          onClose={() => router.push('/')}
+        />
+        <Header {...{data}}/>
+        <IconOverview {...{data}}/>
+      </CustomizeIconContext>
     </Layout>
   );
 };