chore: moving file structure of components

src/components/Icon.js

@@ -0,0 +1,85 @@
+import React from "react"
+import styled from "@emotion/styled"
+import {
+  ArrowRightCircle,
+  ArrowRight,
+  Book,
+  Calendar,
+  ChevronLeft,
+  ChevronRight,
+  Circle,
+  Clock,
+  CloudOff,
+  Download,
+  Edit2,
+  LogIn,
+  Monitor,
+  Moon,
+  Package,
+  Search,
+  Smartphone,
+  Sun,
+  User,
+} from "react-feather"
+import { withTheme } from "emotion-theming"
+
+const IconBase = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: transparent;
+  border-radius: 12px;
+  padding: 5px;
+  transition: 0.1s all ease-in-out;
+  color: ${props => props.theme.colors.secondary};
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px ${props => props.theme.colors.bodyBackground},
+      0 0 0 5px ${props => props.theme.colors.hover};
+  }
+  &:hover {
+    background-color: ${props => !props.disabled && props.theme.colors.hover};
+    cursor: ${props => !props.disabled && "pointer"};
+  }
+`
+
+const Icon = ({ name, tabindex, label, labelRight, size, ...rest }) => (
+  <IconBase tabIndex={tabindex} {...rest}>
+    {label && !labelRight && (
+      <span style={{ margin: "3px -3px 3px 3px", fontWeight: 700 }}>
+        {label}
+      </span>
+    )}
+    {name === "ArrowRightCircle" && <ArrowRightCircle size={size} />}
+    {name === "ArrowRight" && <ArrowRight size={size} />}
+    {name === "Book" && <Book size={size} />}
+    {name === "Calendar" && <Calendar size={size} />}
+    {name === "ChevronLeft" && <ChevronLeft size={size} />}
+    {name === "ChevronRight" && <ChevronRight size={size} />}
+    {name === "Circle" && <Circle size={size} />}
+    {name === "Clock" && <Clock size={size} />}
+    {name === "CloudOff" && <CloudOff size={size} />}
+    {name === "Download" && <Download size={size} />}
+    {name === "Edit2" && <Edit2 size={size} />}
+    {name === "LogIn" && <LogIn size={size} />}
+    {name === "Monitor" && <Monitor size={size} />}
+    {name === "Moon" && <Moon size={size} />}
+    {name === "Package" && <Package size={size} />}
+    {name === "Search" && <Search size={size} />}
+    {name === "Smartphone" && <Smartphone size={size} />}
+    {name === "Sun" && <Sun size={size} />}
+    {name === "User" && <User size={size} />}
+    {label && labelRight && (
+      <span
+        style={{
+          margin: "3px -3px 3px 3px",
+          fontWeight: 700,
+        }}
+      >
+        {label}
+      </span>
+    )}
+  </IconBase>
+)
+
+export default withTheme(Icon)