remove styled-icons dependency

quickwit/quickwit-ui/package.json

@@ -32,14 +32,14 @@
     "dayjs": "1.11.19",
     "jest": "30.2.0",
     "jest-environment-jsdom": "30.2.0",
+    "lucide-react": "^1.7.0",
     "monaco-editor": "0.55.1",
     "react": "19.2.4",
     "react-app-polyfill": "3.0.0",
     "react-dom": "19.2.4",
     "react-number-format": "5.4.4",
     "react-router": "7.13.1",
     "styled-components": "6.1.19",
-    "styled-icons": "10.47.1",
     "swagger-ui-react": "5.32.0",
     "typescript": "5.9.3",
     "vite": "7.3.1"

quickwit/quickwit-ui/src/components/SideBar.tsx

@@ -12,6 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { Code2, Database, Network, Settings } from "lucide-react";
 import {
   ListItemButton,
   ListSubheader,
@@ -21,10 +22,6 @@ import {
 import List from "@mui/material/List";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
-import { Database } from "@styled-icons/feather/Database";
-import { Settings } from "@styled-icons/feather/Settings";
-import { GroupWork } from "@styled-icons/material-outlined/GroupWork";
-import { CodeSSlash } from "@styled-icons/remix-line/CodeSSlash";
 import * as React from "react";
 import { Link as RouterLink, LinkProps as RouterLinkProps } from "react-router";
 import { useLocalStorage } from "../providers/LocalStorageProvider";
@@ -88,30 +85,30 @@ const SideBar = () => {
         <ListItemLink
           to={searchUrl}
           primary={<Typography variant="body1">Query editor</Typography>}
-          icon={<CodeSSlash size="18px" />}
+          icon={<Code2 size={18} />}
         />
         <ListSubheader sx={{ lineHeight: "25px", paddingTop: "10px" }}>
           <Typography variant="body1">Admin</Typography>
         </ListSubheader>
         <ListItemLink
           to="/indexes"
           primary={<Typography variant="body1">Indexes</Typography>}
-          icon={<Database size="18px" />}
+          icon={<Database size={18} />}
         />
         <ListItemLink
           to="/cluster"
           primary={<Typography variant="body1">Cluster</Typography>}
-          icon={<GroupWork size="18px" />}
+          icon={<Network size={18} />}
         />
         <ListItemLink
           to="/node-info"
           primary={<Typography variant="body1">Node info</Typography>}
-          icon={<Settings size="18px" />}
+          icon={<Settings size={18} />}
         />
         <ListItemLink
           to="/api-playground"
           primary={<Typography variant="body1">API </Typography>}
-          icon={<CodeSSlash size="18px" />}
+          icon={<Code2 size={18} />}
         />
       </List>
     </SideBarWrapper>

quickwit/quickwit-ui/src/components/TopBar.tsx

@@ -17,14 +17,13 @@ import {
   Box,
   IconButton,
   Link,
-  SvgIcon,
   styled,
   Tooltip,
   Typography,
 } from "@mui/material";
+import DiscordIcon from "./icons/DiscordIcon";
 import AppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
-import { Discord } from "@styled-icons/fa-brands/Discord";
 import { useEffect, useMemo, useState } from "react";
 import quickwitLogoUrl from "../assets/img/quickwit-logo-with-title.svg";
 import { Client } from "../services/client";
@@ -76,9 +75,7 @@ const TopBar = () => {
         </Link>
         <Link href="https://discord.gg/rpRRTezWhW" target="_blank">
           <IconButton size="large">
-            <SvgIcon>
-              <Discord />
-            </SvgIcon>
+            <DiscordIcon />
           </IconButton>
         </Link>
         <Link href="https://github.com/quickwit-inc/quickwit" target="_blank">

quickwit/quickwit-ui/src/components/icons/DiscordIcon.tsx

@@ -0,0 +1,23 @@
+// Copyright 2021-Present Datadog, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { SvgIcon } from "@mui/material";
+
+const DiscordIcon = () => (
+  <SvgIcon viewBox="0 0 640 512">
+    <path d="M524.531 69.836a1.5 1.5 0 0 0-.764-.7A485.065 485.065 0 0 0 404.081 32.03a1.816 1.816 0 0 0-1.923.91 337.461 337.461 0 0 0-14.9 30.6 447.848 447.848 0 0 0-134.426 0 309.541 309.541 0 0 0-15.135-30.6 1.89 1.89 0 0 0-1.924-.91 483.689 483.689 0 0 0-119.688 37.107 1.712 1.712 0 0 0-.788.676C39.068 183.651 18.186 294.69 28.43 404.354a2.016 2.016 0 0 0 .765 1.375 487.666 487.666 0 0 0 146.825 74.189 1.9 1.9 0 0 0 2.063-.676A348.2 348.2 0 0 0 208.12 430.4a1.86 1.86 0 0 0-1.019-2.588 321.173 321.173 0 0 1-45.868-21.853 1.885 1.885 0 0 1-.185-3.126 251.047 251.047 0 0 0 9.109-7.137 1.819 1.819 0 0 1 1.9-.256c96.229 43.917 200.41 43.917 295.5 0a1.812 1.812 0 0 1 1.924.233 234.533 234.533 0 0 0 9.132 7.16 1.884 1.884 0 0 1-.162 3.126 301.407 301.407 0 0 1-45.89 21.83 1.875 1.875 0 0 0-1 2.611 391.055 391.055 0 0 0 30.014 48.815 1.864 1.864 0 0 0 2.063.7A486.048 486.048 0 0 0 610.7 405.729a1.882 1.882 0 0 0 .765-1.352c12.264-126.783-20.532-236.912-86.934-334.541ZM222.491 337.58c-28.972 0-52.844-26.587-52.844-59.239s23.409-59.241 52.844-59.241c29.665 0 53.306 26.82 52.843 59.239 0 32.654-23.41 59.241-52.843 59.241Zm195.38 0c-28.971 0-52.843-26.587-52.843-59.239s23.409-59.241 52.843-59.241c29.667 0 53.307 26.82 52.844 59.239 0 32.654-23.177 59.241-52.844 59.241Z" />
+  </SvgIcon>
+);
+
+export default DiscordIcon;