Skip to content
This repository was archived by the owner on Jul 8, 2025. It is now read-only.

Commit 2c3c7fc

Browse files
authored
feat: replace lucide icons with untitled icons (#221)
* feat: replace lucide icons with untitled icons * chore: remove lucide-react dependency
1 parent 25a531e commit 2c3c7fc

17 files changed

+143
-2692
lines changed

package-lock.json

Lines changed: 76 additions & 2642 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,11 @@
2929
"@tanstack/react-query": "^5.64.1",
3030
"@types/prismjs": "^1.26.5",
3131
"@types/react-syntax-highlighter": "^15.5.13",
32+
"@untitled-ui/icons-react": "^0.1.4",
3233
"clsx": "^2.1.1",
3334
"date-fns": "^4.1.0",
3435
"fuse.js": "^7.0.0",
3536
"highlight.js": "^11.11.1",
36-
"lucide-react": "^0.471.1",
3737
"prismjs": "^1.29.0",
3838
"react": "19.0.0",
3939
"react-dom": "19.0.0",

src/components/CopyToClipboard.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Button, Tooltip, TooltipTrigger } from "@stacklok/ui-kit";
2-
import { ClipboardCheck, ClipboardCopy } from "lucide-react";
2+
import { ClipboardCheck, Copy02 } from "@untitled-ui/icons-react";
33
import { useEffect, useState } from "react";
44
import { twMerge } from "tailwind-merge";
55

@@ -34,7 +34,7 @@ export function CopyToClipboard({
3434
{copied ? (
3535
<ClipboardCheck data-testid="icon-clipboard-check" />
3636
) : (
37-
<ClipboardCopy data-testid="icon-clipboard-copy" />
37+
<Copy02 data-testid="icon-clipboard-copy" />
3838
)}
3939
</Button>
4040

src/components/Error.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { CircleAlert } from "lucide-react";
1+
import { AlertCircle } from "@untitled-ui/icons-react";
22
import { Header } from "../features/header/components/header";
33
import { Card } from "@stacklok/ui-kit";
44

@@ -10,7 +10,7 @@ export function Error() {
1010
</div>
1111
<div className="h-24 flex flex-col flex-1 justify-center">
1212
<Card className="p-8 flex flex-col items-center">
13-
<CircleAlert className="text-red-600 mb-2 size-16" />
13+
<AlertCircle className="text-red-600 mb-2 size-16" />
1414
<div className="text-xl font-semibold text-secondary text-center">
1515
An error occurred
1616
</div>

src/components/HoverPopover.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
} from "@stacklok/ui-kit";
88
import { OverlayTriggerStateContext } from "react-aria-components";
99
import { ReactNode, useContext } from "react";
10-
import { ChevronDown, ChevronUp } from "lucide-react";
10+
import { ChevronDown, ChevronUp } from "@untitled-ui/icons-react";
1111

1212
function PopoverIcon() {
1313
const { isOpen = false } = useContext(OverlayTriggerStateContext) ?? {};

src/components/ui/sheet.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22

33
import * as React from "react";
44
import * as SheetPrimitive from "@radix-ui/react-dialog";
5-
import { X } from "lucide-react";
65

76
import { tv } from "tailwind-variants";
87
import { twMerge } from "tailwind-merge";
8+
import { XClose } from "@untitled-ui/icons-react";
99

1010
const Sheet = SheetPrimitive.Root;
1111

@@ -65,7 +65,7 @@ const SheetContent = React.forwardRef<
6565
>
6666
{children}
6767
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-brand-600 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-25">
68-
<X className="size-4" />
68+
<XClose className="size-4" />
6969
<span className="sr-only">Close</span>
7070
</SheetPrimitive.Close>
7171
</SheetPrimitive.Content>

src/components/ui/sidebar.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import * as React from "react";
22
import { Slot } from "@radix-ui/react-slot";
3-
import { PanelLeft } from "lucide-react";
3+
44
import { useIsMobile } from "@/hooks/use-mobile";
55
import { Sheet, SheetContent } from "@/components/ui/sheet";
66
import { Tooltip, TooltipTrigger, Button, Skeleton } from "@stacklok/ui-kit";
77
import { twMerge } from "tailwind-merge";
88
import { tv } from "tailwind-variants";
9+
import { LayoutAlt02 } from "@untitled-ui/icons-react";
910

1011
const SIDEBAR_COOKIE_NAME = "sidebar:state";
1112
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
@@ -271,7 +272,7 @@ const SidebarTrigger = React.forwardRef<
271272
}}
272273
{...props}
273274
>
274-
<PanelLeft className="!w-6 !h-6 text-secondary" />
275+
<LayoutAlt02 className="!w-6 !h-6 text-secondary" />
275276
<span className="sr-only">Toggle Sidebar</span>
276277
</Button>
277278
);

src/features/alerts/components/__tests__/table-alerts.test.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,10 @@ import {
1010
TokenUsageAggregate,
1111
} from "@/api/generated";
1212

13-
vi.mock("lucide-react", async () => {
14-
const original =
15-
await vi.importActual<typeof import("lucide-react")>("lucide-react");
13+
vi.mock("@untitled-ui/icons-react", async () => {
14+
const original = await vi.importActual<
15+
typeof import("@untitled-ui/icons-react")
16+
>("@untitled-ui/icons-react");
1617
return {
1718
...original,
1819
ArrowDown: () => <div data-testid="icon-arrow-down" />,

src/features/alerts/components/table-alert-token-usage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { TokenUsage, TokenUsageAggregate } from "@/api/generated";
22
import { formatCurrency } from "@/lib/currency";
33
import { TextLinkButton, Tooltip, TooltipTrigger } from "@stacklok/ui-kit";
4-
import { ArrowDown, ArrowUp } from "lucide-react";
4+
import { ArrowDown, ArrowUp } from "@untitled-ui/icons-react";
55

66
function Icons({
77
input_tokens = 0,

src/features/alerts/components/table-alerts.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,13 @@ import {
2222
parsingPromptText,
2323
getIssueDetectedType,
2424
} from "@/lib/utils";
25-
import { KeyRoundIcon, PackageX, Search } from "lucide-react";
2625
import { useAlertSearch } from "@/hooks/useAlertSearch";
2726
import { useCallback } from "react";
2827
import { useNavigate, useSearchParams } from "react-router-dom";
2928
import { useFilteredAlerts } from "@/hooks/useAlertsData";
3029
import { useClientSidePagination } from "@/hooks/useClientSidePagination";
3130
import { TableAlertTokenUsage } from "./table-alert-token-usage";
31+
import { Key01, PackageX, SearchMd } from "@untitled-ui/icons-react";
3232

3333
const getTitle = (alert: AlertConversation) => {
3434
const prompt = alert.conversation;
@@ -63,7 +63,7 @@ function IssueDetectedCellContent({ alert }: { alert: AlertConversation }) {
6363
case "leaked_secret":
6464
return (
6565
<>
66-
<KeyRoundIcon className="size-4 text-blue-700" />
66+
<Key01 className="size-4 text-blue-700" />
6767
Blocked secret exposure
6868
</>
6969
);
@@ -167,7 +167,7 @@ export function TableAlerts() {
167167
type="search"
168168
placeholder="Search..."
169169
isBorderless
170-
icon={<Search />}
170+
icon={<SearchMd />}
171171
/>
172172
<SearchFieldClearButton />
173173
</FieldGroup>

0 commit comments

Comments
 (0)