fix: replace inline SVGs with lucide-react icons and .svg images (#347)

Author: tjyyy3

app/components/editor/common/EndpointSelector.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { clsx } from 'clsx';
+import { Link } from 'lucide-react';
 import { DEFAULT_ENDPOINT } from '@/app/components/hooks/useRemoteEnforcer';
 import { useLang } from '@/app/context/LangContext';
 import { useAutoCarousel } from '@/app/context/AutoCarouselContext';
@@ -67,12 +68,7 @@ export const EndpointSelector: React.FC = () => {
               }}
               className="border border-[#e13c3c] rounded px-2 py-1 text-[#e13c3c] hover:bg-[#e13c3c] hover:text-white flex items-center gap-1"
             >
-              <svg className="w-4 h-4" viewBox="0 0 1024 1024" fill="currentColor">
-                {/* eslint-disable-next-line max-len */}
-                <path d="M607.934444 417.856853c-6.179746-6.1777-12.766768-11.746532-19.554358-16.910135l-0.01228 0.011256c-6.986111-6.719028-16.47216-10.857279-26.930349-10.857279-21.464871 0-38.864146 17.400299-38.864146 38.864146 0 9.497305 3.411703 18.196431 9.071609 24.947182l-0.001023 0c0.001023 0.001023 0.00307 0.00307 0.005117 0.004093 2.718925 3.242857 5.953595 6.03853 9.585309 8.251941 3.664459 3.021823 7.261381 5.997598 10.624988 9.361205l3.203972 3.204995c40.279379 40.229237 28.254507 109.539812-12.024871 149.820214L371.157763 796.383956c-40.278355 40.229237-105.761766 40.229237-146.042167 0l-3.229554-3.231601c-40.281425-40.278355-40.281425-105.809861 0-145.991002l75.93546-75.909877c9.742898-7.733125 15.997346-19.668968 15.997346-33.072233 0-23.312962-18.898419-42.211381-42.211381-42.211381-8.797363 0-16.963347 2.693342-23.725354 7.297197-0.021489-0.045025-0.044002-0.088004-0.066515-0.134053l-0.809435 0.757247c-2.989077 2.148943-5.691629 4.669346-8.025791 7.510044l-78.913281 73.841775c-74.178443 74.229608-74.178443 195.632609 0 269.758863l3.203972 3.202948c74.178443 74.127278 195.529255 74.127278 269.707698 0l171.829484-171.880649c74.076112-74.17435 80.357166-191.184297 6.282077-265.311575L607.934444 417.856853z" />
-                {/* eslint-disable-next-line max-len */}
-                <path d="M855.61957 165.804257l-3.203972-3.203972c-74.17742-74.178443-195.528232-74.178443-269.706675 0L410.87944 334.479911c-74.178443 74.178443-78.263481 181.296089-4.085038 255.522628l3.152806 3.104711c3.368724 3.367701 6.865361 6.54302 10.434653 9.588379 2.583848 2.885723 5.618974 5.355985 8.992815 7.309476 0.025583 0.020466 0.052189 0.041956 0.077771 0.062422l0.011256-0.010233c5.377474 3.092431 11.608386 4.870938 18.257829 4.870938 20.263509 0 36.68962-16.428158 36.68962-36.68962 0-5.719258-1.309832-11.132548-3.645017-15.95846l0 0c-4.850471-10.891048-13.930267-17.521049-20.210297-23.802102l-3.15383-3.102664c-40.278355-40.278355-24.982998-98.79612 15.295358-139.074476l171.930791-171.830507c40.179095-40.280402 105.685018-40.280402 145.965419 0l3.206018 3.152806c40.279379 40.281425 40.279379 105.838513 0 146.06775l-75.686796 75.737962c-10.296507 7.628748-16.97358 19.865443-16.97358 33.662681 0 23.12365 18.745946 41.87062 41.87062 41.87062 8.048303 0 15.563464-2.275833 21.944801-6.211469 0.048095 0.081864 0.093121 0.157589 0.141216 0.240477l1.173732-1.083681c3.616364-2.421142 6.828522-5.393847 9.529027-8.792247l79.766718-73.603345C929.798013 361.334535 929.798013 239.981676 855.61957 165.804257z" />
-              </svg>
+              <Link className="w-4 h-4" />
             </button>
           </TooltipTrigger>
           <TooltipContent 

app/components/editor/common/EngineSelector.tsx

