feat(icons): export sandpack icons (#288)

* feat(icons): export sandpack icons

* docs: add story to the icons

sandpack-react/src/icons/Icons.stories.tsx

@@ -0,0 +1,14 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+import * as icons from ".";
+
+const stories = storiesOf("Components/Icons", module);
+
+Object.keys(icons).forEach((iconName) =>
+  stories.add(iconName, () => {
+    const Component = icons[iconName];
+
+    return <Component />;
+  })
+);

sandpack-react/src/icons/index.tsx

@@ -92,7 +92,9 @@ export const CSBIcon = (): React.ReactElement => (
   </svg>
 );
 
-export const DirectoryIcon = (props: {
+export const DirectoryIcon = ({
+  isOpen = false,
+}: {
   isOpen?: boolean;
 }): React.ReactElement => (
   <svg
@@ -101,16 +103,16 @@ export const DirectoryIcon = (props: {
     width="20"
     xmlns="http://www.w3.org/2000/svg"
   >
-    {props.isOpen ? (
+    {isOpen ? (
       <path
         d="M928 444H820V330.4c0-17.7-14.3-32-32-32H473L355.7 186.2c-1.5-1.4-3.5-2.2-5.5-2.2H96c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h698c13 0 24.8-7.9 29.7-20l134-332c1.5-3.8 2.3-7.9 2.3-12 0-17.7-14.3-32-32-32z m-180 0H238c-13 0-24.8 7.9-29.7 20L136 643.2V256h188.5l119.6 114.4H748V444z"
         fill="currentColor"
-      ></path>
+      />
     ) : (
       <path
         d="M880 298.4H521L403.7 186.2c-1.5-1.4-3.5-2.2-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32z"
         fill="currentColor"
-      ></path>
+      />
     )}
   </svg>
 );

sandpack-react/src/index.ts

@@ -19,5 +19,6 @@ export * from "./contexts/sandpackContext";
 export * from "./contexts/themeContext";
 export * from "./themes";
 export * from "./types";
+export * from "./icons";
 
 export * from "@code-hike/classer";