Migrate custom SVG sprite icons to lucide-react

packages/extension/src/components/OpenInTab.css

@@ -10,31 +10,20 @@
   background: #f9f9f9;
   border-radius: 6px;
   border: none;
-  filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07))
-    drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
+  filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
   display: flex;
   align-items: center;
   padding: 4px 8px;
   cursor: pointer;
-  color: var(--gray-400);
-  font-size: 12px;
   transition:
     color 250ms,
     background-color 250ms;
 }
+
 .OpenInTab__button:hover {
-  color: var(--gray-700);
   background: #fff;
 }
 
 .OpenInTab__icon {
-  width: 20px;
-  height: 20px;
-  margin-right: 4px;
-  padding-bottom: 2px;
-  fill: var(--gray-400);
-  transition: fill 250ms;
-}
-.OpenInTab__icon:hover {
-  fill: var(--gray-700);
+  transition: color 250ms;
 }

packages/extension/src/components/OpenInTab.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react"
 import { Ipc, BgCommand } from "@/services/ipc"
-import { Icon } from "../components/Icon"
+import { ExternalLink } from "lucide-react"
 import "./OpenInTab.css"
 
 let isPageUnloading = false
@@ -47,10 +47,10 @@ export function OpenInTab(): JSX.Element {
         <div className="OpenInTab" style={{ visibility: "hidden" }}>
           <button
             type="button"
-            className="OpenInTab__button"
+            className="OpenInTab__button text-sm text-foreground/60 hover:text-foreground cursor-pointer gap-2"
             onClick={onClickOpenTab}
           >
-            <Icon name="open-outline" className="OpenInTab__icon" />
+            <ExternalLink className="OpenInTab__icon size-4" />
             Open in Tab
           </button>
         </div>

packages/extension/src/components/menu/InvisibleItem.tsx

@@ -2,7 +2,7 @@ import React, { useRef, useEffect, useMemo } from "react"
 import { cn } from "@/lib/utils"
 
 import { ResultPopup } from "@/components/result/ResultPopup"
-import { Icon } from "@/components/Icon"
+import { RefreshCw, Check, AlertCircle } from "lucide-react"
 import { useContextMenu } from "@/hooks/useContextMenu"
 import { useSelectContext } from "@/hooks/useSelectContext"
 import { useCommandExecutor } from "@/hooks/useCommandExecutor"
@@ -108,16 +108,15 @@ function IconWithState(props: ImageProps): JSX.Element {
       )}
     >
       {status === ExecState.EXECUTING && (
-        <Icon
+        <RefreshCw
           className={`${css.itemImg} ${css.apiIconLoading} rotate`}
-          name="refresh"
         />
       )}
       {status === ExecState.SUCCESS && (
-        <Icon className={`${css.itemImg} ${css.apiIconSuccess}`} name="check" />
+        <Check className={`${css.itemImg} ${css.apiIconSuccess}`} />
       )}
       {status === ExecState.FAIL && (
-        <Icon className={`${css.itemImg} ${css.apiIconError}`} name="error" />
+        <AlertCircle className={`${css.itemImg} ${css.apiIconError}`} />
       )}
     </div>
   )

packages/extension/src/components/menu/Menu.module.css

