icons: update icon component

pkgs/webview-ui/app/src/components/icon/index.tsx

@@ -4,15 +4,23 @@ import ArrowLeft from "@/icons/arrow-left.svg";
 import ArrowRight from "@/icons/arrow-right.svg";
 import ArrowTop from "@/icons/arrow-top.svg";
 import CaretDown from "@/icons/caret-down.svg";
+import CaretUp from "@/icons/caret-up.svg";
+import CaretLeft from "@/icons/caret-left.svg";
 import CaretRight from "@/icons/caret-right.svg";
 import Checkmark from "@/icons/checkmark.svg";
 import ClanIcon from "@/icons/clan-icon.svg";
 import ClanLogo from "@/icons/clan-logo.svg";
+import Download from "@/icons/download.svg";
 import Edit from "@/icons/edit.svg";
 import Expand from "@/icons/expand.svg";
 import EyeClose from "@/icons/eye-close.svg";
 import EyeOpen from "@/icons/eye-open.svg";
 import Flash from "@/icons/flash.svg";
+import Filter from "@/icons/filter.svg";
+import Folder from "@/icons/folder.svg";
+import More from "@/icons/more.svg";
+import Report from "@/icons/report.svg";
+import Search from "@/icons/search.svg";
 import Grid from "@/icons/grid.svg";
 import Info from "@/icons/info.svg";
 import List from "@/icons/list.svg";
@@ -24,51 +32,28 @@ import Settings from "@/icons/settings.svg";
 import Trash from "@/icons/trash.svg";
 import Update from "@/icons/update.svg";
 
-type IconVariant =
+const icons = {
-  | "ArrowBottom"
-  | "ArrowLeft"
-  | "ArrowRight"
-  | "ArrowTop"
-  | "CaretDown"
-  | "CaretRight"
-  | "Checkmark"
-  | "ClanIcon"
-  | "ClanLogo"
-  | "Edit"
-  | "Expand"
-  | "EyeClose"
-  | "EyeOpen"
-  | "Flash"
-  | "Grid"
-  | "Info"
-  | "List"
-  | "Load"
-  | "Paperclip"
-  | "Plus"
-  | "Reload"
-  | "Settings"
-  | "Trash"
-  | "Update";
-
-interface IconProps extends JSX.SvgSVGAttributes<SVGElement> {
-  icon: IconVariant;
-}
-
-const Icon: Component<IconProps> = (props) => {
-  const icons = {
   ArrowBottom,
   ArrowLeft,
   ArrowRight,
   ArrowTop,
   CaretDown,
   CaretRight,
+  CaretLeft,
+  CaretUp,
   Checkmark,
   ClanIcon,
   ClanLogo,
+  Download,
   Edit,
   Expand,
   EyeClose,
   EyeOpen,
+  Filter,
+  Folder,
+  More,
+  Report,
+  Search,
   Flash,
   Grid,
   Info,
@@ -80,7 +65,15 @@ const Icon: Component<IconProps> = (props) => {
   Settings,
   Trash,
   Update,
-  };
+};
+
+type IconVariant = keyof typeof icons;
+
+interface IconProps extends JSX.SvgSVGAttributes<SVGElement> {
+  icon: IconVariant;
+}
+
+const Icon: Component<IconProps> = (props) => {
   const [local, iconProps] = splitProps(props, ["icon"]);
 
   const IconComponent = icons[local.icon];