feat: Svg and icons (#28)

pancakeswap · Oct 26, 2020 · 6261102 · 6261102
1 parent 67305eb
commit 6261102
Show file tree

Hide file tree

Showing 13 changed files with 306 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -65,5 +65,8 @@
     "react-dom": "^16.14.0",
     "styled-components": "^5.2.0"
   },
-  "dependencies": {}
+  "dependencies": {
+    "@types/lodash": "^4.14.162",
+    "lodash": "^4.17.20"
+  }
 }
diff --git a/src/components/Svg/Icons/Block.tsx b/src/components/Svg/Icons/Block.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import Svg from "../Svg";
+
+const Icon: React.FC<HTMLOrSVGElement> = (props) => {
+  return (
+    <Svg viewBox="0 0 20 20" {...props}>
+      <path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM2 10C2 5.58 5.58 2 10 2C11.85 2 13.55 2.63 14.9 3.69L3.69 14.9C2.63 13.55 2 11.85 2 10ZM10 18C8.15 18 6.45 17.37 5.1 16.31L16.31 5.1C17.37 6.45 18 8.15 18 10C18 14.42 14.42 18 10 18Z" />
+    </Svg>
+  );
+};
+
+export default Icon;
diff --git a/src/components/Svg/Icons/Checkmark.tsx b/src/components/Svg/Icons/Checkmark.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import Svg from "../Svg";
+
+const Icon: React.FC<HTMLOrSVGElement> = (props) => {
+  return (
+    <Svg viewBox="0 0 18 13" {...props}>
+      <path d="M6 10.2001L2.5 6.70007C2.11 6.31007 1.49 6.31007 1.1 6.70007C0.709995 7.09007 0.709995 7.71007 1.1 8.10007L5.29 12.2901C5.68 12.6801 6.31 12.6801 6.7 12.2901L17.3 1.70007C17.69 1.31007 17.69 0.690068 17.3 0.300068C16.91 -0.0899316 16.29 -0.0899316 15.9 0.300068L6 10.2001Z" />
+    </Svg>
+  );
+};
+
+export default Icon;
diff --git a/src/components/Svg/Icons/Error.tsx b/src/components/Svg/Icons/Error.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import Svg from "../Svg";
+
+const Icon: React.FC<HTMLOrSVGElement> = (props) => {
+  return (
+    <Svg viewBox="0 0 20 20" {...props}>
+      <path d="M10 5C10.55 5 11 5.45 11 6V10C11 10.55 10.55 11 10 11C9.45 11 9 10.55 9 10V6C9 5.45 9.45 5 10 5ZM9.99 0C4.47 0 0 4.48 0 10C0 15.52 4.47 20 9.99 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 9.99 0ZM10 18C5.58 18 2 14.42 2 10C2 5.58 5.58 2 10 2C14.42 2 18 5.58 18 10C18 14.42 14.42 18 10 18ZM11 15H9V13H11V15Z" />
+    </Svg>
+  );
+};
+
+export default Icon;
diff --git a/src/components/Svg/Icons/Help.tsx b/src/components/Svg/Icons/Help.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import Svg from "../Svg";
+
+const Icon: React.FC<HTMLOrSVGElement> = (props) => {
+  return (
+    <Svg viewBox="0 0 20 20" {...props}>
+      <path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18ZM9 14H11V16H9V14ZM10.61 4.04C8.55 3.74 6.73 5.01 6.18 6.83C6 7.41 6.44 8 7.05 8H7.25C7.66 8 7.99 7.71 8.13 7.33C8.45 6.44 9.4 5.83 10.43 6.05C11.38 6.25 12.08 7.18 12 8.15C11.9 9.49 10.38 9.78 9.55 11.03C9.55 11.04 9.54 11.04 9.54 11.05C9.53 11.07 9.52 11.08 9.51 11.1C9.42 11.25 9.33 11.42 9.26 11.6C9.25 11.63 9.23 11.65 9.22 11.68C9.21 11.7 9.21 11.72 9.2 11.75C9.08 12.09 9 12.5 9 13H11C11 12.58 11.11 12.23 11.28 11.93C11.3 11.9 11.31 11.87 11.33 11.84C11.41 11.7 11.51 11.57 11.61 11.45C11.62 11.44 11.63 11.42 11.64 11.41C11.74 11.29 11.85 11.18 11.97 11.07C12.93 10.16 14.23 9.42 13.96 7.51C13.72 5.77 12.35 4.3 10.61 4.04Z" />
+    </Svg>
+  );
+};
+
+export default Icon;
diff --git a/src/components/Svg/Icons/Logo.tsx b/src/components/Svg/Icons/Logo.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import Svg from "../Svg";
+
+const Icon: React.FC<HTMLOrSVGElement> = (props) => {
+  return (
+    <Svg viewBox="0 0 25 26" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.38998 4.50021C4.01476 2.49093 5.55649 0.634644 7.60049 0.634644C9.40427 0.634644 10.8665 2.09689 10.8665 3.90066V7.92716C11.3177 7.89532 11.7761 7.87898 12.2404 7.87898C12.6865 7.87898 13.1272 7.89406 13.5612 7.92348V3.90066C13.5612 2.09689 15.0234 0.634644 16.8272 0.634644C18.8712 0.634644 20.4129 2.49094 20.0377 4.50021L19.1539 9.23314C22.1872 10.5574 24.4809 12.8576 24.4809 15.7478V17.4965C24.4809 19.8733 22.9085 21.8633 20.7102 23.2067C18.4948 24.5605 15.4978 25.3653 12.2404 25.3653C8.98304 25.3653 5.98604 24.5605 3.77065 23.2067C1.57242 21.8633 0 19.8733 0 17.4965V15.7478C0 12.8729 2.2701 10.5816 5.27785 9.25465L4.38998 4.50021ZM18.0212 9.85496L19.0555 4.31678C19.3159 2.92223 18.2459 1.63386 16.8272 1.63386C15.5753 1.63386 14.5604 2.64874 14.5604 3.90066V9.02467C14.2324 8.9826 13.8991 8.94928 13.5612 8.92512C13.128 8.89413 12.6873 8.8782 12.2404 8.8782C11.7753 8.8782 11.3168 8.89547 10.8665 8.929C10.5286 8.95417 10.1953 8.98849 9.86729 9.03157V3.90066C9.86729 2.64874 8.85241 1.63386 7.60049 1.63386C6.18184 1.63386 5.11179 2.92223 5.37222 4.31678L6.40988 9.87333C3.16599 11.0783 0.999219 13.2584 0.999219 15.7478V17.4965C0.999219 21.2905 6.03208 24.3661 12.2404 24.3661C18.4488 24.3661 23.4817 21.2905 23.4817 17.4965V15.7478C23.4817 13.2457 21.2927 11.0561 18.0212 9.85496Z"
+        fill="#633001"
+      />
+      <path
+        d="M23.4817 17.4966C23.4817 21.2906 18.4488 24.3662 12.2405 24.3662C6.03213 24.3662 0.999268 21.2906 0.999268 17.4966V15.7479H23.4817V17.4966Z"
+        fill="#FEDC90"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.37227 4.31683C5.11184 2.92228 6.18189 1.63391 7.60054 1.63391C8.85246 1.63391 9.86734 2.64879 9.86734 3.90071V9.03162C10.6324 8.93115 11.4263 8.87825 12.2405 8.87825C13.0358 8.87825 13.8118 8.92872 14.5605 9.02472V3.90071C14.5605 2.64879 15.5753 1.63391 16.8272 1.63391C18.2459 1.63391 19.316 2.92228 19.0555 4.31683L18.0213 9.85501C21.2928 11.0561 23.4817 13.2458 23.4817 15.7479C23.4817 19.5419 18.4488 22.6175 12.2405 22.6175C6.03213 22.6175 0.999268 19.5419 0.999268 15.7479C0.999268 13.2585 3.16604 11.0783 6.40993 9.87338L5.37227 4.31683Z"
+        fill="#D1884F"
+      />
+      <path
+        d="M9.11792 15.2482C9.11792 16.2829 8.55871 17.1217 7.8689 17.1217C7.17908 17.1217 6.61987 16.2829 6.61987 15.2482C6.61987 14.2134 7.17908 13.3746 7.8689 13.3746C8.55871 13.3746 9.11792 14.2134 9.11792 15.2482Z"
+        fill="#633001"
+      />
+      <path
+        d="M17.7361 15.2482C17.7361 16.2829 17.1769 17.1217 16.4871 17.1217C15.7972 17.1217 15.238 16.2829 15.238 15.2482C15.238 14.2134 15.7972 13.3746 16.4871 13.3746C17.1769 13.3746 17.7361 14.2134 17.7361 15.2482Z"
+        fill="#633001"
+      />
+    </Svg>
+  );
+};
+
+export default Icon;
diff --git a/src/components/Svg/Icons/Pancakes.tsx b/src/components/Svg/Icons/Pancakes.tsx
@@ -0,0 +1,112 @@
+import React from "react";
+import Svg from "../Svg";
+
+const Icon: React.FC<HTMLOrSVGElement> = (props) => {
+  return (
+    <Svg viewBox="0 0 64 64" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.43832 38.1153C2.43048 38.3002 2.42654 38.4857 2.42654 38.6718C2.42654 39.3754 2.48287 40.0702 2.59273 40.7545H2.42654V41.8317C2.42654 42.3575 2.45801 42.8784 2.51976 43.3937C3.7248 53.4491 16.4632 61.3609 32 61.3609C47.5368 61.3609 60.2752 53.4491 61.4802 43.3937C61.542 42.8784 61.5735 42.3575 61.5735 41.8317V40.7545H61.4073C61.5171 40.0702 61.5735 39.3754 61.5735 38.6718C61.5735 38.4857 61.5695 38.3002 61.5617 38.1153C61.1156 27.587 48.0511 19.1426 32 19.1426C15.9489 19.1426 2.88444 27.587 2.43832 38.1153ZM0.00951064 38.1153C0.229456 31.6916 4.24297 26.2955 9.82907 22.6067C15.6197 18.7827 23.4643 16.5034 32 16.5034C40.5358 16.5034 48.3803 18.7827 54.1709 22.6067C59.757 26.2955 63.7705 31.6916 63.9905 38.1153H64V41.8317C64 48.5003 59.9176 54.102 54.1709 57.8969C48.3803 61.7208 40.5358 64.0001 32 64.0001C23.4643 64.0001 15.6197 61.7208 9.82907 57.8969C4.08238 54.102 0 48.5003 0 41.8317V38.1153H0.00951064Z"
+        fill="#606063"
+      />
+      <path
+        d="M61.5734 41.832C61.5734 52.6177 48.3329 61.3612 32 61.3612C15.667 61.3612 2.42651 52.6177 2.42651 41.832V38.7405H61.5734V41.832Z"
+        fill="#BEBEBE"
+      />
+      <path
+        d="M61.5734 38.6718C61.5734 49.4575 48.3329 58.201 32 58.201C15.667 58.201 2.42651 49.4575 2.42651 38.6718C2.42651 27.8861 15.667 19.1426 32 19.1426C48.3329 19.1426 61.5734 27.8861 61.5734 38.6718Z"
+        fill="#FAF9FA"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.97668 33.1548C6.97663 33.167 6.97661 33.1792 6.97661 33.1915C6.97661 34.0795 7.09495 34.9492 7.32173 35.794H6.97634V36.9377C6.97634 37.4425 7.01459 37.9414 7.08925 38.4332C8.21673 45.8588 17.6492 51.6547 29.1184 51.6547C40.5876 51.6547 50.0201 45.8588 51.1475 38.4332C51.2222 37.9414 51.2604 37.4425 51.2604 36.9377V35.794H50.9156C51.1362 34.9723 51.2542 34.127 51.2604 33.2641C51.2606 33.2399 51.2607 33.2157 51.2607 33.1915C51.2607 33.1792 51.2607 33.167 51.2606 33.1548C51.2309 25.0436 41.329 18.4744 29.1187 18.4744C16.9083 18.4744 7.00645 25.0436 6.97668 33.1548ZM4.55012 33.1548H4.5498V36.9377C4.5498 42.269 7.79116 46.6683 12.1963 49.5962C16.643 52.5518 22.632 54.2939 29.1184 54.2939C35.6048 54.2939 41.5937 52.5518 46.0405 49.5962C50.4456 46.6683 53.687 42.269 53.687 36.9377V33.2739C53.6872 33.2464 53.6872 33.2189 53.6872 33.1915C53.6872 27.8601 50.4459 23.4609 46.0408 20.533C41.594 17.5773 35.6051 15.8352 29.1187 15.8352C22.6322 15.8352 16.6433 17.5773 12.1965 20.533C7.80153 23.4542 4.56495 27.84 4.55012 33.1548Z"
+        fill="#633001"
+      />
+      <path
+        d="M51.2604 36.9379C51.2604 45.0659 41.3471 51.6549 29.1184 51.6549C16.8897 51.6549 6.97632 45.0659 6.97632 36.9379V33.4849H51.2604V36.9379Z"
+        fill="#FEDC90"
+      />
+      <path
+        d="M51.2604 33.1914C51.2604 41.3195 41.3471 47.9085 29.1184 47.9085C16.8897 47.9085 6.97632 41.3195 6.97632 33.1914C6.97632 25.0634 16.8897 18.4744 29.1184 18.4744C41.3471 18.4744 51.2604 25.0634 51.2604 33.1914Z"
+        fill="#D1884F"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.6497 25.2371C13.6496 25.2493 13.6496 25.2615 13.6496 25.2737C13.6496 26.1618 13.7679 27.0315 13.9947 27.8762H13.6493V29.0199C13.6493 29.5248 13.6876 30.0237 13.7622 30.5154C14.8897 37.941 24.3222 43.737 35.7914 43.737C47.2605 43.737 56.693 37.941 57.8205 30.5154C57.8952 30.0237 57.9334 29.5248 57.9334 29.0199V27.8762H57.5886C57.8092 27.0545 57.9271 26.2092 57.9334 25.3464C57.9336 25.3222 57.9337 25.298 57.9337 25.2737C57.9337 25.2615 57.9337 25.2493 57.9336 25.2371C57.9038 17.1259 48.0019 10.5567 35.7916 10.5567C23.5813 10.5567 13.6794 17.1259 13.6497 25.2371ZM11.2231 25.2371H11.2228V29.0199C11.2228 34.3513 14.4641 38.7505 18.8693 41.6785C23.316 44.6341 29.3049 46.3762 35.7914 46.3762C42.2778 46.3762 48.2667 44.6341 52.7135 41.6785C57.1186 38.7505 60.36 34.3513 60.36 29.0199V25.3561C60.3601 25.3287 60.3602 25.3012 60.3602 25.2737C60.3602 19.9424 57.1189 15.5432 52.7137 12.6152C48.267 9.65961 42.2781 7.91748 35.7916 7.91748C29.3052 7.91748 23.3163 9.65961 18.8695 12.6152C14.4745 15.5364 11.2379 19.9222 11.2231 25.2371Z"
+        fill="#633001"
+      />
+      <path
+        d="M57.9334 29.0201C57.9334 37.1481 48.0201 43.7372 35.7913 43.7372C23.5626 43.7372 13.6493 37.1481 13.6493 29.0201V25.5671H57.9334V29.0201Z"
+        fill="#FEDC90"
+      />
+      <path
+        d="M57.9334 25.274C57.9334 33.402 48.0201 39.991 35.7913 39.991C23.5626 39.991 13.6493 33.402 13.6493 25.274C13.6493 17.1459 23.5626 10.5569 35.7913 10.5569C48.0201 10.5569 57.9334 17.1459 57.9334 25.274Z"
+        fill="#D1884F"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.97668 17.3196C6.97663 17.3318 6.97661 17.344 6.97661 17.3563C6.97661 18.2443 7.09495 19.114 7.32173 19.9588H6.97634V21.1025C6.97634 21.6073 7.01459 22.1062 7.08925 22.598C8.21673 30.0236 17.6492 35.8195 29.1184 35.8195C40.5876 35.8195 50.0201 30.0236 51.1475 22.598C51.2222 22.1062 51.2604 21.6073 51.2604 21.1025V19.9588H50.9156C51.1362 19.1371 51.2542 18.2917 51.2604 17.4289C51.2606 17.4047 51.2607 17.3805 51.2607 17.3563C51.2607 17.344 51.2607 17.3318 51.2606 17.3196C51.2309 9.20843 41.329 2.63919 29.1187 2.63919C16.9083 2.63919 7.00645 9.20843 6.97668 17.3196ZM4.55012 17.3196H4.5498V21.1025C4.5498 26.4338 7.79116 30.833 12.1963 33.761C16.643 36.7166 22.632 38.4587 29.1184 38.4587C35.6048 38.4587 41.5937 36.7166 46.0405 33.761C50.4456 30.833 53.687 26.4338 53.687 21.1025V17.4387C53.6872 17.4112 53.6872 17.3837 53.6872 17.3563C53.6872 12.0249 50.4459 7.62568 46.0408 4.69775C41.594 1.74213 35.6051 0 29.1187 0C22.6322 0 16.6433 1.74213 12.1965 4.69775C7.80153 7.61896 4.56495 12.0047 4.55012 17.3196Z"
+        fill="#633001"
+      />
+      <path
+        d="M51.2604 21.1027C51.2604 29.2307 41.3471 35.8197 29.1184 35.8197C16.8897 35.8197 6.97632 29.2307 6.97632 21.1027V17.6497H51.2604V21.1027Z"
+        fill="#FEDC90"
+      />
+      <path
+        d="M51.2604 17.3562C51.2604 25.4842 41.3471 32.0733 29.1184 32.0733C16.8897 32.0733 6.97632 25.4842 6.97632 17.3562C6.97632 9.22822 16.8897 2.63916 29.1184 2.63916C41.3471 2.63916 51.2604 9.22822 51.2604 17.3562Z"
+        fill="#D1884F"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.214 18.272C12.214 20.9856 14.0269 23.4161 16.8871 25.0513L14.9054 28.7844L14.9059 28.7847H14.9054V38.2326C14.9054 39.4819 15.8366 40.4947 16.9853 40.4947C18.134 40.4947 19.0652 39.4819 19.0652 38.2326V30.7188L21.1972 26.7024C22.5605 27.0169 24.0238 27.1876 25.5468 27.1876C32.9103 27.1876 38.8796 23.196 38.8796 18.272C38.8796 13.3481 32.9103 9.35645 25.5468 9.35645C18.1833 9.35645 12.214 13.3481 12.214 18.272Z"
+        fill="url(#paint0_linear)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.8871 25.0513C16.5702 24.8701 16.2663 24.6792 15.9762 24.4793C13.6475 22.8741 12.2139 20.685 12.2139 18.272C12.2139 13.3481 18.1832 9.35641 25.5468 9.35641C32.9103 9.35641 38.8796 13.3481 38.8796 18.272C38.8796 23.1959 32.9103 27.1876 25.5468 27.1876C24.0238 27.1876 22.5604 27.0168 21.1972 26.7024L19.0652 30.7187V38.2325C19.0652 39.4819 18.134 40.4947 16.9853 40.4947C15.8366 40.4947 14.9054 39.4819 14.9054 38.2325V28.7847L16.8871 25.0513ZM12.7822 28.8244V38.2325C12.7822 40.7573 14.664 42.804 16.9853 42.804C19.3066 42.804 21.1884 40.7573 21.1884 38.2325V31.3375L22.2942 29.2544C23.3445 29.4135 24.433 29.4969 25.5468 29.4969C29.5564 29.4969 33.2881 28.4148 36.0865 26.5435C38.8503 24.6954 41.0028 21.836 41.0028 18.272C41.0028 14.708 38.8503 11.8486 36.0865 10.0005C33.2881 8.12923 29.5564 7.04712 25.5468 7.04712C21.5371 7.04712 17.8054 8.12923 15.007 10.0005C12.2432 11.8486 10.0907 14.708 10.0907 18.272C10.0907 21.4 11.738 23.9758 14.0266 25.8213L13.0813 27.6021C12.9912 27.7662 12.9192 27.9435 12.8685 28.1307C12.8064 28.3589 12.7783 28.5928 12.7822 28.8244Z"
+        fill="#633001"
+      />
+      <path
+        d="M16.3791 14.5156C16.3791 17.0663 19.3667 19.1341 23.0521 19.1341C26.7375 19.1341 29.7251 17.0663 29.7251 14.5156C29.7251 11.9648 26.7375 9.89697 23.0521 9.89697C19.3667 9.89697 16.3791 11.9648 16.3791 14.5156Z"
+        fill="#9E7200"
+      />
+      <path d="M16.3792 12.5361H29.7251V14.5155H16.3792V12.5361Z" fill="#9E7200" />
+      <path
+        d="M16.3791 12.5361C16.3791 15.0868 19.3667 17.1546 23.0521 17.1546C26.7375 17.1546 29.7251 15.0868 29.7251 12.5361C29.7251 9.98529 26.7375 7.91748 23.0521 7.91748C19.3667 7.91748 16.3791 9.98529 16.3791 12.5361Z"
+        fill="#F0B90B"
+      />
+      <path
+        d="M20.52 11.9795L22.4008 10.6777C22.7983 10.4027 23.3062 10.4027 23.7036 10.6777L25.5845 11.9795C25.959 12.2388 25.959 12.8336 25.5845 13.0928L23.7036 14.3946C23.3062 14.6697 22.7983 14.6697 22.4008 14.3946L20.52 13.0928C20.1454 12.8336 20.1454 12.2388 20.52 11.9795Z"
+        fill="#9E7200"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.1938 7.32218C18.7911 6.21664 20.8681 5.6084 23.0522 5.6084C25.2363 5.6084 27.3133 6.21664 28.9106 7.32218C30.4827 8.41029 31.8484 10.1975 31.8484 12.5363V14.5157C31.8484 16.8545 30.4827 18.6417 28.9106 19.7298C27.3133 20.8353 25.2363 21.4435 23.0522 21.4435C20.8681 21.4435 18.7911 20.8353 17.1938 19.7298C15.6217 18.6417 14.256 16.8545 14.256 14.5157V12.5363C14.256 10.1975 15.6217 8.41029 17.1938 7.32218ZM23.0522 7.91769C19.3668 7.91769 16.3792 9.9855 16.3792 12.5363V14.5157C16.3792 17.0664 19.3668 19.1343 23.0522 19.1343C26.7376 19.1343 29.7252 17.0664 29.7252 14.5157V12.5363C29.7252 9.9855 26.7376 7.91769 23.0522 7.91769Z"
+        fill="#633001"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear"
+          x1="25.691"
+          y1="9.6549"
+          x2="25.691"
+          y2="40.2608"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#9F4A08" />
+          <stop offset="0.370494" stopColor="#7D3900" />
+          <stop offset="1" stopColor="#8D4104" />
+        </linearGradient>
+      </defs>
+    </Svg>
+  );
+};
+
+export default Icon;
diff --git a/src/components/Svg/Icons/Remove.tsx b/src/components/Svg/Icons/Remove.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import Svg from "../Svg";
+
+const Icon: React.FC<HTMLOrSVGElement> = (props) => {
+  return (
+    <Svg viewBox="0 0 20 20" {...props}>
+      <path d="M5 10C5 10.55 5.45 11 6 11H14C14.55 11 15 10.55 15 10C15 9.45 14.55 9 14 9H6C5.45 9 5 9.45 5 10ZM10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18Z" />
+    </Svg>
+  );
+};
+
+export default Icon;
diff --git a/src/components/Svg/Svg.tsx b/src/components/Svg/Svg.tsx
@@ -0,0 +1,18 @@
+import { SVGAttributes } from "react";
+import styled, { DefaultTheme } from "styled-components";
+import getThemeValue from "../../util/getThemeValue";
+
+export interface Props extends SVGAttributes<HTMLOrSVGElement> {
+  theme: DefaultTheme;
+}
+
+const Svg = styled.svg.attrs({ xmlns: "http://www.w3.org/2000/svg" })<Props>`
+  fill: ${({ theme, color }) => getThemeValue(`colors.${color}`, color)(theme)};
+`;
+
+Svg.defaultProps = {
+  color: "text",
+  width: "20px",
+};
+
+export default Svg;
diff --git a/src/components/Svg/index.stories.tsx b/src/components/Svg/index.stories.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import styled from "styled-components";
+import Svg from "./Svg";
+
+export default {
+  title: "Svg Icons",
+  component: Svg,
+  argTypes: {},
+};
+
+const Flex = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const Default: React.FC = () => {
+  return (
+    <div>
+      <Svg viewBox="0 0 18 13">
+        <path d="M6 10.2001L2.5 6.70007C2.11 6.31007 1.49 6.31007 1.1 6.70007C0.709995 7.09007 0.709995 7.71007 1.1 8.10007L5.29 12.2901C5.68 12.6801 6.31 12.6801 6.7 12.2901L17.3 1.70007C17.69 1.31007 17.69 0.690068 17.3 0.300068C16.91 -0.0899316 16.29 -0.0899316 15.9 0.300068L6 10.2001Z" />
+      </Svg>
+      <Svg color="red" viewBox="0 0 18 13">
+        <path d="M6 10.2001L2.5 6.70007C2.11 6.31007 1.49 6.31007 1.1 6.70007C0.709995 7.09007 0.709995 7.71007 1.1 8.10007L5.29 12.2901C5.68 12.6801 6.31 12.6801 6.7 12.2901L17.3 1.70007C17.69 1.31007 17.69 0.690068 17.3 0.300068C16.91 -0.0899316 16.29 -0.0899316 15.9 0.300068L6 10.2001Z" />
+      </Svg>
+      <Svg color="primary" width="50px" viewBox="0 0 18 13">
+        <path d="M6 10.2001L2.5 6.70007C2.11 6.31007 1.49 6.31007 1.1 6.70007C0.709995 7.09007 0.709995 7.71007 1.1 8.10007L5.29 12.2901C5.68 12.6801 6.31 12.6801 6.7 12.2901L17.3 1.70007C17.69 1.31007 17.69 0.690068 17.3 0.300068C16.91 -0.0899316 16.29 -0.0899316 15.9 0.300068L6 10.2001Z" />
+      </Svg>
+    </div>
+  );
+};
+
+const context = require.context("./Icons", true, /.tsx$/);
+const components = context.keys().reduce((accum, path) => {
+  const file = path.substring(2).replace(".tsx", "");
+  return {
+    ...accum,
+    [file]: context(path),
+  };
+}, {});
+
+export const Icons: React.FC = () => {
+  return (
+    <Flex>
+      {Object.keys(components).map((file) => {
+        const Icon = components[file].default;
+        return (
+          <Flex key={file} style={{ flexDirection: "column", marginRight: "8px" }}>
+            <Icon size="32px" />
+            <span>{file}</span>
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+};
diff --git a/src/components/Svg/index.tsx b/src/components/Svg/index.tsx
@@ -0,0 +1,9 @@
+export { default as BlockIcon } from "./Icons/Block";
+export { default as CheckmarkIcon } from "./Icons/Checkmark";
+export { default as ErrorIcon } from "./Icons/Error";
+export { default as HelpIcon } from "./Icons/Help";
+export { default as LogoIcon } from "./Icons/Logo";
+export { default as PancakesIcon } from "./Icons/Pancakes";
+export { default as RemoveIcon } from "./Icons/Remove";
+
+export { default as Svg } from "./Svg";
diff --git a/src/util/getThemeValue.ts b/src/util/getThemeValue.ts
@@ -0,0 +1,7 @@
+import get from "lodash/get";
+import { DefaultTheme } from "styled-components";
+
+const getThemeValue = (path: string, fallback?: string | number) => (theme: DefaultTheme): string =>
+  get(theme, path, fallback);
+
+export default getThemeValue;