Update dependencies and refactor icon imports across the codebase

2025-11-22 20:51:29 +10:00 · 2025-10-01 10:38:50 +02:00
parent c525f8d2cc
commit 6d37769e38
72 changed files with 6496 additions and 5107 deletions
--- a/apps/client/src/pages/builder/sidebars/left/dialogs/custom-section.tsx
+++ b/apps/client/src/pages/builder/sidebars/left/dialogs/custom-section.tsx
@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { t } from "@lingui/macro";
-import { X } from "@phosphor-icons/react";
+import { XIcon } from "@phosphor-icons/react";
 import type { CustomSection } from "@reactive-resume/schema";
 import { customSectionSchema, defaultCustomSection } from "@reactive-resume/schema";
 import {
@ -183,7 +183,7 @@ export const CustomSectionDialog = () => {
                        }}
                      >
                        <span className="mr-1">{item}</span>
-                        <X size={12} weight="bold" />
+                        <XIcon size={12} weight="bold" />
                      </Badge>
                    </motion.div>
                  ))}
--- a/apps/client/src/pages/builder/sidebars/left/dialogs/interests.tsx
+++ b/apps/client/src/pages/builder/sidebars/left/dialogs/interests.tsx
@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { t } from "@lingui/macro";
-import { X } from "@phosphor-icons/react";
+import { XIcon } from "@phosphor-icons/react";
 import { defaultInterest, interestSchema } from "@reactive-resume/schema";
 import {
  Badge,
@ -87,7 +87,7 @@ export const InterestsDialog = () => {
                        }}
                      >
                        <span className="mr-1">{item}</span>
-                        <X size={12} weight="bold" />
+                        <XIcon size={12} weight="bold" />
                      </Badge>
                    </motion.div>
                  ))}
--- a/apps/client/src/pages/builder/sidebars/left/dialogs/projects.tsx
+++ b/apps/client/src/pages/builder/sidebars/left/dialogs/projects.tsx
@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { t } from "@lingui/macro";
-import { X } from "@phosphor-icons/react";
+import { XIcon } from "@phosphor-icons/react";
 import { defaultProject, projectSchema } from "@reactive-resume/schema";
 import {
  Badge,
@ -186,7 +186,7 @@ export const ProjectsDialog = () => {
                    >
                      <Badge className="cursor-move">
                        <span className="mr-1">{item}</span>
-                        <X
+                        <XIcon
                          className="cursor-pointer"
                          size={12}
                          weight="bold"
--- a/apps/client/src/pages/builder/sidebars/left/dialogs/skills.tsx
+++ b/apps/client/src/pages/builder/sidebars/left/dialogs/skills.tsx
@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { t } from "@lingui/macro";
-import { X } from "@phosphor-icons/react";
+import { XIcon } from "@phosphor-icons/react";
 import { defaultSkill, skillSchema } from "@reactive-resume/schema";
 import {
  Badge,
@ -133,7 +133,7 @@ export const SkillsDialog = () => {
                        }}
                      >
                        <span className="mr-1">{item}</span>
-                        <X size={12} weight="bold" />
+                        <XIcon size={12} weight="bold" />
                      </Badge>
                    </motion.div>
                  ))}
--- a/apps/client/src/pages/builder/sidebars/left/index.tsx
+++ b/apps/client/src/pages/builder/sidebars/left/index.tsx
@ -1,5 +1,5 @@
 import { t } from "@lingui/macro";
