feat(icon): icon with content components

src/components/icon-with-content.js

@@ -0,0 +1,32 @@
+import React from "react";
+import styled from "styled-components";
+import { Icon } from "./";
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--spacing-y-sm);
+`;
+
+const IconWrapper = styled.div`
+  margin-right: var(--spacing-x-sm);
+`;
+
+const Content = styled.div`
+  p {
+    margin-bottom: 0;
+  }
+`;
+
+export default function IconWithContent({ children }) {
+  return (
+    <Container>
+      {children.map(child => {
+        if (child.type === Icon) {
+          return <IconWrapper key="icon">{child}</IconWrapper>;
+        }
+        return <Content key="content">{child}</Content>;
+      })}
+    </Container>
+  );
+}

src/components/icon.js

@@ -0,0 +1,22 @@
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled.span`
+  display: inline-block;
+  width: ${props => `var(--icon-size-${props.size})`};
+  height: ${props => `var(--icon-size-${props.size})`};
+  color: ${props => `var(--theme-color-${props.color})`};
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+export default function Icon({ children, size = "md", color }) {
+  return (
+    <Container size={size} color={color}>
+      {children}
+    </Container>
+  );
+}