fix: icon names and imports

src/app/[locale]/(default)/layout.tsx

@@ -1,8 +1,7 @@
-import { unstable_setRequestLocale } from 'next-intl/server';
-
 import { Footer } from '@/components/layout/Footer';
 import { Header } from '@/components/layout/Header';
 import { Main } from '@/components/layout/Main';
+import { unstable_setRequestLocale } from 'next-intl/server';
 
 type DefaultLayoutProps = {
   children: React.ReactNode;

src/app/[locale]/(default)/news/(header)/layout.tsx

@@ -1,4 +1,4 @@
-import { SquarePen } from 'lucide-react';
+import { SquarePenIcon } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { unstable_setRequestLocale } from 'next-intl/server';
 
@@ -23,7 +23,7 @@ export default function NewsHeaderLayout({
         <h1 className='my-4'>{t('title')}</h1>
         <Button asChild size='sm'>
           <Link href='/news/new'>
-            <SquarePen className='mr-2 h-4 w-4' />
+            <SquarePenIcon className='mr-2 h-4 w-4' />
             {t('newArticle')}
           </Link>
         </Button>

src/app/[locale]/(default)/storage/layout.tsx

@@ -1,14 +1,12 @@
-import { useTranslations } from 'next-intl';
-
 import { Button } from '@/components/ui/Button';
-
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/Tooltip';
-import { ShoppingCart } from 'lucide-react';
+import { ShoppingCartIcon } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 
 export default function StorageLayout({
   children,
@@ -25,7 +23,7 @@ export default function StorageLayout({
           <Tooltip>
             <TooltipTrigger asChild>
               <Button className='absolute right-0 bottom-0 md:right-5'>
-                <ShoppingCart />
+                <ShoppingCartIcon />
               </Button>
             </TooltipTrigger>
             <TooltipContent>

src/app/[locale]/(default)/storage/page.tsx

@@ -1,14 +1,7 @@
-import { items } from '@/mock-data/items';
-import { useTranslations } from 'next-intl';
-import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
-import Image from 'next/image';
-import { createSearchParamsCache, parseAsInteger } from 'nuqs/parsers';
-
 import { PaginationCarousel } from '@/components/layout/PaginationCarousel';
 import { Button } from '@/components/ui/Button';
 import {
   Card,
-  CardContent,
   CardDescription,
   CardFooter,
   CardHeader,
@@ -23,6 +16,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/Select';
+import { items } from '@/mock-data/items';
+import { useTranslations } from 'next-intl';
+import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
+import Image from 'next/image';
+import { createSearchParamsCache, parseAsInteger } from 'nuqs/parsers';
 
 export async function generateMetadata({
   params: { locale },

src/app/[locale]/layout.tsx

@@ -1,10 +1,8 @@
-import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
-import { Inter, Montserrat } from 'next/font/google';
-
+import { RootProviders } from '@/components/providers/RootProviders';
 import { routing } from '@/lib/locale';
 import { cx } from '@/lib/utils';
-
-import { RootProviders } from '@/components/providers/RootProviders';
+import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
+import { Inter, Montserrat } from 'next/font/google';
 
 type LocaleLayoutProps = {
   children: React.ReactNode;

src/components/assets/icons/Facebook.tsx → src/components/assets/icons/FacebookIcon.tsx

@@ -1,4 +1,4 @@
-function Facebook({ className, ...rest }: { className?: string }) {
+function FacebookIcon({ className, ...rest }: { className?: string }) {
   return (
     <svg
       className={className}
@@ -19,4 +19,4 @@ function Facebook({ className, ...rest }: { className?: string }) {
   );
 }
 
-export { Facebook };
+export { FacebookIcon };

src/components/assets/icons/Github.tsx → src/components/assets/icons/GitHubIcon.tsx

@@ -1,4 +1,4 @@
-function Github({ className, ...rest }: { className?: string }) {
+function GitHubIcon({ className, ...rest }: { className?: string }) {
   return (
     <svg
       className={className}
@@ -20,4 +20,4 @@ function Github({ className, ...rest }: { className?: string }) {
   );
 }
 
-export { Github };
+export { GitHubIcon };

src/components/assets/icons/Instagram.tsx → src/components/assets/icons/InstagramIcon.tsx

@@ -1,4 +1,4 @@
-function Instagram({ className, ...rest }: { className?: string }) {
+function InstagramIcon({ className, ...rest }: { className?: string }) {
   return (
     <svg
       className={className}
@@ -21,4 +21,4 @@ function Instagram({ className, ...rest }: { className?: string }) {
   );
 }
 
-export { Instagram };
+export { InstagramIcon };

src/components/assets/icons/Slack.tsx → src/components/assets/icons/SlackIcon.tsx

@@ -1,4 +1,4 @@
-function Slack({ className, ...rest }: { className?: string }) {
+function SlackIcon({ className, ...rest }: { className?: string }) {
   return (
     <svg
       className={className}
@@ -26,4 +26,4 @@ function Slack({ className, ...rest }: { className?: string }) {
   );
 }
 
-export { Slack };
+export { SlackIcon };

src/components/assets/icons/index.tsx

@@ -0,0 +1,4 @@
+export * from './FacebookIcon';
+export * from './GitHubIcon';
+export * from './InstagramIcon';
+export * from './SlackIcon';

src/components/assets/sponsors/index.tsx

@@ -0,0 +1,2 @@
+export * from './IDILogo';
+export * from './NexusLogo';

src/components/layout/Footer.tsx

@@ -1,18 +1,17 @@
-import { Bug, Mail } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import ExternalLink from 'next/link';
-
-import { Link } from '@/lib/locale/navigation';
-
-import { Facebook } from '@/components/assets/icons/Facebook';
-import { Github } from '@/components/assets/icons/Github';
-import { Instagram } from '@/components/assets/icons/Instagram';
-import { Slack } from '@/components/assets/icons/Slack';
-import { IDILogo } from '@/components/assets/sponsors/IDILogo';
-import { NexusLogo } from '@/components/assets/sponsors/NexusLogo';
+import {
+  FacebookIcon,
+  GitHubIcon,
+  InstagramIcon,
+  SlackIcon,
+} from '@/components/assets/icons';
+import { IDILogo, NexusLogo } from '@/components/assets/sponsors';
 import { LogoLink } from '@/components/layout/LogoLink';
 import { Nav } from '@/components/layout/Nav';
 import { Button } from '@/components/ui/Button';
+import { Link } from '@/lib/locale/navigation';
+import { BugIcon, MailIcon } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import ExternalLink from 'next/link';
 
 function Footer() {
   const t = useTranslations('layout');
@@ -54,7 +53,7 @@ function Footer() {
                   href='mailto:[email protected]'
                   aria-label={t('sendAnEmail')}
                 >
-                  <Mail className='h-4 w-4' />
+                  <MailIcon className='h-4 w-4' />
                 </ExternalLink>
               </Button>
             </li>
@@ -67,7 +66,7 @@ function Footer() {
                   target='_blank'
                   rel='noopener noreferrer'
                 >
-                  <Slack className='h-4 w-4' />
+                  <SlackIcon className='h-4 w-4' />
                 </ExternalLink>
               </Button>
             </li>
@@ -80,7 +79,7 @@ function Footer() {
                   target='_blank'
                   rel='noopener noreferrer'
                 >
-                  <Facebook className='h-4 w-4' />
+                  <FacebookIcon className='h-4 w-4' />
                 </ExternalLink>
               </Button>
             </li>
@@ -93,7 +92,7 @@ function Footer() {
                   target='_blank'
                   rel='noopener noreferrer'
                 >
-                  <Github className='h-4 w-4' />
+                  <GitHubIcon className='h-4 w-4' />
                 </ExternalLink>
               </Button>
             </li>
@@ -106,7 +105,7 @@ function Footer() {
                   target='_blank'
                   rel='noopener noreferrer'
                 >
-                  <Instagram className='h-4 w-4' />
+                  <InstagramIcon className='h-4 w-4' />
                 </ExternalLink>
               </Button>
             </li>
@@ -130,7 +129,7 @@ function Footer() {
               <Link href='/'>{t('signIn')}</Link>
             </Button>
             <br />
-            {t('haveYouFoundA')} <Bug className='inline h-4 w-4' />?
+            {t('haveYouFoundA')} <BugIcon className='inline h-4 w-4' />?
             <br />
             {t.rich('utilitiesDescription', {
               code: (children) => (
@@ -142,7 +141,7 @@ function Footer() {
                     href='mailto:[email protected]'
                     aria-label={t('sendAnEmail')}
                   >
-                    <Mail className='inline h-4 w-4' />
+                    <MailIcon className='inline h-4 w-4' />
                   </ExternalLink>
                 </Button>
               ),

src/components/layout/Header.tsx

@@ -1,11 +1,10 @@
-import { useTranslations } from 'next-intl';
-
 import { LogoLink } from '@/components/layout/LogoLink';
 import { MobileSheet } from '@/components/layout/MobileSheet';
 import { Nav } from '@/components/layout/Nav';
 import { DarkModeMenu } from '@/components/settings/DarkModeMenu';
 import { LocaleMenu } from '@/components/settings/LocaleMenu';
 import { ProfileMenu } from '@/components/settings/ProfileMenu';
+import { useTranslations } from 'next-intl';
 
 function Header() {
   const t = useTranslations('layout');

src/components/layout/LogoLink.tsx

@@ -1,10 +1,8 @@
-import { useTranslations } from 'next-intl';
-
-import { Link } from '@/lib/locale/navigation';
-import { cx } from '@/lib/utils';
-
 import { Logo } from '@/components/assets/Logo';
 import { Button } from '@/components/ui/Button';
+import { Link } from '@/lib/locale/navigation';
+import { cx } from '@/lib/utils';
+import { useTranslations } from 'next-intl';
 
 function LogoLink({
   className,

src/components/layout/MobileSheet.tsx

@@ -1,8 +1,5 @@
 'use client';
 
-import { Menu } from 'lucide-react';
-import * as React from 'react';
-
 import { LogoLink } from '@/components/layout/LogoLink';
 import { Nav } from '@/components/layout/Nav';
 import { Button } from '@/components/ui/Button';
@@ -13,6 +10,8 @@ import {
   SheetTitle,
   SheetTrigger,
 } from '@/components/ui/Sheet';
+import { MenuIcon } from 'lucide-react';
+import * as React from 'react';
 
 type MobileSheetProps = {
   className?: string;
@@ -36,7 +35,7 @@ function MobileSheet({ className, t }: MobileSheetProps) {
           size='icon'
           aria-label={t.navigationMenu}
         >
-          <Menu className='h-5 w-5' />
+          <MenuIcon className='h-5 w-5' />
         </Button>
       </SheetTrigger>
       <SheetContent side='left' close={t.close}>

src/components/layout/Nav.tsx

@@ -1,6 +1,5 @@
-import { Link } from '@/lib/locale/navigation';
-
 import { Button } from '@/components/ui/Button';
+import { Link } from '@/lib/locale/navigation';
 
 type NavProps = {
   className?: string;

src/components/layout/PaginationCarousel.tsx

@@ -1,9 +1,5 @@
 'use client';
 
-import { parseAsInteger, useQueryState } from 'nuqs';
-
-import { cx } from '@/lib/utils';
-
 import {
   Pagination,
   PaginationContent,
@@ -13,7 +9,8 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from '@/components/ui/Pagination';
-
+import { cx } from '@/lib/utils';
+import { parseAsInteger, useQueryState } from 'nuqs';
 type PaginationCarouselProps = {
   className?: string;
   totalPages: number;

src/components/layout/PaginationCarouselSkeleton.tsx

@@ -1,5 +1,3 @@
-import { useTranslations } from 'next-intl';
-
 import {
   Pagination,
   PaginationContent,
@@ -8,7 +6,7 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from '@/components/ui/Pagination';
-
+import { useTranslations } from 'next-intl';
 type PaginationCarouselSkeletonProps = {
   className?: string;
 };

src/components/news/ArticleCard.tsx

@@ -1,8 +1,3 @@
-import Image from 'next/image';
-
-import { Link } from '@/lib/locale/navigation';
-import { cx } from '@/lib/utils';
-
 import { InternalBadge } from '@/components/news/InternalBadge';
 import { Button } from '@/components/ui/Button';
 import {
@@ -11,7 +6,9 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/Card';
-
+import { Link } from '@/lib/locale/navigation';
+import { cx } from '@/lib/utils';
+import Image from 'next/image';
 type ArticleCardProps = {
   className?: string;
   id: number;

src/components/news/ArticleItem.tsx

@@ -1,10 +1,8 @@
-import Image from 'next/image';
-
-import { Link } from '@/lib/locale/navigation';
-import { cx } from '@/lib/utils';
-
 import { InternalBadge } from '@/components/news/InternalBadge';
 import { Button } from '@/components/ui/Button';
+import { Link } from '@/lib/locale/navigation';
+import { cx } from '@/lib/utils';
+import Image from 'next/image';
 
 type ArticleItemProps = {
   className?: string;

src/components/news/CardGrid.tsx

@@ -1,7 +1,5 @@
-import { cx } from '@/lib/utils';
-
 import { ArticleCard } from '@/components/news/ArticleCard';
-
+import { cx } from '@/lib/utils';
 type CardGridProps = {
   topArticles: {
     id: number;

src/components/news/CardGridSkeleton.tsx

@@ -1,8 +1,6 @@
-import * as React from 'react';
-
-import { cx } from '@/lib/utils';
-
 import { Skeleton } from '@/components/ui/Skeleton';
+import { cx } from '@/lib/utils';
+import * as React from 'react';
 
 function CardGridSkeleton() {
   return (