refactor: Move icons to a separate directory

design-system/components/callout/callout-icon.tsx

@@ -4,7 +4,7 @@ import {
   CheckmarkCircle,
   InformationCircle,
   Warning
-} from '../../elements'
+} from '../../icons'
 
 export const calloutIcon: CalloutIcons = {
   info: <InformationCircle data-testid="information-circle" size="l" />,

design-system/components/language-switch/language-switch.tsx

@@ -9,7 +9,8 @@ import {
   selectActiveClass
 } from '@/lib'
 import { Wrap } from '@/styled-system/jsx'
-import { ButtonAnchor, Earth } from '../../elements'
+import { ButtonAnchor } from '../../elements'
+import { Earth } from '../../icons'
 
 export const LanguageSwitch = ({ lang }: { lang: Locale }) => {
   const { locales } = i18n

design-system/components/pagination/pagination.tsx

@@ -1,12 +1,7 @@
 import { VStack } from '@/styled-system/jsx'
 import { PaginationProps } from './pagination.types'
-import {
-  ButtonLink,
-  ChevronBack,
-  ChevronForward,
-  Small,
-  header
-} from '../../elements'
+import { ButtonLink, Small, header } from '../../elements'
+import { ChevronBack, ChevronForward } from '../../icons'
 
 export const Pagination = ({ prev, next, dictionary }: PaginationProps) => {
   return (

design-system/components/post/post.tsx

@@ -1,7 +1,8 @@
 import { delocalizePath, formatDate, formatReadingTime } from '@/lib'
 import { PostProps } from './post.types'
-import { ButtonLink, Card, ChevronForward, H3, P, Small } from '../../elements'
 import { Image } from '../image'
+import { ButtonLink, Card, H3, P, Small } from '../../elements'
+import { ChevronForward } from '../../icons'
 
 export const Post = ({
   lang,

design-system/components/project/project.tsx

@@ -1,7 +1,8 @@
 import { delocalizePath } from '@/lib'
 import { ProjectProps } from './project.types'
-import { ButtonLink, Card, ChevronForward, H3, P, Small } from '../../elements'
 import { Image } from '../image'
+import { ButtonLink, Card, H3, P, Small } from '../../elements'
+import { ChevronForward } from '../../icons'
 
 export const Project = ({
   lang,

design-system/components/socials/socials.constants.tsx

@@ -9,7 +9,7 @@ import {
   Linkedin,
   Mail,
   Twitter
-} from '../../elements'
+} from '../../icons'
 
 export const socialLinks: Social[] = [
   {

design-system/components/theme-switch/theme-switch.tsx

@@ -2,7 +2,7 @@
 import { ThemeSwitchProps } from './theme-switch.types'
 import { useTheme } from '@/hooks'
 import { Button } from '../../elements'
-import { Moon, Sunny } from '../../elements'
+import { Moon, Sunny } from '../../icons'
 
 export const ThemeSwitch = ({ ariaLabel }: ThemeSwitchProps) => {
   const { theme, toggleTheme } = useTheme()

design-system/elements/index.tsx

@@ -7,36 +7,6 @@ export { InlineCode } from './inline-code'
 export { Figure, Figcaption } from './figure'
 export { Header, header } from './header'
 export { H1, H2, H3, H4 } from './heading'
-export {
-  AlertCircle,
-  At,
-  Bluesky,
-  Book,
-  Cafe,
-  CheckmarkCircle,
-  ChevronBack,
-  ChevronForward,
-  Download,
-  Dribbble,
-  Earth,
-  Facebook,
-  GameController,
-  Github,
-  Headset,
-  Heart,
-  InformationCircle,
-  Instagram,
-  Linkedin,
-  Mail,
-  Moon,
-  Search,
-  Send,
-  Sunny,
-  Sync,
-  Tv,
-  Twitter,
-  Warning
-} from './icon'
 export { InputWrapper, Input } from './input'
 export { Em } from './italic'
 export { Kbd } from './kbd'

design-system/elements/icon/icon.styles.tsx → design-system/icons/icon.styles.tsx

@@ -1,5 +1,5 @@
 import { cva } from '@/styled-system/css'
-import { sharedTransitionProperties } from '../../utils'
+import { sharedTransitionProperties } from '../utils'
 
 export const icon = cva({
   base: {

design-system/index.tsx

@@ -1,62 +1,38 @@
 export {
   A,
-  AlertCircle,
-  At,
   Blockquote,
-  Bluesky,
-  Book,
   Button,
   ButtonAnchor,
   ButtonLink,
-  Cafe,
   Caption,
   Card,
-  CheckmarkCircle,
-  ChevronBack,
-  ChevronForward,
-  Download,
-  Dribbble,
-  Earth,
   Em,
   Equation,
-  Facebook,
   Figcaption,
   Figure,
-  GameController,
-  Github,
   H1,
   H2,
   H3,
   H4,
   Header,
-  Headset,
-  Heart,
   Hr,
-  InformationCircle,
   InlineCode,
   Input,
   InputWrapper,
-  Instagram,
   Kbd,
   Label,
   Li,
   Link,
-  Linkedin,
-  Mail,
-  Moon,
   Nav,
   navigation,
   Ol,
   P,
   Pill,
   S,
-  Search,
-  Send,
   Small,
   Strong,
   Sub,
   Sup,
-  Sync,
   Table,
   TableWrapper,
   Tbody,
@@ -65,12 +41,40 @@ export {
   Th,
   Thead,
   Tr,
+  Ul,
+  Underline
+} from './elements'
+
+export {
+  AlertCircle,
+  At,
+  Bluesky,
+  Book,
+  Cafe,
+  CheckmarkCircle,
+  ChevronBack,
+  ChevronForward,
+  Download,
+  Dribbble,
+  Earth,
+  Facebook,
+  GameController,
+  Github,
+  Headset,
+  Heart,
+  InformationCircle,
+  Instagram,
+  Linkedin,
+  Mail,
+  Moon,
+  Search,
+  Send,
+  Sunny,
+  Sync,
   Tv,
   Twitter,
-  Ul,
-  Underline,
   Warning
-} from './elements'
+} from './icons'
 
 export {
   Avatar,

design-system/sections/footer/footer.tsx

@@ -3,15 +3,8 @@ import { localizePath } from '@/lib'
 import { footer } from './footer.styles'
 import { FooterProps } from './footer.types'
 import { HStack, VStack } from '@/styled-system/jsx'
-import {
-  ButtonAnchor,
-  ButtonLink,
-  Cafe,
-  Heart,
-  Mail,
-  Small,
-  navigation
-} from '../../elements'
+import { ButtonAnchor, ButtonLink, Small, navigation } from '../../elements'
+import { Cafe, Heart, Mail } from '../../icons'
 import { LanguageSwitch, Socials } from '../../components'
 
 export const Footer = ({ lang, dictionary }: FooterProps) => {

design-system/sections/newsletter/newsletter.tsx

@@ -5,20 +5,18 @@ import { NewsletterProps } from './newsletter.types'
 import { mapStateToCalloutVariant } from './newsletter.helpers'
 import { verticalRhythm } from '../../utils'
 import {
-  At,
   Button,
   H2,
   H3,
   Input,
   InputWrapper,
   Li,
   P,
-  Send,
   Small,
-  Sync,
   Ul,
   card
 } from '../../elements'
+import { At, Send, Sync } from '../../icons'
 import { Callout } from '../../components'
 
 export const Newsletter = ({ dictionary, lang }: NewsletterProps) => {