byGalax/ChatApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(P6A.T4): wrap all icon components in React.memo

Browse Source 
All 57 exported SVG icon components in icons.tsx are now memoised via
React.memo, giving React permission to skip re-renders when props are
referentially equal.  Consumer icon-prop types updated from the legacy
SVGProps (includes string refs) to ComponentPropsWithoutRef<'svg'> so
the MemoExoticComponent return type satisfies TypeScript without casts.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
byGalax
2026-05-16 23:39:47 +02:00
parent ddd696a790
commit 36ab7eca8a
3 changed files with 126 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/desktop/src/components/ConversationHeader.tsx
+1 -1
View File
@@ -197,7 +197,7 @@ function HeaderBar({
interface HeaderActionButtonProps {
label: string;
icon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
icon: React.ComponentType<React.ComponentPropsWithoutRef<'svg'>>;
onClick?: () => void;
disabled?: boolean;
tone?: 'default' | 'accent';
apps/desktop/src/components/Sidebar.tsx
+3 -3
View File
@@ -17,7 +17,7 @@ import {
interface NavItem {
to: string;
labelKey: string;
icon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
icon: React.ComponentType<React.ComponentPropsWithoutRef<'svg'>>;
badge?: 'friends' | 'chats';
}
@@ -95,7 +95,7 @@ export function Sidebar() {
interface RailNavLinkProps {
to: string;
label: string;
icon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
icon: React.ComponentType<React.ComponentPropsWithoutRef<'svg'>>;
badge?: number;
}
@@ -135,7 +135,7 @@ function RailNavLink({ to, label, icon: Icon, badge = 0 }: RailNavLinkProps) {
interface RailIconButtonProps {
label: string;
onClick: () => void;
icon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
icon: React.ComponentType<React.ComponentPropsWithoutRef<'svg'>>;
tone?: 'default' | 'danger';
}
apps/desktop/src/components/icons.tsx
+122 -61
View File
@@ -1,6 +1,7 @@
// Inline SVG icons — no icon library dependency. Lucide-style stroke=1.75.
import { memo } from 'react';
type IconProps = React.SVGProps<SVGSVGElement>;
type IconProps = React.ComponentPropsWithoutRef<'svg'>;
function Base({ children, ...props }: IconProps & { children: React.ReactNode }) {
return (
@@ -20,7 +21,7 @@ function Base({ children, ...props }: IconProps & { children: React.ReactNode })
);
}
export function MailIcon(props: IconProps) {
function MailIconInner(props: IconProps) {
return (
<Base {...props}>
<rect x="3" y="5" width="18" height="14" rx="2" />
@@ -28,8 +29,9 @@ export function MailIcon(props: IconProps) {
</Base>
);
}
export const MailIcon = memo(MailIconInner);
export function AtIcon(props: IconProps) {
function AtIconInner(props: IconProps) {
return (
<Base {...props}>
<circle cx="12" cy="12" r="4" />
@@ -37,8 +39,9 @@ export function AtIcon(props: IconProps) {
</Base>
);
}
export const AtIcon = memo(AtIconInner);
export function TicketIcon(props: IconProps) {
function TicketIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M3 8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2a2 2 0 1 0 0 4v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2a2 2 0 1 0 0-4V8Z" />
@@ -46,8 +49,9 @@ export function TicketIcon(props: IconProps) {
</Base>
);
}
export const TicketIcon = memo(TicketIconInner);
export function ArrowRightIcon(props: IconProps) {
function ArrowRightIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M5 12h14" />
@@ -55,8 +59,9 @@ export function ArrowRightIcon(props: IconProps) {
</Base>
);
}
export const ArrowRightIcon = memo(ArrowRightIconInner);
export function CheckCircleIcon(props: IconProps) {
function CheckCircleIconInner(props: IconProps) {
return (
<Base {...props}>
<circle cx="12" cy="12" r="9" />
@@ -64,8 +69,9 @@ export function CheckCircleIcon(props: IconProps) {
</Base>
);
}
export const CheckCircleIcon = memo(CheckCircleIconInner);
export function AlertIcon(props: IconProps) {
function AlertIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M12 9v4" />
@@ -74,8 +80,9 @@ export function AlertIcon(props: IconProps) {
</Base>
);
}
export const AlertIcon = memo(AlertIconInner);
export function ShieldIcon(props: IconProps) {
function ShieldIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M12 3 4 6v6c0 5 3.5 8.5 8 9 4.5-.5 8-4 8-9V6l-8-3Z" />
@@ -83,8 +90,9 @@ export function ShieldIcon(props: IconProps) {
</Base>
);
}
export const ShieldIcon = memo(ShieldIconInner);
export function LockIcon(props: IconProps) {
function LockIconInner(props: IconProps) {
return (
<Base {...props}>
<rect x="4" y="11" width="16" height="10" rx="2" />
@@ -92,8 +100,9 @@ export function LockIcon(props: IconProps) {
</Base>
);
}
export const LockIcon = memo(LockIconInner);
export function WifiLowIcon(props: IconProps) {
function WifiLowIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M5 12.55a11 11 0 0 1 14 0" opacity="0.35" />
@@ -102,8 +111,9 @@ export function WifiLowIcon(props: IconProps) {
</Base>
);
}
export const WifiLowIcon = memo(WifiLowIconInner);
export function WifiOffIcon(props: IconProps) {
function WifiOffIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="m2 2 20 20" />
@@ -116,8 +126,9 @@ export function WifiOffIcon(props: IconProps) {
</Base>
);
}
export const WifiOffIcon = memo(WifiOffIconInner);
export function PinIcon(props: IconProps) {
function PinIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M12 17v5" />
@@ -125,8 +136,9 @@ export function PinIcon(props: IconProps) {
</Base>
);
}
export const PinIcon = memo(PinIconInner);
export function EyeOffIcon(props: IconProps) {
function EyeOffIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="m2 2 20 20" />
@@ -136,8 +148,9 @@ export function EyeOffIcon(props: IconProps) {
</Base>
);
}
export const EyeOffIcon = memo(EyeOffIconInner);
export function CaptionsIcon(props: IconProps) {
function CaptionsIconInner(props: IconProps) {
return (
<Base {...props}>
<rect x="3" y="6" width="18" height="12" rx="2" />
@@ -146,8 +159,9 @@ export function CaptionsIcon(props: IconProps) {
</Base>
);
}
export const CaptionsIcon = memo(CaptionsIconInner);
export function PinOffIcon(props: IconProps) {
function PinOffIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="m2 2 20 20" />
@@ -157,8 +171,9 @@ export function PinOffIcon(props: IconProps) {
</Base>
);
}
export const PinOffIcon = memo(PinOffIconInner);
export function SparklesIcon(props: IconProps) {
function SparklesIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M12 3v4" />
@@ -172,8 +187,9 @@ export function SparklesIcon(props: IconProps) {
</Base>
);
}
export const SparklesIcon = memo(SparklesIconInner);
export function SpinnerIcon(props: IconProps) {
function SpinnerIconInner(props: IconProps) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -208,16 +224,18 @@ export function SpinnerIcon(props: IconProps) {
</svg>
);
}
export const SpinnerIcon = memo(SpinnerIconInner);
export function ChatBubbleIcon(props: IconProps) {
function ChatBubbleIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M21 15a2 2 0 0 1-2 2H8l-5 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z" />
</Base>
);
}
export const ChatBubbleIcon = memo(ChatBubbleIconInner);
export function UsersIcon(props: IconProps) {
function UsersIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
@@ -227,8 +245,9 @@ export function UsersIcon(props: IconProps) {
</Base>
);
}
export const UsersIcon = memo(UsersIconInner);
export function GearIcon(props: IconProps) {
function GearIconInner(props: IconProps) {
return (
<Base {...props}>
<circle cx="12" cy="12" r="3" />
@@ -236,8 +255,9 @@ export function GearIcon(props: IconProps) {
</Base>
);
}
export const GearIcon = memo(GearIconInner);
export function SearchIcon(props: IconProps) {
function SearchIconInner(props: IconProps) {
return (
<Base {...props}>
<circle cx="11" cy="11" r="7" />
@@ -245,16 +265,18 @@ export function SearchIcon(props: IconProps) {
</Base>
);
}
export const SearchIcon = memo(SearchIconInner);
export function PlusIcon(props: IconProps) {
function PlusIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M12 5v14M5 12h14" />
</Base>
);
}
export const PlusIcon = memo(PlusIconInner);
export function SignOutIcon(props: IconProps) {
function SignOutIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
@@ -263,32 +285,36 @@ export function SignOutIcon(props: IconProps) {
</Base>
);
}
export const SignOutIcon = memo(SignOutIconInner);
export function MenuIcon(props: IconProps) {
function MenuIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M3 6h18M3 12h18M3 18h18" />
</Base>
);
}
export const MenuIcon = memo(MenuIconInner);
export function ChevronDownIcon(props: IconProps) {
function ChevronDownIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="m6 9 6 6 6-6" />
</Base>
);
}
export const ChevronDownIcon = memo(ChevronDownIconInner);
export function PencilIcon(props: IconProps) {
function PencilIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
</Base>
);
}
export const PencilIcon = memo(PencilIconInner);
export function TrashIcon(props: IconProps) {
function TrashIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M3 6h18" />
@@ -299,8 +325,9 @@ export function TrashIcon(props: IconProps) {
</Base>
);
}
export const TrashIcon = memo(TrashIconInner);
export function SmileIcon(props: IconProps) {
function SmileIconInner(props: IconProps) {
return (
<Base {...props}>
<circle cx="12" cy="12" r="9" />
@@ -310,8 +337,9 @@ export function SmileIcon(props: IconProps) {
</Base>
);
}
export const SmileIcon = memo(SmileIconInner);
export function CopyIcon(props: IconProps) {
function CopyIconInner(props: IconProps) {
return (
<Base {...props}>
<rect x="9" y="9" width="13" height="13" rx="2" />
@@ -319,16 +347,18 @@ export function CopyIcon(props: IconProps) {
</Base>
);
}
export const CopyIcon = memo(CopyIconInner);
export function PhoneIcon(props: IconProps) {
function PhoneIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92Z" />
</Base>
);
}
export const PhoneIcon = memo(PhoneIconInner);
export function PhoneOffIcon(props: IconProps) {
function PhoneOffIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-3.48-3.05" />
@@ -337,8 +367,9 @@ export function PhoneOffIcon(props: IconProps) {
</Base>
);
}
export const PhoneOffIcon = memo(PhoneOffIconInner);
export function MicIcon(props: IconProps) {
function MicIconInner(props: IconProps) {
return (
<Base {...props}>
<rect x="9" y="2" width="6" height="12" rx="3" />
@@ -348,8 +379,9 @@ export function MicIcon(props: IconProps) {
</Base>
);
}
export const MicIcon = memo(MicIconInner);
export function MicOffIcon(props: IconProps) {
function MicOffIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M1 1l22 22" />
@@ -362,8 +394,9 @@ export function MicOffIcon(props: IconProps) {
</Base>
);
}
export const MicOffIcon = memo(MicOffIconInner);
export function InfoIcon(props: IconProps) {
function InfoIconInner(props: IconProps) {
return (
<Base {...props}>
<circle cx="12" cy="12" r="9" />
@@ -372,16 +405,18 @@ export function InfoIcon(props: IconProps) {
</Base>
);
}
export const InfoIcon = memo(InfoIconInner);
export function XIcon(props: IconProps) {
function XIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M18 6 6 18M6 6l12 12" />
</Base>
);
}
export const XIcon = memo(XIconInner);
export function MonitorShareIcon(props: IconProps) {
function MonitorShareIconInner(props: IconProps) {
return (
<Base {...props}>
<rect x="3" y="4" width="18" height="12" rx="2" />
@@ -390,8 +425,9 @@ export function MonitorShareIcon(props: IconProps) {
</Base>
);
}
export const MonitorShareIcon = memo(MonitorShareIconInner);
export function MonitorStopIcon(props: IconProps) {
function MonitorStopIconInner(props: IconProps) {
return (
<Base {...props}>
<rect x="3" y="4" width="18" height="12" rx="2" />
@@ -400,8 +436,9 @@ export function MonitorStopIcon(props: IconProps) {
</Base>
);
}
export const MonitorStopIcon = memo(MonitorStopIconInner);
export function SunIcon(props: IconProps) {
function SunIconInner(props: IconProps) {
return (
<Base {...props}>
<circle cx="12" cy="12" r="4" />
@@ -409,16 +446,18 @@ export function SunIcon(props: IconProps) {
</Base>
);
}
export const SunIcon = memo(SunIconInner);
export function MoonIcon(props: IconProps) {
function MoonIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79Z" />
</Base>
);
}
export const MoonIcon = memo(MoonIconInner);
export function GridIcon(props: IconProps) {
function GridIconInner(props: IconProps) {
return (
<Base {...props}>
<rect x="3" y="3" width="7" height="7" rx="1.5" />
@@ -428,8 +467,9 @@ export function GridIcon(props: IconProps) {
</Base>
);
}
export const GridIcon = memo(GridIconInner);
export function ImageIcon(props: IconProps) {
function ImageIconInner(props: IconProps) {
return (
<Base {...props}>
<rect x="3" y="5" width="18" height="14" rx="2" />
@@ -438,8 +478,9 @@ export function ImageIcon(props: IconProps) {
</Base>
);
}
export const ImageIcon = memo(ImageIconInner);
export function FileIcon(props: IconProps) {
function FileIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7Z" />
@@ -447,8 +488,9 @@ export function FileIcon(props: IconProps) {
</Base>
);
}
export const FileIcon = memo(FileIconInner);
export function PollIcon(props: IconProps) {
function PollIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M5 19V9" />
@@ -458,8 +500,9 @@ export function PollIcon(props: IconProps) {
</Base>
);
}
export const PollIcon = memo(PollIconInner);
export function FocusIcon(props: IconProps) {
function FocusIconInner(props: IconProps) {
return (
<Base {...props}>
<rect x="3" y="3" width="18" height="18" rx="2" />
@@ -467,8 +510,9 @@ export function FocusIcon(props: IconProps) {
</Base>
);
}
export const FocusIcon = memo(FocusIconInner);
export function MaximizeIcon(props: IconProps) {
function MaximizeIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M4 9V5a1 1 0 0 1 1-1h4" />
@@ -478,8 +522,9 @@ export function MaximizeIcon(props: IconProps) {
</Base>
);
}
export const MaximizeIcon = memo(MaximizeIconInner);
export function VideoIcon(props: IconProps) {
function VideoIconInner(props: IconProps) {
return (
<Base {...props}>
<rect x="2" y="6" width="15" height="12" rx="2" />
@@ -487,16 +532,18 @@ export function VideoIcon(props: IconProps) {
</Base>
);
}
export const VideoIcon = memo(VideoIconInner);
export function CrownIcon(props: IconProps) {
function CrownIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="m3 7 4 4 5-6 5 6 4-4v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z" />
</Base>
);
}
export const CrownIcon = memo(CrownIconInner);
export function MusicIcon(props: IconProps) {
function MusicIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M9 18V5l12-2v13" />
@@ -505,16 +552,18 @@ export function MusicIcon(props: IconProps) {
</Base>
);
}
export const MusicIcon = memo(MusicIconInner);
export function SendIcon(props: IconProps) {
function SendIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="m3 11 18-8-8 18-2-8-8-2Z" />
</Base>
);
}
export const SendIcon = memo(SendIconInner);
export function ArchiveIcon(props: IconProps) {
function ArchiveIconInner(props: IconProps) {
return (
<Base {...props}>
<rect x="3" y="4" width="18" height="5" rx="1" />
@@ -523,8 +572,9 @@ export function ArchiveIcon(props: IconProps) {
</Base>
);
}
export const ArchiveIcon = memo(ArchiveIconInner);
export function BellIcon(props: IconProps) {
function BellIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M6 8a6 6 0 1 1 12 0c0 4 1.5 5 2 6H4c.5-1 2-2 2-6Z" />
@@ -532,8 +582,9 @@ export function BellIcon(props: IconProps) {
</Base>
);
}
export const BellIcon = memo(BellIconInner);
export function BellOffIcon(props: IconProps) {
function BellOffIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M9.5 18a2.5 2.5 0 0 0 5 0" />
@@ -545,8 +596,9 @@ export function BellOffIcon(props: IconProps) {
</Base>
);
}
export const BellOffIcon = memo(BellOffIconInner);
export function MoreVerticalIcon(props: IconProps) {
function MoreVerticalIconInner(props: IconProps) {
return (
<Base {...props}>
<circle cx="12" cy="5" r="1.5" />
@@ -555,8 +607,9 @@ export function MoreVerticalIcon(props: IconProps) {
</Base>
);
}
export const MoreVerticalIcon = memo(MoreVerticalIconInner);
export function HeadphonesIcon(props: IconProps) {
function HeadphonesIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M3 14v-2a9 9 0 0 1 18 0v2" />
@@ -565,8 +618,9 @@ export function HeadphonesIcon(props: IconProps) {
</Base>
);
}
export const HeadphonesIcon = memo(HeadphonesIconInner);
export function HeadphonesOffIcon(props: IconProps) {
function HeadphonesOffIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M3 14v-2a9 9 0 0 1 11.3-8.7" />
@@ -577,8 +631,9 @@ export function HeadphonesOffIcon(props: IconProps) {
</Base>
);
}
export const HeadphonesOffIcon = memo(HeadphonesOffIconInner);
export function ReplyIcon(props: IconProps) {
function ReplyIconInner(props: IconProps) {
return (
<Base {...props}>
<polyline points="9 17 4 12 9 7" />
@@ -586,8 +641,9 @@ export function ReplyIcon(props: IconProps) {
</Base>
);
}
export const ReplyIcon = memo(ReplyIconInner);
export function ForwardIcon(props: IconProps) {
function ForwardIconInner(props: IconProps) {
return (
<Base {...props}>
<polyline points="15 17 20 12 15 7" />
@@ -595,16 +651,18 @@ export function ForwardIcon(props: IconProps) {
</Base>
);
}
export const ForwardIcon = memo(ForwardIconInner);
export function ChevronUpIcon(props: IconProps) {
function ChevronUpIconInner(props: IconProps) {
return (
<Base {...props}>
<polyline points="18 15 12 9 6 15" />
</Base>
);
}
export const ChevronUpIcon = memo(ChevronUpIconInner);
export function AddUserIcon(props: IconProps) {
function AddUserIconInner(props: IconProps) {
return (
<Base {...props}>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
@@ -613,12 +671,13 @@ export function AddUserIcon(props: IconProps) {
</Base>
);
}
export const AddUserIcon = memo(AddUserIconInner);
// Soft-N mark: rounded-square violet tile with a stylised "N" glyph. Used
// wherever the app needs a standalone icon (sidebar rail, auth screen,
// favicon). Colour decisions sit inside the SVG so consumers just size the
// element via `className`.
export function LogoMark(props: IconProps) {
function LogoMarkInner(props: IconProps) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -638,10 +697,11 @@ export function LogoMark(props: IconProps) {
</svg>
);
}
export const LogoMark = memo(LogoMarkInner);
// Full lockup: soft-N mark + "Netralax" wordmark. `tone` decides text colour:
// "dark" = white text (use on dark background), "light" = near-black.
export function LogoLockup({
function LogoLockupInner({
tone = 'dark',
...props
}: IconProps & { tone?: 'dark' | 'light' }) {
@@ -676,3 +736,4 @@ export function LogoLockup({
</svg>
);
}
export const LogoLockup = memo(LogoLockupInner);