-import { Plus, PlusCircle } from "@phosphor-icons/react";
+import { PlusCircleIcon, PlusIcon } from "@phosphor-icons/react";
 import type {
  Award,
  Certification,
@ -144,7 +144,7 @@ export const LeftSidebar = () => {
            id="custom"
            variant="outline"
            name={t`Add a new section`}
-            icon={<Plus size={14} />}
+            icon={<PlusIcon size={14} />}
            onClick={() => {
              addSection();
              // eslint-disable-next-line lingui/no-unlocalized-strings
@ -259,7 +259,7 @@ export const LeftSidebar = () => {
          <Separator />

          <Button size="lg" variant="outline" onClick={addSection}>
-            <PlusCircle />
+            <PlusCircleIcon />
            <span className="ml-2">{t`Add a new section`}</span>
          </Button>
        </div>
--- a/apps/client/src/pages/builder/sidebars/left/sections/custom/section.tsx
+++ b/apps/client/src/pages/builder/sidebars/left/sections/custom/section.tsx
@ -1,6 +1,6 @@
 import { t, Trans } from "@lingui/macro";
 import { createId } from "@paralleldrive/cuid2";
-import { DotsSixVertical, Envelope, Plus, X } from "@phosphor-icons/react";
+import { DotsSixVerticalIcon, EnvelopeIcon, PlusIcon, XIcon } from "@phosphor-icons/react";
 import type { CustomField as ICustomField } from "@reactive-resume/schema";
 import {
  Button,
@ -46,14 +46,14 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
            controls.start(event);
          }}
        >
-          <DotsSixVertical />
+          <DotsSixVerticalIcon />
        </Button>

        <Popover>
          <Tooltip content={t`Icon`}>
            <PopoverTrigger asChild>
              <Button size="icon" variant="ghost" className="shrink-0">
-                {field.icon ? <i className={cn(`ph ph-${field.icon}`)} /> : <Envelope />}
+                {field.icon ? <i className={cn(`ph ph-${field.icon}`)} /> : <EnvelopeIcon />}
              </Button>
            </PopoverTrigger>
          </Tooltip>
@ -109,7 +109,7 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
            onRemove(field.id);
          }}
        >
-          <X />
+          <XIcon />
        </Button>
      </div>
    </Reorder.Item>
@ -171,7 +171,7 @@ export const CustomFieldsSection = ({ className }: Props) => {
      </AnimatePresence>

      <Button variant="link" onClick={onAddCustomField}>
-        <Plus className="mr-2" />
+        <PlusIcon className="mr-2" />
        <span>{t`Add a custom field`}</span>
      </Button>
    </div>
--- a/apps/client/src/pages/builder/sidebars/left/sections/picture/section.tsx
+++ b/apps/client/src/pages/builder/sidebars/left/sections/picture/section.tsx
@ -1,5 +1,5 @@
 import { t } from "@lingui/macro";
-import { Aperture, Trash, UploadSimple } from "@phosphor-icons/react";
+import { ApertureIcon, TrashIcon, UploadSimpleIcon } from "@phosphor-icons/react";
 import {
  Avatar,
  AvatarImage,
@ -56,11 +56,11 @@ export const PictureSection = () => {

        {isValidUrl ? (
          <div className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-full bg-background/30 opacity-0 transition-opacity group-hover:opacity-100">
-            <Trash size={16} weight="bold" />
+            <TrashIcon size={16} weight="bold" />
          </div>
        ) : (
          <div className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-full bg-background/30 opacity-0 transition-opacity group-hover:opacity-100">
-            <UploadSimple size={16} weight="bold" />
+            <UploadSimpleIcon size={16} weight="bold" />
          </div>
        )}
      </div>
@ -88,7 +88,7 @@ export const PictureSection = () => {
                  exit={{ opacity: 0 }}
                  className={cn(buttonVariants({ size: "icon", variant: "ghost" }))}
                >
-                  <Aperture />
+                  <ApertureIcon />
                </motion.button>
              </PopoverTrigger>
              <PopoverContent className="w-[360px]">
--- a/apps/client/src/pages/builder/sidebars/left/sections/shared/section-base.tsx
+++ b/apps/client/src/pages/builder/sidebars/left/sections/shared/section-base.tsx
@ -15,7 +15,7 @@ import {
  verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { t } from "@lingui/macro";
-import { Plus } from "@phosphor-icons/react";
+import { PlusIcon } from "@phosphor-icons/react";
 import type { SectionItem, SectionKey, SectionWithItem } from "@reactive-resume/schema";
 import { Button } from "@reactive-resume/ui";
 import { cn } from "@reactive-resume/utils";
@ -114,7 +114,7 @@ export const SectionBase = <T extends SectionItem>({ id, title, description }: P
            className="gap-x-2 border-dashed py-6 leading-relaxed hover:bg-secondary-accent"
            onClick={onCreate}
          >
-            <Plus size={14} />
+            <PlusIcon size={14} />
            <span className="font-medium">
              {t({
                message: "Add a new item",
@ -165,7 +165,7 @@ export const SectionBase = <T extends SectionItem>({ id, title, description }: P
            className="ml-auto gap-x-2 text-xs lg:text-sm"
            onClick={onCreate}
          >
-            <Plus />
+            <PlusIcon />
            <span>
              {t({
                message: "Add a new item",
--- a/apps/client/src/pages/builder/sidebars/left/sections/shared/section-dialog.tsx
+++ b/apps/client/src/pages/builder/sidebars/left/sections/shared/section-dialog.tsx
@ -1,6 +1,6 @@
 import { t } from "@lingui/macro";
 import { createId } from "@paralleldrive/cuid2";
-import { CopySimple, PencilSimple, Plus } from "@phosphor-icons/react";
+import { CopySimpleIcon, PencilSimpleIcon, PlusIcon } from "@phosphor-icons/react";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import type { SectionItem, SectionWithItem } from "@reactive-resume/schema";
 import {
@ -156,9 +156,9 @@ export const SectionDialog = <T extends SectionItem>({
              <DialogHeader>
                <DialogTitle>
                  <div className="flex items-center space-x-2.5">
-                    {isCreate && <Plus />}
-                    {isUpdate && <PencilSimple />}
-                    {isDuplicate && <CopySimple />}
+                    {isCreate && <PlusIcon />}
+                    {isUpdate && <PencilSimpleIcon />}
+                    {isDuplicate && <CopySimpleIcon />}
                    <h2>
                      {isCreate && t`Create a new item`}
                      {isUpdate && t`Update an existing item`}
--- a/apps/client/src/pages/builder/sidebars/left/sections/shared/section-icon.tsx
+++ b/apps/client/src/pages/builder/sidebars/left/sections/shared/section-icon.tsx
@ -1,19 +1,19 @@
 import type { IconProps } from "@phosphor-icons/react";
 import {
-  Article,
-  Books,
-  Briefcase,
-  Certificate,
-  CompassTool,
-  GameController,
-  GraduationCap,
-  HandHeart,
-  Medal,
-  PuzzlePiece,
-  ShareNetwork,
-  Translate,
-  User,
-  Users,
+  ArticleIcon,
+  BooksIcon,
+  BriefcaseIcon,
+  CertificateIcon,
+  CompassToolIcon,
+  GameControllerIcon,
+  GraduationCapIcon,
+  HandHeartIcon,
+  MedalIcon,
+  PuzzlePieceIcon,
+  ShareNetworkIcon,
+  TranslateIcon,
+  UserIcon,
+  UsersIcon,
 } from "@phosphor-icons/react";
 import type { SectionKey, SectionWithItem } from "@reactive-resume/schema";
 import { defaultSection } from "@reactive-resume/schema";
@ -27,46 +27,46 @@ const getSectionIcon = (id: SectionKey, props: IconProps = {}) => {
  switch (id) {
    // Left Sidebar
    case "basics": {
-      return <User size={18} {...props} />;
+      return <UserIcon size={18} {...props} />;
    }
    case "summary": {
-      return <Article size={18} {...props} />;
+      return <ArticleIcon size={18} {...props} />;
    }
    case "awards": {
-      return <Medal size={18} {...props} />;
+      return <MedalIcon size={18} {...props} />;
    }
    case "profiles": {
-      return <ShareNetwork size={18} {...props} />;
+      return <ShareNetworkIcon size={18} {...props} />;
    }
    case "experience": {
-      return <Briefcase size={18} {...props} />;
+      return <BriefcaseIcon size={18} {...props} />;
    }
    case "education": {
-      return <GraduationCap size={18} {...props} />;
+      return <GraduationCapIcon size={18} {...props} />;
    }
    case "certifications": {
-      return <Certificate size={18} {...props} />;
+      return <CertificateIcon size={18} {...props} />;
    }
    case "interests": {
-      return <GameController size={18} {...props} />;
+      return <GameControllerIcon size={18} {...props} />;
    }
    case "languages": {
-      return <Translate size={18} {...props} />;
+      return <TranslateIcon size={18} {...props} />;
    }
    case "volunteer": {
-      return <HandHeart size={18} {...props} />;
+      return <HandHeartIcon size={18} {...props} />;
    }
    case "projects": {
-      return <PuzzlePiece size={18} {...props} />;
+      return <PuzzlePieceIcon size={18} {...props} />;
    }
    case "publications": {
-      return <Books size={18} {...props} />;
+      return <BooksIcon size={18} {...props} />;
    }
    case "skills": {
-      return <CompassTool size={18} {...props} />;
+      return <CompassToolIcon size={18} {...props} />;
    }
    case "references": {
-      return <Users size={18} {...props} />;
+      return <UsersIcon size={18} {...props} />;
    }

    default: {
--- a/apps/client/src/pages/builder/sidebars/left/sections/shared/section-list-item.tsx
+++ b/apps/client/src/pages/builder/sidebars/left/sections/shared/section-list-item.tsx
@ -1,7 +1,12 @@
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { t } from "@lingui/macro";
-import { CopySimple, DotsSixVertical, PencilSimple, TrashSimple } from "@phosphor-icons/react";
+import {
+  CopySimpleIcon,
+  DotsSixVerticalIcon,
+  PencilSimpleIcon,
+  TrashSimpleIcon,
+} from "@phosphor-icons/react";
 import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
@ -65,7 +70,7 @@ export const SectionListItem = ({
            !isDragging && "hover:bg-secondary",
          )}
        >
-          <DotsSixVertical weight="bold" size={12} />
+          <DotsSixVerticalIcon weight="bold" size={12} />
        </div>

        {/* List Item */}
@ -88,15 +93,15 @@ export const SectionListItem = ({
            </DropdownMenuCheckboxItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem onClick={onUpdate}>
-              <PencilSimple size={14} />
+              <PencilSimpleIcon size={14} />
              <span className="ml-2">{t`Edit`}</span>
            </DropdownMenuItem>
            <DropdownMenuItem onClick={onDuplicate}>
-              <CopySimple size={14} />
+              <CopySimpleIcon size={14} />
              <span className="ml-2">{t`Copy`}</span>
            </DropdownMenuItem>
            <DropdownMenuItem className="text-error" onClick={onDelete}>
-              <TrashSimple size={14} />
+              <TrashSimpleIcon size={14} />
              <span className="ml-2">{t`Remove`}</span>
            </DropdownMenuItem>
          </DropdownMenuContent>
--- a/apps/client/src/pages/builder/sidebars/left/sections/shared/section-options.tsx
+++ b/apps/client/src/pages/builder/sidebars/left/sections/shared/section-options.tsx
@ -1,14 +1,14 @@
 import { plural, t } from "@lingui/macro";
 import {
-  ArrowCounterClockwise,
-  Broom,
-  Columns,
-  Eye,
-  EyeSlash,
-  List,
-  PencilSimple,
-  Plus,
-  TrashSimple,
+  ArrowCounterClockwiseIcon,
+  BroomIcon,
+  ColumnsIcon,
+  EyeIcon,
+  EyeSlashIcon,
+  ListIcon,
+  PencilSimpleIcon,
+  PlusIcon,
+  TrashSimpleIcon,
 } from "@phosphor-icons/react";
 import type { SectionKey, SectionWithItem } from "@reactive-resume/schema";
 import { defaultSections } from "@reactive-resume/schema";
@ -80,14 +80,14 @@ export const SectionOptions = ({ id }: Props) => {
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon">
-          <List weight="bold" />
+          <ListIcon weight="bold" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="mr-4 w-48">
        {hasItems && (
          <>
            <DropdownMenuItem onClick={onCreate}>
-              <Plus />
+              <PlusIcon />
              <span className="ml-2">{t`Add a new item`}</span>
            </DropdownMenuItem>
            <DropdownMenuCheckboxItem
@ -102,12 +102,12 @@ export const SectionOptions = ({ id }: Props) => {

        <DropdownMenuGroup>
          <DropdownMenuItem onClick={toggleVisibility}>
-            {section.visible ? <Eye /> : <EyeSlash />}
+            {section.visible ? <EyeIcon /> : <EyeSlashIcon />}
            <span className="ml-2">{section.visible ? t`Hide` : t`Show`}</span>
          </DropdownMenuItem>
          <DropdownMenuSub>
            <DropdownMenuSubTrigger>
-              <PencilSimple />
+              <PencilSimpleIcon />
              <span className="ml-2">{t`Rename`}</span>
            </DropdownMenuSubTrigger>
            <DropdownMenuSubContent>
@ -125,14 +125,14 @@ export const SectionOptions = ({ id }: Props) => {
                  className="absolute inset-y-0 right-0"
                  onClick={onResetName}
                >
-                  <ArrowCounterClockwise />
+                  <ArrowCounterClockwiseIcon />
                </Button>
              </div>
            </DropdownMenuSubContent>
          </DropdownMenuSub>
          <DropdownMenuSub>
            <DropdownMenuSubTrigger>
-              <Columns />
+              <ColumnsIcon />
              <span className="ml-2">{t`Columns`}</span>
            </DropdownMenuSubTrigger>
            <DropdownMenuSubContent>
@ -148,12 +148,12 @@ export const SectionOptions = ({ id }: Props) => {
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem disabled={!hasItems} onClick={onResetItems}>
-          <Broom />
+          <BroomIcon />
          <span className="ml-2">{t`Reset`}</span>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem className="text-error" disabled={!isCustomSection} onClick={onRemove}>
-          <TrashSimple />
+          <TrashSimpleIcon />
          <span className="ml-2">{t`Remove`}</span>
        </DropdownMenuItem>
      </DropdownMenuContent>
--- a/apps/client/src/pages/builder/sidebars/left/sections/shared/url-input.tsx
+++ b/apps/client/src/pages/builder/sidebars/left/sections/shared/url-input.tsx
@ -1,5 +1,5 @@
 import { t } from "@lingui/macro";
-import { Tag } from "@phosphor-icons/react";
+import { TagIcon } from "@phosphor-icons/react";
 import type { URL } from "@reactive-resume/schema";
 import { urlSchema } from "@reactive-resume/schema";
 import {
@ -42,7 +42,7 @@ export const URLInput = forwardRef<HTMLInputElement, Props>(
            <Tooltip content={t`Label`}>
              <PopoverTrigger asChild>
                <Button size="icon" variant="ghost">
-                  <Tag />
+                  <TagIcon />
                </Button>
              </PopoverTrigger>
            </Tooltip>
--- a/apps/client/src/pages/builder/sidebars/right/sections/export.tsx
+++ b/apps/client/src/pages/builder/sidebars/right/sections/export.tsx
@ -1,5 +1,5 @@
 import { t } from "@lingui/macro";
-import { CircleNotch, FileJs, FilePdf } from "@phosphor-icons/react";
+import { CircleNotchIcon, FileJsIcon, FilePdfIcon } from "@phosphor-icons/react";
 import { buttonVariants, Card, CardContent, CardDescription, CardTitle } from "@reactive-resume/ui";
 import { cn } from "@reactive-resume/utils";
 import { saveAs } from "file-saver";
@ -49,7 +49,7 @@ export const ExportSection = () => {
          )}
          onClick={onJsonExport}
        >
-          <FileJs size={22} />
+          <FileJsIcon size={22} />
          <CardContent className="flex-1">
            <CardTitle className="text-sm">{t`JSON`}</CardTitle>
            <CardDescription className="font-normal">
@ -66,7 +66,11 @@ export const ExportSection = () => {
          )}
          onClick={onPdfExport}
        >
-          {loading ? <CircleNotch size={22} className="animate-spin" /> : <FilePdf size={22} />}
+          {loading ? (
+            <CircleNotchIcon size={22} className="animate-spin" />
+          ) : (
+            <FilePdfIcon size={22} />
+          )}

          <CardContent className="flex-1">
            <CardTitle className="text-sm">{t`PDF`}</CardTitle>
--- a/apps/client/src/pages/builder/sidebars/right/sections/information.tsx
+++ b/apps/client/src/pages/builder/sidebars/right/sections/information.tsx
@ -1,5 +1,10 @@
 import { t, Trans } from "@lingui/macro";
-import { Book, EnvelopeSimpleOpen, GithubLogo, HandHeart } from "@phosphor-icons/react";
+import {
+  BookIcon,
+  EnvelopeSimpleOpenIcon,
+  GithubLogoIcon,
+  HandHeartIcon,
+} from "@phosphor-icons/react";
 import {
  buttonVariants,
  Card,
@ -36,7 +41,7 @@ const DonateCard = () => (
        rel="noopener noreferrer nofollow"
        target="_blank"
      >
-        <HandHeart size={14} weight="bold" className="mr-2" />
+        <HandHeartIcon size={14} weight="bold" className="mr-2" />
        <span className="line-clamp-1">{t`Donate to Reactive Resume`}</span>
      </a>
    </CardFooter>
@ -65,12 +70,12 @@ const IssuesCard = () => (
        rel="noopener noreferrer nofollow"
        target="_blank"
      >
-        <GithubLogo size={14} weight="bold" className="mr-2" />
+        <GithubLogoIcon size={14} weight="bold" className="mr-2" />
        <span className="line-clamp-1">{t`Raise an issue`}</span>
      </a>

      <a className={cn(buttonVariants({ size: "sm" }))} href="mailto:hello@amruthpillai.com">
-        <EnvelopeSimpleOpen size={14} weight="bold" className="mr-2" />
+        <EnvelopeSimpleOpenIcon size={14} weight="bold" className="mr-2" />
        <span className="line-clamp-1">{t`Send me a message`}</span>
      </a>
    </CardFooter>
@ -101,7 +106,7 @@ const DocumentationCard = () => (
        target="_blank"
        rel="noopener noreferrer nofollow"
      >
-        <Book size={14} weight="bold" className="mr-2" />
+        <BookIcon size={14} weight="bold" className="mr-2" />
        <span className="line-clamp-1">{t`Documentation`}</span>
      </a>
    </CardFooter>
--- a/apps/client/src/pages/builder/sidebars/right/sections/layout.tsx
+++ b/apps/client/src/pages/builder/sidebars/right/sections/layout.tsx
@ -17,7 +17,12 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { t } from "@lingui/macro";
-import { ArrowCounterClockwise, DotsSixVertical, Plus, TrashSimple } from "@phosphor-icons/react";
+import {
+  ArrowCounterClockwiseIcon,
+  DotsSixVerticalIcon,
+  PlusIcon,
+  TrashSimpleIcon,
+} from "@phosphor-icons/react";
 import { defaultMetadata } from "@reactive-resume/schema";
 import { Button, Portal, Tooltip } from "@reactive-resume/ui";
 import type { LayoutLocator, SortablePayload } from "@reactive-resume/utils";
@ -95,7 +100,7 @@ const Section = ({ id, isDragging = false }: SectionProps) => {
      )}
    >
      <div className="flex items-center gap-x-2">
-        <DotsSixVertical size={12} weight="bold" />
+        <DotsSixVerticalIcon size={12} weight="bold" />
        <p className="flex-1 truncate text-xs font-medium">{name}</p>
      </div>
    </div>
@ -200,7 +205,7 @@ export const LayoutSection = () => {

        <Tooltip content={t`Reset Layout`}>
          <Button size="icon" variant="ghost" onClick={onResetLayout}>
-            <ArrowCounterClockwise />
+            <ArrowCounterClockwiseIcon />
          </Button>
        </Tooltip>
      </header>
@ -237,7 +242,7 @@ export const LayoutSection = () => {
                          onRemovePage(pageIndex);
                        }}
                      >
-                        <TrashSimple size={12} className="text-error" />
+                        <TrashSimpleIcon size={12} className="text-error" />
                      </Button>
                    </Tooltip>
                  )}
@ -257,7 +262,7 @@ export const LayoutSection = () => {
        </DndContext>

        <Button variant="outline" className="ml-auto" onClick={onAddPage}>
-          <Plus />
+          <PlusIcon />
          <span className="ml-2 text-xs lg:text-sm">{t`Add New Page`}</span>
        </Button>
      </main>
--- a/apps/client/src/pages/builder/sidebars/right/sections/sharing.tsx
+++ b/apps/client/src/pages/builder/sidebars/right/sections/sharing.tsx
@ -1,5 +1,5 @@
 import { t } from "@lingui/macro";
-import { CopySimple } from "@phosphor-icons/react";
+import { CopySimpleIcon } from "@phosphor-icons/react";
 import { Button, Input, Label, Switch, Tooltip } from "@reactive-resume/ui";
 import { AnimatePresence, motion } from "framer-motion";

@ -77,7 +77,7 @@ export const SharingSection = () => {

                <Tooltip content={t`Copy to Clipboard`}>
                  <Button size="icon" variant="ghost" onClick={onCopy}>
-                    <CopySimple />
+                    <CopySimpleIcon />
                  </Button>
                </Tooltip>
              </div>
--- a/apps/client/src/pages/builder/sidebars/right/sections/statistics.tsx
+++ b/apps/client/src/pages/builder/sidebars/right/sections/statistics.tsx
@ -1,5 +1,5 @@
 import { t } from "@lingui/macro";
-import { Info } from "@phosphor-icons/react";
+import { InfoIcon } from "@phosphor-icons/react";
 import { Alert, AlertDescription, AlertTitle } from "@reactive-resume/ui";
 import { cn } from "@reactive-resume/utils";
 import { AnimatePresence, motion } from "framer-motion";
@ -34,7 +34,7 @@ export const StatisticsSection = () => {
              exit={{ opacity: 0, y: -50, filter: "blur(10px)" }}
            >
              <Alert variant="info">
-                <Info size={18} />
+                <InfoIcon size={18} />
                <AlertTitle>{t`Statistics are available only for public resumes.`}</AlertTitle>
                <AlertDescription className="text-xs leading-relaxed">
                  {t`You can track the number of views your resume has received, or how many people have downloaded the resume by enabling public sharing.`}
--- a/apps/client/src/pages/builder/sidebars/right/shared/section-icon.tsx
+++ b/apps/client/src/pages/builder/sidebars/right/shared/section-icon.tsx
@ -1,17 +1,17 @@
 import type { IconProps } from "@phosphor-icons/react";
 import {
-  Code,
-  DiamondsFour,
-  DownloadSimple,
-  Info,
-  Layout,
-  Note,
-  Palette,
-  ReadCvLogo,
-  ShareFat,
-  TextT,
-  Translate,
-  TrendUp,
+  CodeIcon,
+  DiamondsFourIcon,
+  DownloadSimpleIcon,
+  InfoIcon,
+  LayoutIcon,
+  NoteIcon,
+  PaletteIcon,
+  ReadCvLogoIcon,
+  ShareFatIcon,
+  TextTIcon,
+  TranslateIcon,
+  TrendUpIcon,
 } from "@phosphor-icons/react";
 import type { ButtonProps } from "@reactive-resume/ui";
 import { Button, Tooltip } from "@reactive-resume/ui";
@ -34,40 +34,40 @@ const getSectionIcon = (id: MetadataKey, props: IconProps = {}) => {
  switch (id) {
    // Left Sidebar
    case "notes": {
-      return <Note size={18} {...props} />;
+      return <NoteIcon size={18} {...props} />;
    }
    case "template": {
-      return <DiamondsFour size={18} {...props} />;
+      return <DiamondsFourIcon size={18} {...props} />;
    }
    case "layout": {
-      return <Layout size={18} {...props} />;
+      return <LayoutIcon size={18} {...props} />;
    }
    case "typography": {
-      return <TextT size={18} {...props} />;
+      return <TextTIcon size={18} {...props} />;
    }
    case "theme": {
-      return <Palette size={18} {...props} />;
+      return <PaletteIcon size={18} {...props} />;
    }
    case "css": {
-      return <Code size={18} {...props} />;
+      return <CodeIcon size={18} {...props} />;
    }
    case "page": {
-      return <ReadCvLogo size={18} {...props} />;
+      return <ReadCvLogoIcon size={18} {...props} />;
    }
    case "locale": {
-      return <Translate size={18} {...props} />;
+      return <TranslateIcon size={18} {...props} />;
    }
    case "sharing": {
-      return <ShareFat size={18} {...props} />;
+      return <ShareFatIcon size={18} {...props} />;
    }
    case "statistics": {
-      return <TrendUp size={18} {...props} />;
+      return <TrendUpIcon size={18} {...props} />;
    }
    case "export": {
-      return <DownloadSimple size={18} {...props} />;
+      return <DownloadSimpleIcon size={18} {...props} />;
    }
    case "information": {
-      return <Info size={18} {...props} />;
+      return <InfoIcon size={18} {...props} />;
    }

    default: {