Added map controls component and moved to seperate files for icons

src/components/ChangeNicknameButton.js

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { IconButton } from "theme-ui";
 
 import ChangeNicknameModal from "../modals/ChangeNicknameModal";
+import ChangeNicknameIcon from "../icons/ChangeNicknameIcon";
 
 function ChangeNicknameButton({ nickname, onChange }) {
   const [isChangeModalOpen, setIsChangeModalOpen] = useState(false);
@@ -30,16 +31,7 @@ function ChangeNicknameButton({ nickname, onChange }) {
         title="Change Nickname"
         onClick={openModal}
       >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-          fill="currentcolor"
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path d="M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1c-.1.1-.15.22-.15.36zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
-        </svg>
+        <ChangeNicknameIcon />
       </IconButton>
       <ChangeNicknameModal
         isOpen={isChangeModalOpen}