Update icons location

components/MobileNav.tsx

@@ -78,7 +78,10 @@ const MobileNav: FC<Props> = ({ open, close }) => {
 	return (
 		<Bar dark={dark} open={open} ref={ref}>
 			<div className='close'>
-				<IconButton icon={dark ? '/dark-close.svg' : '/light-close.svg'} onClick={close} />
+				<IconButton
+					icon={dark ? '/icons/dark-close.svg' : '/icons/light-close.svg'}
+					onClick={close}
+				/>
 			</div>
 			<div className='mobile-button-wrapper'>
 				<Button onClick={() => toggle()}>{dark ? 'Light Mode' : 'Dark Mode'}</Button>

components/Nav.tsx

@@ -74,7 +74,7 @@ const Nav: FC = () => {
 				<h1>Hazem Krimi</h1>
 			</div>
 			<div className='buttons'>
-				<IconButton icon={dark ? '/sun.svg' : '/moon.svg'} onClick={toggle} />
+				<IconButton icon={dark ? '/icons/sun.svg' : '/icons/moon.svg'} onClick={toggle} />
 				<Button onClick={() => router.push('/about')}>About</Button>
 				<Button onClick={() => router.push('/portfolio')}>Portfolio</Button>
 				<Button onClick={() => router.push('/blog')}>Blog</Button>
@@ -87,7 +87,7 @@ const Nav: FC = () => {
 					Resume
 				</Button>
 				<IconButton
-					icon={dark ? '/light-menu.svg' : '/dark-menu.svg'}
+					icon={dark ? '/icons/light-menu.svg' : '/icons/dark-menu.svg'}
 					onClick={() => setMobileNavOpen(true)}
 				/>
 			</div>

pages/about.tsx

@@ -107,43 +107,43 @@ const About: FC = () => {
 						<h1>Contact Me</h1>
 						<div className='contact'>
 							<IconButton
-								icon={dark ? '/light-mail.svg' : '/dark-mail.svg'}
+								icon={dark ? '/icons/light-mail.svg' : '/icons/dark-mail.svg'}
 								width={36}
 								height={36}
 								onClick={() => window.open('mailto:me@hazemkrimi.tech', '_blank')}
 							/>
 							<IconButton
-								icon={dark ? '/light-github.svg' : '/dark-github.svg'}
+								icon={dark ? '/icons/light-github.svg' : '/icons/dark-github.svg'}
 								width={36}
 								height={36}
 								onClick={() => window.open('https://github.com/hazemKrimi', '_blank')}
 							/>
 							<IconButton
-								icon={dark ? '/light-twitter.svg' : '/dark-twitter.svg'}
+								icon={dark ? '/icons/light-twitter.svg' : '/icons/dark-twitter.svg'}
 								width={36}
 								height={36}
 								onClick={() => window.open('https://twitter.com/HazemKrimi', '_blank')}
 							/>
 							<IconButton
-								icon={dark ? '/light-linkedin.svg' : '/dark-linkedin.svg'}
+								icon={dark ? '/icons/light-linkedin.svg' : '/icons/dark-linkedin.svg'}
 								width={36}
 								height={36}
 								onClick={() => window.open('https://linkedin.com/in/hazemkrimi', '_blank')}
 							/>
 							<IconButton
-								icon={dark ? '/light-codepen.svg' : '/dark-codepen.svg'}
+								icon={dark ? '/icons/light-codepen.svg' : '/icons/dark-codepen.svg'}
 								width={36}
 								height={36}
 								onClick={() => window.open('https://codepen.io/hazemkrimi', '_blank')}
 							/>
 							<IconButton
-								icon={dark ? '/light-dribbble.svg' : '/dark-dribbble.svg'}
+								icon={dark ? '/icons/light-dribbble.svg' : '/icons/dark-dribbble.svg'}
 								width={36}
 								height={36}
 								onClick={() => window.open('https://dribbble.com/HazemKrimi', '_blank')}
 							/>
 							<IconButton
-								icon={dark ? '/light-instagram.svg' : '/dark-instagram.svg'}
+								icon={dark ? '/icons/light-instagram.svg' : '/icons/dark-instagram.svg'}
 								width={36}
 								height={36}
 								onClick={() => window.open('https://instagram.com/hazemkrimi', '_blank')}

pages/blog/[slug].tsx

@@ -148,7 +148,7 @@ const BlogPost: FC<Props> = ({ source, frontMatter }) => {
 			<Wrapper>
 				<div className='meta'>
 					<div className='back' onClick={() => router.back()}>
-						<IconButton icon='/arrow-left.svg' />
+						<IconButton icon='/icons/arrow-left.svg' />
 						<span>Back</span>
 					</div>
 					<h1>{frontMatter.title}</h1>

pages/blog/index.tsx

@@ -79,7 +79,7 @@ const Index: FC<Props> = ({ blogPosts }) => {
 			</Head>
 			<Wrapper>
 				<div className='back' onClick={() => router.back()}>
-					<IconButton icon='/arrow-left.svg' />
+					<IconButton icon='/icons/arrow-left.svg' />
 					<span>Back</span>
 				</div>
 				<h1>Blog</h1>

pages/portfolio/[slug].tsx

@@ -135,7 +135,7 @@ const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
 			<Wrapper>
 				<div className='meta'>
 					<div className='back' onClick={() => router.back()}>
-						<IconButton icon='/arrow-left.svg' />
+						<IconButton icon='/icons/arrow-left.svg' />
 						<span>Back</span>
 					</div>
 					<h1>{frontMatter.title}</h1>

pages/portfolio/index.tsx

@@ -78,7 +78,7 @@ const Index: FC<Props> = ({ portfolioProjects }) => {
 			</Head>
 			<Wrapper>
 				<div className='back' onClick={() => router.back()}>
-					<IconButton icon='/arrow-left.svg' />
+					<IconButton icon='/icons/arrow-left.svg' />
 					<span>Back</span>
 				</div>
 				<h1>Portfolio</h1>