Files
bedolaga-cabinet/src/components/icons/editor-icons.tsx
c0mrade d0e0b6b7e3 feat(cabinet): migrate all icons to the panel's Phosphor set
Replace the cabinet's hand-written heroicons-style SVG icon components with
the Remnawave panel's own icon family — Phosphor via react-icons/pi (Duotone).
All icons now live in a single central barrel (src/components/icons:
index + extended-icons + editor-icons, 144 icons); every feature file imports
from it instead of redefining inline SVGs (~440 icon defs removed).

- Add react-icons dependency
- Desktop nav (AppShell) now uses the central Phosphor icons, removing a
  stroke-vs-duotone inconsistency the partial migration introduced
- Icons with custom props (SortIcon's direction, expandable chevrons) kept as
  thin Phosphor wrappers; the RemnawaveIcon brand logo and animated SVGs
  (checkmarks, spinners) are intentionally left as-is
- Restore the original per-call-site icon sizes wherever the centralized
  default differed (211 call sites)
2026-05-31 18:50:50 +03:00

86 lines
2.4 KiB
TypeScript

import {
PiTextBDuotone,
PiTextItalicDuotone,
PiTextUnderlineDuotone,
PiTextStrikethroughDuotone,
PiTextHOneDuotone,
PiTextHTwoDuotone,
PiTextHThreeDuotone,
PiListBulletsDuotone,
PiListNumbersDuotone,
PiQuotesDuotone,
PiCodeBlockDuotone,
PiTextAlignLeftDuotone,
PiTextAlignCenterDuotone,
PiHighlighterDuotone,
} from 'react-icons/pi';
import { cn } from '@/lib/utils';
interface IconProps {
className?: string;
}
/**
* Rich-text editor toolbar icons — Phosphor (react-icons/pi) Duotone, the
* panel's icon family. Shared by the TipTap toolbars in AdminNewsCreate and
* AdminInfoPageEditor. Names match the historical local definitions so the
* toolbars import instead of hand-rolling SVGs.
*/
export const BoldIcon = ({ className }: IconProps) => (
<PiTextBDuotone className={cn('h-5 w-5', className)} />
);
export const ItalicIcon = ({ className }: IconProps) => (
<PiTextItalicDuotone className={cn('h-5 w-5', className)} />
);
export const UnderlineIcon = ({ className }: IconProps) => (
<PiTextUnderlineDuotone className={cn('h-5 w-5', className)} />
);
export const StrikeIcon = ({ className }: IconProps) => (
<PiTextStrikethroughDuotone className={cn('h-5 w-5', className)} />
);
export const H1Icon = ({ className }: IconProps) => (
<PiTextHOneDuotone className={cn('h-5 w-5', className)} />
);
export const H2Icon = ({ className }: IconProps) => (
<PiTextHTwoDuotone className={cn('h-5 w-5', className)} />
);
export const H3Icon = ({ className }: IconProps) => (
<PiTextHThreeDuotone className={cn('h-5 w-5', className)} />
);
export const ListBulletIcon = ({ className }: IconProps) => (
<PiListBulletsDuotone className={cn('h-5 w-5', className)} />
);
export const ListOrderedIcon = ({ className }: IconProps) => (
<PiListNumbersDuotone className={cn('h-5 w-5', className)} />
);
export const QuoteIcon = ({ className }: IconProps) => (
<PiQuotesDuotone className={cn('h-5 w-5', className)} />
);
export const CodeBlockIcon = ({ className }: IconProps) => (
<PiCodeBlockDuotone className={cn('h-5 w-5', className)} />
);
export const AlignLeftIcon = ({ className }: IconProps) => (
<PiTextAlignLeftDuotone className={cn('h-5 w-5', className)} />
);
export const AlignCenterIcon = ({ className }: IconProps) => (
<PiTextAlignCenterDuotone className={cn('h-5 w-5', className)} />
);
export const HighlightIcon = ({ className }: IconProps) => (
<PiHighlighterDuotone className={cn('h-5 w-5', className)} />
);