Cart Component

src/components/cart-icon/cart-icon.component.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+import { ReactComponent as ShoppingIcon } from "../../assets/shopping-bag.svg";
+
+import "./cart-icon.styles.scss";
+
+const CartIcon = () => (
+  <div className="cart-icon">
+    <ShoppingIcon className="shopping-icon" />
+    <span className="item-count">0</span>
+  </div>
+);
+
+export default CartIcon;

src/components/cart-icon/cart-icon.styles.scss

@@ -0,0 +1,21 @@
+.cart-icon {
+  width: 45px;
+  height: 45px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  .shopping-icon {
+    width: 24px;
+    height: 24px;
+  }
+
+  .item-count {
+    position: absolute;
+    font-size: 10px;
+    font-weight: bold;
+    bottom: 12px;
+  }
+}

src/components/header/header.component.jsx

@@ -4,6 +4,8 @@ import { connect } from "react-redux";
 
 import { auth } from "../../firebase/firebase.utils";
 
+import CartIcon from "../cart-icon/cart-icon.component";
+
 import "./header.styles.scss";
 import { ReactComponent as Logo } from "../../assets/crown.svg";
 
@@ -28,6 +30,7 @@ const Header = ({ currentUser }) => (
           SIGN IN
         </Link>
       )}
+      <CartIcon />
     </div>
   </div>
 );