feat(icon): Arrow down (#95)

* feat(icon): Arrow down

* feat(icon): Swap vert & Sync alt

* fix: Missing exports

src/components/Svg/Icons/ArrowDown.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import Svg from "../Svg";
+import SvgProps from "../types";
+
+const Icon: React.FC<SvgProps> = (props) => {
+  return (
+    <Svg viewBox="0 0 24 25" {...props}>
+      <path d="M11 5V16.17L6.11997 11.29C5.72997 10.9 5.08997 10.9 4.69997 11.29C4.30997 11.68 4.30997 12.31 4.69997 12.7L11.29 19.29C11.68 19.68 12.31 19.68 12.7 19.29L19.29 12.7C19.68 12.31 19.68 11.68 19.29 11.29C18.9 10.9 18.27 10.9 17.88 11.29L13 16.17V5C13 4.45 12.55 4 12 4C11.45 4 11 4.45 11 5Z" />
+    </Svg>
+  );
+};
+
+export default Icon;

src/components/Svg/Icons/SwapVert.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import Svg from "../Svg";
+import SvgProps from "../types";
+
+const Icon: React.FC<SvgProps> = (props) => {
+  return (
+    <Svg viewBox="0 0 24 25" {...props}>
+      <path d="M16 17.01V11C16 10.45 15.55 10 15 10C14.45 10 14 10.45 14 11V17.01H12.21C11.76 17.01 11.54 17.55 11.86 17.86L14.65 20.64C14.85 20.83 15.16 20.83 15.36 20.64L18.15 17.86C18.47 17.55 18.24 17.01 17.8 17.01H16ZM8.65003 3.35002L5.86003 6.14002C5.54003 6.45002 5.76003 6.99002 6.21003 6.99002H8.00003V13C8.00003 13.55 8.45003 14 9.00003 14C9.55003 14 10 13.55 10 13V6.99002H11.79C12.24 6.99002 12.46 6.45002 12.14 6.14002L9.35003 3.35002C9.16003 3.16002 8.84003 3.16002 8.65003 3.35002Z" />
+    </Svg>
+  );
+};
+
+export default Icon;

src/components/Svg/Icons/SyncAlt.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import Svg from "../Svg";
+import SvgProps from "../types";
+
+const Icon: React.FC<SvgProps> = (props) => {
+  return (
+    <Svg viewBox="0 0 24 25" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.86 4.86003L21.65 7.65003C21.84 7.84003 21.84 8.16003 21.64 8.35003L18.85 11.14C18.54 11.46 18 11.24 18 10.79V9.00003H4C3.45 9.00003 3 8.55003 3 8.00003C3 7.45003 3.45 7.00003 4 7.00003H18V5.21003C18 4.76003 18.54 4.54003 18.86 4.86003ZM5.14001 19.14L2.35001 16.35C2.16001 16.16 2.16001 15.84 2.36001 15.65L5.15001 12.86C5.46001 12.54 6.00001 12.76 6.00001 13.21V15H20C20.55 15 21 15.45 21 16C21 16.55 20.55 17 20 17H6.00001V18.79C6.00001 19.24 5.46001 19.46 5.14001 19.14Z"
+      />
+    </Svg>
+  );
+};
+
+export default Icon;

src/components/Svg/index.stories.tsx

@@ -36,11 +36,11 @@ const components = context.keys().reduce((accum, path) => {
 
 export const Icons: React.FC = () => {
   return (
-    <Flex justifyContent="center" alignItems="center" flexWrap="wrap">
+    <Flex justifyContent="start" alignItems="center" flexWrap="wrap" style={{ maxWidth: "800px" }}>
       {Object.keys(components).map((file) => {
         const Icon = components[file].default;
         return (
-          <Flex key={file} flexDirection="column" alignItems="center" mr="16px" mb="16px">
+          <Flex key={file} flexDirection="column" alignItems="center" py="4px" px="8px" mb="32px">
             <Icon size="32px" />
             <Text color="textSubtle" fontSize="12px">
               {file}

src/components/Svg/index.tsx

@@ -1,5 +1,6 @@
 export { default as AddIcon } from "./Icons/Add";
 export { default as ArrowForwardIcon } from "./Icons/ArrowForward";
+export { default as ArrowDownIcon } from "./Icons/ArrowDown";
 export { default as BinanceIcon } from "./Icons/Binance";
 export { default as BlockIcon } from "./Icons/Block";
 export { default as CheckmarkIcon } from "./Icons/Checkmark";
@@ -21,4 +22,6 @@ export { default as ProgressBunny } from "./Icons/ProgressBunny";
 export { default as Won } from "./Icons/Won";
 export { default as Ticket } from "./Icons/Ticket";
 export { default as TicketRound } from "./Icons/TicketRound";
+export { default as SwapVertIcon } from "./Icons/SwapVert";
+export { default as SyncAltIcon } from "./Icons/SyncAlt";
 export { default as Svg } from "./Svg";