refactor: migrate all icons from Untitled UI to FontAwesome Pro Duotone

Replace all @untitledui/icons imports across 55 files with equivalent
@fortawesome/pro-duotone-svg-icons icons, using FontAwesomeIcon wrappers
(FC<{ className?: string }>) for prop-based usage and inline replacements
for direct JSX usage. Drops unsupported Untitled UI-specific props
(strokeWidth, numeric size). TypeScript compiles clean with no errors.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-21 11:07:19 +05:30
parent 3064eeb444
commit 6f40b82579
55 changed files with 289 additions and 120 deletions

View File

@@ -1,6 +1,14 @@
import type { FC } from 'react';
import { useMemo, useState } from 'react';
import { useSearchParams } from 'react-router';
import { ArrowLeft, Download01, FilterLines, SearchLg, SwitchVertical01 } from '@untitledui/icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowLeft, faArrowDownToLine, faFilterList, faMagnifyingGlass, faArrowUpArrowDown } from '@fortawesome/pro-duotone-svg-icons';
const ArrowLeft: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faArrowLeft} className={className} />;
const Download01: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faArrowDownToLine} className={className} />;
const FilterLines: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faFilterList} className={className} />;
const SearchLg: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faMagnifyingGlass} className={className} />;
const SwitchVertical01: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faArrowUpArrowDown} className={className} />;
import { Button } from '@/components/base/buttons/button';
import { Input } from '@/components/base/input/input';
import { Tabs, TabList, Tab } from '@/components/application/tabs/tabs';

View File

@@ -7,8 +7,10 @@ import {
faPhoneXmark,
faPlay,
faPause,
faMagnifyingGlass,
} from '@fortawesome/pro-duotone-svg-icons';
import { SearchLg } from '@untitledui/icons';
const SearchLg: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faMagnifyingGlass} className={className} />;
import { Table, TableCard } from '@/components/application/table/table';
import { Badge } from '@/components/base/badges/badges';
import { Button } from '@/components/base/buttons/button';

View File

@@ -1,4 +1,12 @@
import { BookOpen01, Check, Copy01, Cube01, HelpCircle } from "@untitledui/icons";
import type { FC } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBookOpen, faCheck, faCopy, faCube, faCircleQuestion } from "@fortawesome/pro-duotone-svg-icons";
const BookOpen01: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faBookOpen} className={className} />;
const Check: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faCheck} className={className} />;
const Copy01: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faCopy} className={className} />;
const Cube01: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faCube} className={className} />;
const HelpCircle: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faCircleQuestion} className={className} />;
import { Button } from "@/components/base/buttons/button";
import { ButtonUtility } from "@/components/base/buttons/button-utility";
import { UntitledLogoMinimal } from "@/components/foundations/logo/untitledui-logo-minimal";

View File

@@ -1,7 +1,11 @@
import { ArrowLeft } from "@untitledui/icons";
import type { FC } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowLeft } from "@fortawesome/pro-duotone-svg-icons";
import { useNavigate } from "react-router";
import { Button } from "@/components/base/buttons/button";
const ArrowLeft: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faArrowLeft} className={className} />;
export function NotFound() {
const router = useNavigate();

View File

@@ -1,8 +1,10 @@
import { useMemo, useState } from 'react';
import { useNavigate } from 'react-router';
import type { FC } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUser } from '@fortawesome/pro-duotone-svg-icons';
import { SearchLg } from '@untitledui/icons';
import { faUser, faMagnifyingGlass } from '@fortawesome/pro-duotone-svg-icons';
const SearchLg: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faMagnifyingGlass} className={className} />;
import { Avatar } from '@/components/base/avatar/avatar';
import { Badge } from '@/components/base/badges/badges';
import { Button } from '@/components/base/buttons/button';

View File

@@ -7,8 +7,12 @@ import {
faPhoneArrowUpRight,
faPercent,
} from '@fortawesome/pro-duotone-svg-icons';
import type { FC } from 'react';
import { faArrowUp, faArrowDown } from '@fortawesome/pro-duotone-svg-icons';
import { BadgeWithIcon } from '@/components/base/badges/badges';
import { ArrowUp, ArrowDown } from '@untitledui/icons';
const ArrowUp: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faArrowUp} className={className} />;
const ArrowDown: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faArrowDown} className={className} />;
import { TopBar } from '@/components/layout/top-bar';
import { useData } from '@/providers/data-provider';
import type { Call } from '@/types/entities';