@@ -59,16 +59,16 @@
 }
 
 .apiIconLoading {
-  fill: #666;
+  color: #666;
   cursor: wait;
 }
 
 .apiIconSuccess {
-  fill: var(--blue-500);
+  color: var(--blue-500);
 }
 
 .apiIconError {
-  fill: rgb(220 38 38);
+  color: rgb(220 38 38);
 }
 
 .iconWithState {
@@ -100,8 +100,8 @@
 .icon {
   width: 1.4em;
   height: 1.4em;
-  fill: var(--sc-font-color);
-  transition: fill 250ms;
+  color: var(--sc-font-color);
+  transition: color 250ms;
 }
 
 .menuImage svg {

packages/extension/src/components/menu/Menu.tsx

@@ -10,7 +10,7 @@ import { ScrollAreaConditional } from "@/components/ui/scroll-area"
 import { STYLE, SIDE } from "@/const"
 import { TEST_IDS } from "@/testIds"
 import { MenuItem } from "./MenuItem"
-import { Icon } from "@/components/Icon"
+import { ChevronRight } from "lucide-react"
 import { HoverArea } from "@/components/menu/HoverArea"
 import { MenuImage } from "@/components/menu/MenuImage"
 import { popupContext } from "@/components/Popup"
@@ -226,7 +226,7 @@ const MenuFolder = (props: {
         {!(folder.onlyIcon && isHorizontal) && (
           <span className={cn(css.itemTitle, css.title)}>{folder.title}</span>
         )}
-        {!isHorizontal && <Icon name="chevron" className={css.icon} />}
+        {!isHorizontal && <ChevronRight className={css.icon} />}
       </MenubarTrigger>
       <MenubarContent
         side={menuSide}

packages/extension/src/components/menu/MenuItem.tsx

@@ -2,7 +2,7 @@ import React, { useRef, useContext } from "react"
 import clsx from "clsx"
 import { popupContext } from "@/components/Popup"
 import { Tooltip } from "../Tooltip"
-import { Icon } from "@/components/Icon"
+import { RefreshCw, Check, AlertCircle } from "lucide-react"
 import { ResultPopup } from "@/components/result/ResultPopup"
 import { useSelectContext } from "@/hooks/useSelectContext"
 import { useCommandExecutor } from "@/hooks/useCommandExecutor"
@@ -100,16 +100,15 @@ function ImageWithState(props: ImageProps): JSX.Element {
         <img className={css.itemImg} src={iconUrl} alt="icon" />
       )}
       {status === ExecState.EXECUTING && (
-        <Icon
+        <RefreshCw
           className={`${css.itemImg} ${css.apiIconLoading} rotate`}
-          name="refresh"
         />
       )}
       {status === ExecState.SUCCESS && (
-        <Icon className={`${css.itemImg} ${css.apiIconSuccess}`} name="check" />
+        <Check className={`${css.itemImg} ${css.apiIconSuccess}`} />
       )}
       {status === ExecState.FAIL && (
-        <Icon className={`${css.itemImg} ${css.apiIconError}`} name="error" />
+        <AlertCircle className={`${css.itemImg} ${css.apiIconError}`} />
       )}
     </>
   )

packages/extension/src/components/result/ResultPopup.module.css

@@ -14,7 +14,6 @@
   cursor: pointer;
   transition:
     color,
-    fill,
     background ease-out 0.2s;
   border: none;
   border-radius: 6px;
@@ -29,7 +28,6 @@
     width: var(--icon-size);
     height: var(--icon-size);
     color: var(--gray-400);
-    fill: var(--gray-400);
   }
 
   &:hover {
@@ -38,11 +36,10 @@
 
     svg {
       color: var(--gray-600);
-      fill: var(--gray-600);
     }
 
     svg.buttonSuccess {
-      fill: var(--blue-500);
+      color: var(--blue-500);
     }
   }
 }

packages/extension/src/components/result/ResultPopup.tsx

@@ -3,7 +3,7 @@ import { cn } from "@/lib/utils"
 import { Popover, PopoverContent, PopoverAnchor } from "@/components/ui/popover"
 
 import { useUserSettings } from "@/hooks/useSettings"
-import { Icon } from "@/components/Icon"
+import { X } from "lucide-react"
 import popupCss from "@/components/Popup.module.css"
 import { SIDE } from "@/const"
 import css from "./ResultPopup.module.css"
@@ -40,7 +40,7 @@ export function ResultPopup(props: PopupProps) {
               className={cn(css.closeButton, css.resultPopupButton)}
               onClick={props.onClose}
             >
-              <Icon name="close" />
+              <X />
             </button>
           )}
         </div>

packages/extension/src/components/result/TextStyle.tsx

@@ -2,7 +2,7 @@ import { useState } from "react"
 import { sleep } from "@/lib/utils"
 import { ExecState } from "@/const"
 import css from "@/components/result/ResultPopup.module.css"
-import { Icon } from "@/components/Icon"
+import { Copy, Check } from "lucide-react"
 import { Tooltip } from "@/components/Tooltip"
 
 const toName = (str: string) => {
@@ -45,9 +45,9 @@ export function TextStyle({ styles }: Props) {
           disabled={status === ExecState.SUCCESS}
           ref={setButtonElm}
         >
-          {status === ExecState.NONE && <Icon name="copy" />}
+          {status === ExecState.NONE && <Copy />}
           {status === ExecState.SUCCESS && (
-            <Icon name="check" className={css.buttonSuccess} />
+            <Check className={css.buttonSuccess} />
           )}
         </button>
         <Tooltip positionElm={buttonElm} text={message} />

packages/extension/src/content_script.tsx

@@ -1,7 +1,6 @@
 import { createRoot } from "react-dom/client"
 import { APP_ID, isDebug, isE2E } from "./const"
 import { App } from "./components/App"
-import icons from "./icons.svg?raw"
 import { initSentry, Sentry, ErrorBoundary } from "@/lib/sentry"
 import "@/services/connection"
 
@@ -16,7 +15,6 @@ try {
   document.body.insertAdjacentElement("afterend", rootDom)
   const mode = isDebug || isE2E ? "open" : "closed" // 'open' for debugging and e2e
   const shadow = rootDom.attachShadow({ mode })
-  shadow.innerHTML = icons
   const root = createRoot(shadow)
   root.render(
     <ErrorBoundary>
@@ -41,7 +39,6 @@ try {
 
   if (!isDebug) {
     // Putting styles into ShadowDom
-    insertCss(shadow, "/assets/icons.css")
     insertCss(shadow, "/assets/content_script.css")
   }