@@ -1,10 +1,12 @@
 import React, { useState, useRef } from 'react';
+import { ChevronDown } from 'lucide-react';
 import { useLang } from '@/app/context/LangContext';
 import { useAutoCarousel } from '@/app/context/AutoCarouselContext';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; 
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/app/components/ui/tooltip';
 import { EngineType, ENGINES } from '@/app/config/engineConfig';
 import type { VersionInfo } from '@/app/components/hooks/useRemoteEnforcer';
+import { clsx } from 'clsx';
 
 interface EngineSelectorProps {
   selectedEngine: EngineType;
@@ -15,10 +17,10 @@ interface EngineSelectorProps {
 }
 
 export const EngineSelector: React.FC<EngineSelectorProps> = ({ selectedEngine, comparisonEngines, onEngineChange, versions, engineGithubLinks }) => {
-  const { t } = useLang();
+  const { t, theme } = useLang();
+  const iconFilterClass = theme === 'dark' ? 'filter invert' : '';
   const { disableAutoCarousel } = useAutoCarousel();
   const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
   const [isComparisonOpen, setIsComparisonOpen] = useState(false);
   const engines = Object.entries(ENGINES).map(([id, config]) => {
     return {
@@ -82,17 +84,9 @@ export const EngineSelector: React.FC<EngineSelectorProps> = ({ selectedEngine,
             <span className="truncate text-sm">          
               {displayText}          
             </span>          
-            <svg           
+            <ChevronDown           
               className={`w-3 h-3 flex-shrink-0 ml-2 transition-transform ${isOpen ? 'rotate-180' : ''}`}           
-              fill="currentColor"           
-              viewBox="0 0 20 20"          
-            >          
-              <path           
-                fillRule="evenodd"           
-                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"           
-                clipRule="evenodd"           
-              />          
-            </svg>          
+            />          
           </button>          
         </DropdownMenu.Trigger>          
 
@@ -141,20 +135,21 @@ export const EngineSelector: React.FC<EngineSelectorProps> = ({ selectedEngine,
                 <button          
                   className={          
                     "border border-primary rounded-lg px-2 py-1 text-primary bg-secondary " +          
-                    "hover:bg-primary hover:text-primary-foreground transition-all duration-200"          
+                    "hover:bg-primary hover:text-primary-foreground transition-all duration-200 " +
+                    "flex items-center justify-center"          
                   }          
-                >          
-                  <svg className="w-4 h-4" viewBox="0 0 1024 1024" fill="currentColor">          
-                    <path d={      
-                      "M116.364 837.818h279.272v93.091H23.273V93.091h372.363v93.09H116.364v651.637z " +      
-                      "m512 0h93.09v93.091h-93.09v-93.09z m139.636 0h93.09v93.091H768v-93.09z " +      
-                      "m139.636 93.091v-93.09h93.091v93.09h-93.09z m0-325.818V512h93.091v93.09h-93.09z " +      
-                      "m0 139.636v-93.09h93.091v93.09h-93.09z m0-279.272v-93.091h93.091v93.09h-93.09z " +      
-                      "m0-139.637v-93.09h93.091v93.09h-93.09z m0-139.636V93.09h93.091v93.09h-93.09z " +      
-                      "m-46.545 0H768V93.09h93.09v93.09z m-139.636 0h-93.091V93.09h93.09v93.09z " +      
-                      "M488.727 0h93.091v1024h-93.09V0z"      
-                    } />          
-                  </svg>          
+                >
+                  <span
+                    className={clsx('w-4 h-4 inline-flex items-center justify-center')}
+                    style={{
+                      maskImage: "url('/compareEngines.svg')",
+                      maskRepeat: 'no-repeat',
+                      maskSize: 'contain',
+                      maskPosition: 'center center',
+                      backgroundColor: 'currentColor',
+                      transition: 'opacity 0.2s, filter 0.5s',
+                    }}
+                  />
                 </button>          
               </DropdownMenu.Trigger>        
             </TooltipTrigger>          
@@ -209,45 +204,39 @@ export const EngineSelector: React.FC<EngineSelectorProps> = ({ selectedEngine,
         </DropdownMenu.Content>        
       </DropdownMenu.Root>        
 
-      <TooltipProvider>          
-        <Tooltip>          
-          <TooltipTrigger asChild>          
-            <a           
-              href={engineGithubLinks[selectedEngine]}           
-              target="_blank"           
-              rel="noopener noreferrer"           
-              className="text-primary hover:text-primary/80 transition-colors"          
-            >          
-              <svg     
-                xmlns="http://www.w3.org/2000/svg"     
-                width="20"     
-                height="20"     
-                viewBox="0 0 24 24"     
-                fill="currentColor"    
-              >          
-                <path d={      
-                  "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 " + 
-                  "8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416 " +     
-                  "-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 " +      
-                  "1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 " +      
-                  "0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 " +  
-                  "1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.30.653 1.653 " +  
-                  ".242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 " +  
-                  "1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"      
-                } />   
-              </svg>          
-            </a>          
-          </TooltipTrigger>          
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <a
+              href={engineGithubLinks[selectedEngine]}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary hover:text-primary/80 transition-colors group"
+            >
+              <span
+                className={clsx('w-5 h-5 inline-flex items-center justify-center transition-opacity duration-200 group-hover:opacity-80')}
+                style={{
+                  maskImage: "url('/github.svg')",
+                  maskRepeat: 'no-repeat',
+                  maskSize: 'contain',
+                  maskPosition: 'center center',
+                  backgroundColor: 'currentColor',
+                  transition: 'opacity 0.2s, filter 0.5s',
+                  verticalAlign: 'middle',
+                }}
+              />
+            </a>
+          </TooltipTrigger>
           <TooltipContent 
             className={
               "bg-white dark:bg-gray-800 text-primary " +
               "border border-primary"
             }
           >          
-            <p>{t('View Source Code')}</p>          
-          </TooltipContent>          
-        </Tooltip>          
-      </TooltipProvider>        
-    </div>   
+            <p>{t('View Source Code')}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
   );
 };

app/components/editor/common/FileUploadButton.tsx

@@ -1,5 +1,6 @@
 import { useRef } from 'react';
 import clsx from 'clsx';
+import { Upload } from 'lucide-react';
 import { useLang } from '@/app/context/LangContext';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/app/components/ui/tooltip';
 
@@ -56,10 +57,7 @@ export const FileUploadButton: React.FC<FileUploadButtonProps> = ({ onFileConten
                 'shadow-sm hover:shadow-md',
               )}
             >
-              <svg className="w-4 h-4" viewBox="0 0 1051 1024" fill="currentColor">
-                {/* eslint-disable-next-line max-len */}
-                <path d="M525.814398 698.649244a43.115789 43.115789 0 0 0 42.991894-42.991894V131.4536l180.268602 180.268602a43.983061 43.983061 0 0 0 60.709014 0 42.991894 42.991894 0 0 0 0-60.709014L582.31095 23.168542a79.293406 79.293406 0 0 0-111.506352 0L241.968784 251.013188a42.867998 42.867998 0 0 0 60.709014 60.709014L483.194192 131.4536v524.20375a42.991894 42.991894 0 0 0 42.620206 42.991894z M863.926437 117.08167a42.991894 42.991894 0 1 0 0 85.859891A102.09026 102.09026 0 0 1 966.388385 304.907925v531.26582a102.09026 102.09026 0 0 1-101.966364 101.966364H187.826255a102.09026 102.09026 0 0 1-101.966364-101.966364V304.907925a102.09026 102.09026 0 0 1 101.966364-101.966364 42.991894 42.991894 0 0 0 0-85.859891A188.074047 188.074047 0 0 0 0 304.907925v531.26582a188.074047 188.074047 0 0 0 187.826255 187.826255h676.100182a188.074047 188.074047 0 0 0 187.826255-187.826255V304.907925A188.074047 188.074047 0 0 0 863.926437 117.08167z" />
-              </svg>
+              <Upload className="w-4 h-4" />
             </button>
           </TooltipTrigger>
           <TooltipContent className="bg-white dark:bg-gray-800 text-primary border border-primary shadow-lg">

app/components/editor/common/MessageWithTooltip.tsx

@@ -1,5 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { clsx } from 'clsx';
+import { Check } from 'lucide-react';
 
 interface MessageWithTooltipProps {
   message: React.ReactNode;
@@ -60,9 +61,7 @@ export const MessageWithTooltip: React.FC<MessageWithTooltipProps> = ({ message,
         onMouseLeave={handleMouseLeave}
       >
         {isDoneMessage && (
-          <svg className="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
-            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
-          </svg>
+          <Check className="w-5 h-5 flex-shrink-0" />
         )}
         {message}
       </div>

app/components/editor/index.tsx

@@ -11,6 +11,7 @@ import { StateEffect, StateField } from '@codemirror/state';
 import { javascriptLanguage } from '@codemirror/lang-javascript';
 import { linter, lintGutter } from '@codemirror/lint';
 import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels';
+import { HelpCircle, ChevronLeft } from 'lucide-react';
 import { CasbinConfSupport } from '@/app/components/editor/casbin-mode/casbin-conf';
 import { CasbinPolicySupport } from '@/app/components/editor/casbin-mode/casbin-csv';
 import SidePanelChat from '@/app/components/editor/panels/SidePanelChat';
@@ -171,6 +172,7 @@ export const EditorScreen = () => {
   };
 
   const textClass = clsx(theme === 'dark' ? 'text-gray-200' : 'text-gray-800');
+  const iconFilterClass = theme === 'dark' ? '' : 'filter invert';
 
   useEffect(() => {
     // Define a StateEffect and StateField to manage line decorations
@@ -263,17 +265,7 @@ export const EditorScreen = () => {
             'flex items-center gap-2',
           )}
         >
-          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6z
-                M14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6z
-                M4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2z
-                M14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
-            />
-          </svg>
+          <img src="/modelGallery.svg" alt="Model Gallery" className={clsx('w-5 h-5', iconFilterClass)} />
           <span>{t('Model Gallery')}</span>
         </a>
       </div>
@@ -464,17 +456,7 @@ export const EditorScreen = () => {
                             }
                           }}
                         >
-                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              strokeWidth={2}
-                              d={
-                                'M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907' +
-                                '-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
-                              }
-                            />
-                          </svg>
+                          <HelpCircle className="w-4 h-4" />
                           <span>{t('Explain it')}</span>
                         </button>
                       </div>
@@ -562,15 +544,12 @@ export const EditorScreen = () => {
                         return setShowCustomConfig(!showCustomConfig);
                       }}
                     >
-                      <svg
+                      <ChevronLeft
                         className={clsx('h-5 w-5')}
                         style={{
                           transform: showCustomConfig ? 'rotateZ(90deg)' : 'rotateZ(-90deg)',
                         }}
-                        viewBox="0 0 24 24"
-                      >
-                        <path fill={'currentColor'} d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" />
-                      </svg>
+                      />
                     </button>
                   </div>
                 </div>
@@ -702,17 +681,7 @@ export const EditorScreen = () => {
                         }
                       }}
                     >
-                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d={
-                            'M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907' +
-                            '-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
-                          }
-                        />
-                      </svg>
+                      <HelpCircle className="w-4 h-4" />
                       <span>{t('Explain it')}</span>
                     </button>
                   </div>

app/components/editor/panels/ModelToolbar.tsx

@@ -1,6 +1,7 @@
 import { clsx } from 'clsx';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; 
 import * as Switch from '@radix-ui/react-switch';
+import { ChevronDown } from 'lucide-react';
 import { FileUploadButton } from '@/app/components/editor/common/FileUploadButton';
 import { example } from '@/app/components/editor/casbin-mode/example';
 import { useLang } from '@/app/context/LangContext';
@@ -65,14 +66,7 @@ export const ModelToolbar = ({ modelKind, setModelKind, setRequestResults, setMo
               <span className="truncate text-sm">    
                 {modelKind ? example[modelKind]?.name : t('Select your model')}    
               </span>    
-              {/* Dropdown arrow icon */}    
-              <svg className="w-3 h-3 flex-shrink-0 ml-2" fill="currentColor" viewBox="0 0 20 20">    
-                <path   
-                  fillRule="evenodd"   
-                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"   
-                  clipRule="evenodd"   
-                />    
-              </svg>    
+              <ChevronDown className="w-3 h-3 flex-shrink-0 ml-2" />    
             </button>    
           </DropdownMenu.Trigger>    
 

app/components/editor/panels/SidePanelChat.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { X } from 'lucide-react';
 import { extractPageContent } from '@/app/utils/contentExtractor';
 import { useLang } from '@/app/context/LangContext';
 import { clsx } from 'clsx';
@@ -53,9 +54,7 @@ const SidePanelChat = forwardRef<any, { onOpenChange?: (open: boolean) => void;
             <div>AI Assistant</div>
           </a>
           <button onClick={toggleDrawer} className="text-gray-500 hover:text-gray-700">
-            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-            </svg>
+            <X className="w-6 h-6" />
           </button>
         </div>
         <div className="flex-1 h-[calc(100%-60px)]">