feat: use icons from svg sheet

src/App.tsx

@@ -1,14 +1,12 @@
 import { useCallback, useEffect, useState } from 'react'
 import styled from 'styled-components'
 
-import playIcon from '@assets/icons/play.svg'
-import resetIcon from '@assets/icons/reset.svg'
 import hintImg from '@assets/imgs/hint.svg'
 import titleImg from '@assets/imgs/title.svg'
 
-import Button from '@components/Button'
 import Grid from '@components/Grid'
 import Hint from '@components/Hint'
+import IconButton from '@components/IconButton'
 import Title from '@components/Title'
 
 import { Step } from '@lib/search'
@@ -144,6 +142,7 @@ export default () => {
           <Colors>
             {THEME_COLORS.map(color =>
               <ThemeOption
+                key={color}
                 data-color={color}
                 data-selected={theme === color ? '' : undefined}
                 onClick={handleTheme(color)}
@@ -152,8 +151,8 @@ export default () => {
           </Colors>
           <Grid data={state.gridData} squareShift={90} />
           <ButtonContainer>
-            <Button icon={playIcon} onClick={start} />
-            <Button icon={resetIcon} onClick={reset} />
+            <IconButton type='play' onClick={start} />
+            <IconButton type='reset' onClick={reset} />
           </ButtonContainer>
         </Content>
         <Hint img={hintImg}>

src/components/Button.tsx → src/components/IconButton.tsx

@@ -1,32 +1,37 @@
 import styled from 'styled-components'
 
-type ButtonProps = {
-  icon: string
+type IconButtonProps = {
+  type: 'play' | 'reset'
   onClick: () => void
   className?: string
 }
 
-const Button = ({ icon, className, onClick }: ButtonProps) => (
+const IconButton = ({ type, className, onClick }: IconButtonProps) => (
   <div className={className} onClick={onClick}>
-    <img src={icon} />
+    <svg>
+      <use href={`#${type}`} />
+    </svg>
   </div>
 )
 
-const ButtonStyled = styled(Button)`
+const IconButtonStyled = styled(IconButton)`
   background-color: white;
   width: 70px;
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 4px;
-  img {
-    width: 30%;
+  svg {
+    width: 24px;
+    height: 24px;
+    fill: var(--primaryLight);
+    transition: fill 1.25s ease;
   }
   :hover {
     cursor: pointer;
     background-color: lightpink;
   }
 `
 
-export default ButtonStyled
+export default IconButtonStyled