From a630b411f2a2c3c7c67f694ca02112e61a5e5214 Mon Sep 17 00:00:00 2001 From: Utkarsh Mishra Date: Mon, 11 Aug 2025 01:57:43 +0200 Subject: [PATCH] feat: replace radix icons with lucide-react --- web/package.json | 2 +- web/pnpm-lock.yaml | 24 ++++++++++++------------ web/src/ui/chat/chat.tsx | 9 ++++----- web/src/ui/chat/input-box.tsx | 2 +- web/src/ui/homepage/header.tsx | 16 ++++------------ web/src/ui/homepage/links.tsx | 8 ++++---- web/src/ui/homepage/search.tsx | 4 ++-- web/src/ui/homepage/social.tsx | 12 ++++-------- 8 files changed, 32 insertions(+), 45 deletions(-) diff --git a/web/package.json b/web/package.json index 441f934..3e1a3f4 100644 --- a/web/package.json +++ b/web/package.json @@ -10,11 +10,11 @@ }, "dependencies": { "@ai-sdk/react": "^2.0.6", - "@radix-ui/react-icons": "^1.3.2", "@radix-ui/react-navigation-menu": "^1.2.3", "@radix-ui/react-select": "^2.1.4", "@radix-ui/themes": "^3.1.6", "ai": "^5.0.6", + "lucide-react": "^0.539.0", "next": "15.4.6", "next-themes": "^0.4.4", "react": "^19.0.0", diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml index a47eb9f..635bbc1 100644 --- a/web/pnpm-lock.yaml +++ b/web/pnpm-lock.yaml @@ -11,9 +11,6 @@ importers: '@ai-sdk/react': specifier: ^2.0.6 version: 2.0.6(react@19.1.0)(zod@3.25.76) - '@radix-ui/react-icons': - specifier: ^1.3.2 - version: 1.3.2(react@19.1.0) '@radix-ui/react-navigation-menu': specifier: ^1.2.3 version: 1.2.13(@types/react-dom@19.1.6(@types/react@19.1.6))(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) @@ -26,6 +23,9 @@ importers: ai: specifier: ^5.0.6 version: 5.0.6(zod@3.25.76) + lucide-react: + specifier: ^0.539.0 + version: 0.539.0(react@19.1.0) next: specifier: 15.4.6 version: 15.4.6(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) @@ -780,11 +780,6 @@ packages: '@types/react-dom': optional: true - '@radix-ui/react-icons@1.3.2': - resolution: {integrity: sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==} - peerDependencies: - react: ^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc - '@radix-ui/react-id@1.1.1': resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==} peerDependencies: @@ -2327,6 +2322,11 @@ packages: lru-cache@5.1.1: resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==} + lucide-react@0.539.0: + resolution: {integrity: sha512-VVISr+VF2krO91FeuCrm1rSOLACQUYVy7NQkzrOty52Y8TlTPcXcMdQFj9bYzBgXbWCiywlwSZ3Z8u6a+6bMlg==} + peerDependencies: + react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0 + magic-string@0.30.17: resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==} @@ -3593,10 +3593,6 @@ snapshots: '@types/react': 19.1.6 '@types/react-dom': 19.1.6(@types/react@19.1.6) - '@radix-ui/react-icons@1.3.2(react@19.1.0)': - dependencies: - react: 19.1.0 - '@radix-ui/react-id@1.1.1(@types/react@19.1.6)(react@19.1.0)': dependencies: '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.6)(react@19.1.0) @@ -5339,6 +5335,10 @@ snapshots: dependencies: yallist: 3.1.1 + lucide-react@0.539.0(react@19.1.0): + dependencies: + react: 19.1.0 + magic-string@0.30.17: dependencies: '@jridgewell/sourcemap-codec': 1.5.0 diff --git a/web/src/ui/chat/chat.tsx b/web/src/ui/chat/chat.tsx index 5af86e0..a160162 100644 --- a/web/src/ui/chat/chat.tsx +++ b/web/src/ui/chat/chat.tsx @@ -1,12 +1,11 @@ 'use client' -import { UIDataTypes, UIMessage, UIMessagePart, UITools } from 'ai' -import { useChat } from '@ai-sdk/react' +import { UIMessage } from 'ai' import { useState } from 'react' import InputBox from './input-box' -import { Box, Button, Flex } from '@radix-ui/themes' -import { ArrowUpIcon } from '@radix-ui/react-icons' +import { Button, Flex } from '@radix-ui/themes' +import { ArrowUp } from 'lucide-react' import { MessageBubble } from './message-bubble' export function Chat() { @@ -68,7 +67,7 @@ export function Chat() { bottom: '3rem', }} > - + diff --git a/web/src/ui/chat/input-box.tsx b/web/src/ui/chat/input-box.tsx index 72c4e95..06c0a3b 100644 --- a/web/src/ui/chat/input-box.tsx +++ b/web/src/ui/chat/input-box.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { Box, Flex, TextArea } from '@radix-ui/themes' +import { Box, TextArea } from '@radix-ui/themes' const ChatThreadSelector = ({ input, diff --git a/web/src/ui/homepage/header.tsx b/web/src/ui/homepage/header.tsx index e5db73f..85f1775 100644 --- a/web/src/ui/homepage/header.tsx +++ b/web/src/ui/homepage/header.tsx @@ -2,7 +2,7 @@ import React from 'react' import { useTheme } from 'next-themes' -import { HomeIcon, MoonIcon, SunIcon } from '@radix-ui/react-icons' +import { Home, Moon, Sun } from 'lucide-react' import Link from 'next/link' export const Header = () => { @@ -12,7 +12,7 @@ export const Header = () => {
) diff --git a/web/src/ui/homepage/links.tsx b/web/src/ui/homepage/links.tsx index 7b0ab77..8656436 100644 --- a/web/src/ui/homepage/links.tsx +++ b/web/src/ui/homepage/links.tsx @@ -1,4 +1,4 @@ -import { ChatBubbleIcon, FileTextIcon, PersonIcon } from '@radix-ui/react-icons' +import { MessageCircle, FileText, Person } from 'lucide-react' import Link from 'next/link' import { Button } from '@components/ui/common/button' @@ -9,7 +9,7 @@ export default function Links() { {/* */} @@ -20,13 +20,13 @@ export default function Links() { target="_blank" > diff --git a/web/src/ui/homepage/search.tsx b/web/src/ui/homepage/search.tsx index f453bb3..efe216b 100644 --- a/web/src/ui/homepage/search.tsx +++ b/web/src/ui/homepage/search.tsx @@ -1,4 +1,4 @@ -import { MagnifyingGlassIcon } from '@radix-ui/react-icons' +import { Search } from 'lucide-react' import { Box, TextField } from '@radix-ui/themes' export default function Search() { @@ -6,7 +6,7 @@ export default function Search() { - + diff --git a/web/src/ui/homepage/social.tsx b/web/src/ui/homepage/social.tsx index 1c6f3b5..f842c2b 100644 --- a/web/src/ui/homepage/social.tsx +++ b/web/src/ui/homepage/social.tsx @@ -1,8 +1,4 @@ -import { - EnvelopeOpenIcon, - GitHubLogoIcon, - LinkedInLogoIcon, -} from '@radix-ui/react-icons' +import { Mail, Github, Linkedin } from 'lucide-react' import Link from 'next/link' import type { ComponentType, SVGProps } from 'react' @@ -15,19 +11,19 @@ const socialData: { { id: 'github', name: 'Github', - icon: GitHubLogoIcon, + icon: Github, url: 'https://github.com/utmishra', }, { id: 'linkedin', name: 'LinkedIn', - icon: LinkedInLogoIcon, + icon: Linkedin, url: 'https://www.linkedin.com/in/utmishra/', }, { id: 'email', name: 'Email', - icon: EnvelopeOpenIcon, + icon: Mail, url: 'mailto:utmishra@gmail.com', }, ]