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,5 +1,6 @@
import { useState } from "react";
import { User01 } from "@untitledui/icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faUser } from "@fortawesome/pro-duotone-svg-icons";
import { cx } from "@/utils/cx";
import { type AvatarProps } from "./avatar";
import { AvatarOnlineIndicator, VerifiedTick } from "./base-components";
@@ -90,7 +91,7 @@ export const AvatarProfilePhoto = ({
return (
<div className={cx("flex size-full items-center justify-center rounded-full bg-tertiary ring-1 ring-secondary_alt", styles[size].content)}>
{placeholder || <User01 className={cx("text-fg-quaternary", styles[size].icon)} />}
{placeholder || <FontAwesomeIcon icon={faUser} className={cx("text-fg-quaternary", styles[size].icon)} />}
</div>
);
};

View File

@@ -1,5 +1,6 @@
import { type FC, type ReactNode, useState } from "react";
import { User01 } from "@untitledui/icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faUser } from "@fortawesome/pro-duotone-svg-icons";
import { cx } from "@/utils/cx";
import { AvatarOnlineIndicator, VerifiedTick } from "./base-components";
@@ -90,7 +91,7 @@ export const Avatar = ({
return <PlaceholderIcon className={cx("text-fg-quaternary", styles[size].icon)} />;
}
return placeholder || <User01 className={cx("text-fg-quaternary", styles[size].icon)} />;
return placeholder || <FontAwesomeIcon icon={faUser} className={cx("text-fg-quaternary", styles[size].icon)} />;
};
const renderBadgeContent = () => {

View File

@@ -1,4 +1,5 @@
import { Plus } from "@untitledui/icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlus } from "@fortawesome/pro-duotone-svg-icons";
import type { ButtonProps as AriaButtonProps } from "react-aria-components";
import { Tooltip as AriaTooltip, TooltipTrigger as AriaTooltipTrigger } from "@/components/base/tooltip/tooltip";
import { cx } from "@/utils/cx";
@@ -26,7 +27,7 @@ export const AvatarAddButton = ({ size, className, title = "Add user", ...props
className,
)}
>
<Plus className={cx("text-current transition-inherit-all", sizes[size].icon)} />
<FontAwesomeIcon icon={faPlus} className={cx("text-current transition-inherit-all", sizes[size].icon)} />
</AriaTooltipTrigger>
</AriaTooltip>
);