diff --git a/src/components/ArticleLayout.jsx b/src/components/ArticleLayout.jsx
index 1d0b31c..746e7db 100644
--- a/src/components/ArticleLayout.jsx
+++ b/src/components/ArticleLayout.jsx
@@ -4,19 +4,7 @@ import { useRouter } from 'next/router'
import { Container } from '@/components/Container'
import { Prose } from '@/components/Prose'
import { formatDate } from '@/lib/formatDate'
-
-function ArrowLeftIcon(props) {
- return (
-
- )
-}
+import { ArrowLeftIcon } from '@/components/SVGIcons'
export function ArticleLayout({
children,
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
index 080566a..a748a9f 100644
--- a/src/components/Card.jsx
+++ b/src/components/Card.jsx
@@ -1,18 +1,7 @@
import Link from 'next/link'
import clsx from 'clsx'
-function ChevronRightIcon(props) {
- return (
-
- )
-}
+import { ChevronRightIcon } from '@/components/SVGIcons'
export function Card({ as: Component = 'div', className, children }) {
return (
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index a24201c..60f9bdb 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -7,67 +7,7 @@ import clsx from 'clsx'
import { Container } from '@/components/Container'
import avatarImage from '@/images/avatar.jpg'
-
-function CloseIcon(props) {
- return (
-
- )
-}
-
-function ChevronDownIcon(props) {
- return (
-
- )
-}
-
-function SunIcon(props) {
- return (
-
- )
-}
-
-function MoonIcon(props) {
- return (
-
- )
-}
+import { ChevronDownIcon, CloseIcon, MoonIcon, SunIcon } from '@/components/SVGIcons'
function MobileNavItem({ href, children }) {
return (
diff --git a/src/components/SocialIcons.jsx b/src/components/SVGIcons.jsx
similarity index 56%
rename from src/components/SocialIcons.jsx
rename to src/components/SVGIcons.jsx
index 1269999..89d1d6b 100644
--- a/src/components/SocialIcons.jsx
+++ b/src/components/SVGIcons.jsx
@@ -1,16 +1,90 @@
-export function TwitterIcon(props) {
+export function ArrowDownIcon(props) {
return (
-