Move Icon and LoadingIcon to shared package

apps/yaak-client/components/CommandPaletteDialog.tsx

@@ -21,7 +21,7 @@ import { useActiveRequest } from '../hooks/useActiveRequest';
 import { activeWorkspaceIdAtom } from '../hooks/useActiveWorkspace';
 import { useAllRequests } from '../hooks/useAllRequests';
 import { useCreateWorkspace } from '../hooks/useCreateWorkspace';
-import { useDebouncedState } from '@yaakapp-internal/ui';
+import { Icon, useDebouncedState } from '@yaakapp-internal/ui';
 import { useEnvironmentsBreakdown } from '../hooks/useEnvironmentsBreakdown';
 import { useGrpcRequestActions } from '../hooks/useGrpcRequestActions';
 import type { HotkeyAction } from '../hooks/useHotKey';
@@ -50,7 +50,6 @@ import { Button } from './core/Button';
 import { Heading } from './core/Heading';
 import { Hotkey } from './core/Hotkey';
 import { HttpMethodTag } from './core/HttpMethodTag';
-import { Icon } from './core/Icon';
 import { PlainInput } from './core/PlainInput';
 
 interface CommandPaletteGroup {

apps/yaak-client/components/CookieDropdown.tsx

@@ -9,7 +9,7 @@ import { showPrompt } from '../lib/prompt';
 import { setWorkspaceSearchParams } from '../lib/setWorkspaceSearchParams';
 import { CookieDialog } from './CookieDialog';
 import { Dropdown, type DropdownItem } from './core/Dropdown';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { InlineCode } from './core/InlineCode';
 

apps/yaak-client/components/EnvironmentActionsDropdown.tsx

@@ -8,7 +8,7 @@ import type { ButtonProps } from './core/Button';
 import { Button } from './core/Button';
 import type { DropdownItem } from './core/Dropdown';
 import { Dropdown } from './core/Dropdown';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { EnvironmentColorIndicator } from './EnvironmentColorIndicator';
 
 type Props = {

apps/yaak-client/components/EnvironmentEditDialog.tsx

@@ -15,7 +15,7 @@ import { resolvedModelName } from '../lib/resolvedModelName';
 import { showColorPicker } from '../lib/showColorPicker';
 import { Banner } from './core/Banner';
 import type { ContextMenuProps, DropdownItem } from './core/Dropdown';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { IconTooltip } from './core/IconTooltip';
 import { InlineCode } from './core/InlineCode';

apps/yaak-client/components/FolderLayout.tsx

@@ -15,9 +15,8 @@ import { Button } from './core/Button';
 import { Heading } from './core/Heading';
 import { HttpResponseDurationTag } from './core/HttpResponseDurationTag';
 import { HttpStatusTag } from './core/HttpStatusTag';
-import { Icon } from './core/Icon';
+import { Icon, LoadingIcon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
-import { LoadingIcon } from './core/LoadingIcon';
 import { Separator } from './core/Separator';
 import { SizeTag } from './core/SizeTag';
 import { HStack } from './core/Stacks';

apps/yaak-client/components/FolderSettingsDialog.tsx

@@ -15,7 +15,7 @@ import { hideDialog } from '../lib/dialog';
 import { CopyIconButton } from './CopyIconButton';
 import { Button } from './core/Button';
 import { CountBadge } from './core/CountBadge';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { InlineCode } from './core/InlineCode';
 import { Input } from './core/Input';
 import { Link } from './core/Link';

apps/yaak-client/components/GrpcProtoSelectionDialog.tsx

@@ -6,7 +6,7 @@ import { useGrpcProtoFiles } from '../hooks/useGrpcProtoFiles';
 import { pluralizeCount } from '../lib/pluralize';
 import { Banner } from './core/Banner';
 import { Button } from './core/Button';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { InlineCode } from './core/InlineCode';
 import { Link } from './core/Link';

apps/yaak-client/components/GrpcRequestPane.tsx

@@ -11,7 +11,7 @@ import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
 import { resolvedModelName } from '../lib/resolvedModelName';
 import { Button } from './core/Button';
 import { CountBadge } from './core/CountBadge';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { PlainInput } from './core/PlainInput';
 import { RadioDropdown } from './core/RadioDropdown';

apps/yaak-client/components/GrpcResponsePane.tsx

@@ -14,9 +14,8 @@ import { Editor } from './core/Editor/LazyEditor';
 import { EventDetailHeader, EventViewer } from './core/EventViewer';
 import { EventViewerRow } from './core/EventViewerRow';
 import { HotkeyList } from './core/HotkeyList';
-import { Icon, type IconProps } from './core/Icon';
+import { Icon, LoadingIcon, type IconProps } from '@yaakapp-internal/ui';
 import { KeyValueRow, KeyValueRows } from './core/KeyValueRow';
-import { LoadingIcon } from './core/LoadingIcon';
 import { HStack, VStack } from './core/Stacks';
 import { EmptyStateText } from './EmptyStateText';
 import { ErrorBoundary } from './ErrorBoundary';

apps/yaak-client/components/HttpAuthenticationEditor.tsx

@@ -14,7 +14,7 @@ import { useInheritedAuthentication } from '../hooks/useInheritedAuthentication'
 import { useRenderTemplate } from '../hooks/useRenderTemplate';
 import { resolvedModelName } from '../lib/resolvedModelName';
 import { Dropdown, type DropdownItem } from './core/Dropdown';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { InlineCode } from './core/InlineCode';
 import { Input, type InputProps } from './core/Input';

apps/yaak-client/components/HttpResponsePane.tsx

@@ -18,8 +18,7 @@ import { CountBadge } from './core/CountBadge';
 import { HotkeyList } from './core/HotkeyList';
 import { HttpResponseDurationTag } from './core/HttpResponseDurationTag';
 import { HttpStatusTag } from './core/HttpStatusTag';
-import { Icon } from './core/Icon';
-import { LoadingIcon } from './core/LoadingIcon';
+import { Icon, LoadingIcon } from '@yaakapp-internal/ui';
 import { PillButton } from './core/PillButton';
 import { SizeTag } from './core/SizeTag';
 import { HStack, VStack } from './core/Stacks';

apps/yaak-client/components/HttpResponseTimeline.tsx

@@ -9,7 +9,7 @@ import { Editor } from './core/Editor/LazyEditor';
 import { type EventDetailAction, EventDetailHeader, EventViewer } from './core/EventViewer';
 import { EventViewerRow } from './core/EventViewerRow';
 import { HttpStatusTagRaw } from './core/HttpStatusTag';
-import { Icon, type IconProps } from './core/Icon';
+import { Icon, type IconProps } from '@yaakapp-internal/ui';
 import { KeyValueRow, KeyValueRows } from './core/KeyValueRow';
 import type { TimelineViewMode } from './HttpResponsePane';
 

apps/yaak-client/components/ImportCurlButton.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { useImportCurl } from '../hooks/useImportCurl';
 import { useWindowFocus } from '../hooks/useWindowFocus';
 import { Button } from './core/Button';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 
 export function ImportCurlButton() {
   const focused = useWindowFocus();

apps/yaak-client/components/LicenseBadge.tsx

@@ -12,7 +12,7 @@ import { jotaiStore } from '../lib/jotai';
 import { CargoFeature } from './CargoFeature';
 import type { ButtonProps } from './core/Button';
 import { Dropdown, type DropdownItem } from './core/Dropdown';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { PillButton } from './core/PillButton';
 
 const dismissedAtom = atomWithKVStorage<string | null>('dismissed_license_expired', null);

apps/yaak-client/components/RecentGrpcConnectionsDropdown.tsx

@@ -4,7 +4,7 @@ import { formatDistanceToNowStrict } from 'date-fns';
 import { useDeleteGrpcConnections } from '../hooks/useDeleteGrpcConnections';
 import { pluralizeCount } from '../lib/pluralize';
 import { Dropdown } from './core/Dropdown';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { HStack } from './core/Stacks';
 

apps/yaak-client/components/RecentHttpResponsesDropdown.tsx

@@ -6,7 +6,7 @@ import { useSaveResponse } from '../hooks/useSaveResponse';
 import { pluralize } from '../lib/pluralize';
 import { Dropdown } from './core/Dropdown';
 import { HttpStatusTag } from './core/HttpStatusTag';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { HStack } from './core/Stacks';
 

apps/yaak-client/components/RecentWebsocketConnectionsDropdown.tsx

@@ -4,7 +4,7 @@ import { formatDistanceToNowStrict } from 'date-fns';
 import { deleteWebsocketConnections } from '../commands/deleteWebsocketConnections';
 import { pluralizeCount } from '../lib/pluralize';
 import { Dropdown } from './core/Dropdown';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { HStack } from './core/Stacks';
 

apps/yaak-client/components/RequestBodyViewer.tsx

@@ -2,7 +2,7 @@ import type { HttpResponse } from '@yaakapp-internal/models';
 import { lazy, Suspense } from 'react';
 import { useHttpRequestBody } from '../hooks/useHttpRequestBody';
 import { getMimeTypeFromContentType, languageFromContentType } from '../lib/contentType';
-import { LoadingIcon } from './core/LoadingIcon';
+import { LoadingIcon } from '@yaakapp-internal/ui';
 import { EmptyStateText } from './EmptyStateText';
 import { AudioViewer } from './responseViewers/AudioViewer';
 import { CsvViewer } from './responseViewers/CsvViewer';

apps/yaak-client/components/RequestMethodDropdown.tsx

@@ -6,7 +6,7 @@ import { showPrompt } from '../lib/prompt';
 import { Button } from './core/Button';
 import type { DropdownItem } from './core/Dropdown';
 import { HttpMethodTag, HttpMethodTagRaw } from './core/HttpMethodTag';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import type { RadioDropdownItem } from './core/RadioDropdown';
 import { RadioDropdown } from './core/RadioDropdown';
 

apps/yaak-client/components/Settings/Settings.tsx

@@ -9,10 +9,9 @@ import { useKeyPressEvent } from 'react-use';
 import { appInfo } from '../../lib/appInfo';
 import { capitalize } from '../../lib/capitalize';
 import { CountBadge } from '../core/CountBadge';
-import { Icon } from '../core/Icon';
 import { HStack } from '../core/Stacks';
 import { TabContent, type TabItem, Tabs } from '../core/Tabs/Tabs';
-import { HeaderSize } from '@yaakapp-internal/ui';
+import { HeaderSize, Icon } from '@yaakapp-internal/ui';
 import { SettingsCertificates } from './SettingsCertificates';
 import { SettingsGeneral } from './SettingsGeneral';
 import { SettingsHotkeys } from './SettingsHotkeys';

apps/yaak-client/components/Settings/SettingsHotkeys.tsx

@@ -18,7 +18,7 @@ import { Button } from '../core/Button';
 import { Dropdown, type DropdownItem } from '../core/Dropdown';
 import { Heading } from '../core/Heading';
 import { HotkeyRaw } from '../core/Hotkey';
-import { Icon } from '../core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from '../core/IconButton';
 import { PlainInput } from '../core/PlainInput';
 import { HStack, VStack } from '../core/Stacks';

apps/yaak-client/components/Settings/SettingsInterface.tsx

@@ -14,7 +14,7 @@ import { CargoFeature } from '../CargoFeature';
 import { Button } from '../core/Button';
 import { Checkbox } from '../core/Checkbox';
 import { Heading } from '../core/Heading';
-import { Icon } from '../core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { Link } from '../core/Link';
 import { Select } from '../core/Select';
 import { HStack, VStack } from '../core/Stacks';

apps/yaak-client/components/Settings/SettingsLicense.tsx

@@ -8,7 +8,7 @@ import { pluralizeCount } from '../../lib/pluralize';
 import { CargoFeature } from '../CargoFeature';
 import { Banner } from '../core/Banner';
 import { Button } from '../core/Button';
-import { Icon } from '../core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { Link } from '../core/Link';
 import { PlainInput } from '../core/PlainInput';
 import { Separator } from '../core/Separator';

apps/yaak-client/components/Settings/SettingsPlugins.tsx

@@ -12,7 +12,7 @@ import {
 import classNames from 'classnames';
 import { useAtomValue } from 'jotai';
 import { useState } from 'react';
-import { useDebouncedValue } from '@yaakapp-internal/ui';
+import { Icon, LoadingIcon, useDebouncedValue } from '@yaakapp-internal/ui';
 import { useInstallPlugin } from '../../hooks/useInstallPlugin';
 import { usePluginInfo } from '../../hooks/usePluginInfo';
 import { usePluginsKey, useRefreshPlugins } from '../../hooks/usePlugins';
@@ -21,11 +21,9 @@ import { minPromiseMillis } from '../../lib/minPromiseMillis';
 import { Button } from '../core/Button';
 import { Checkbox } from '../core/Checkbox';
 import { CountBadge } from '../core/CountBadge';
-import { Icon } from '../core/Icon';
 import { IconButton } from '../core/IconButton';
 import { InlineCode } from '../core/InlineCode';
 import { Link } from '../core/Link';
-import { LoadingIcon } from '../core/LoadingIcon';
 import { PlainInput } from '../core/PlainInput';
 import { HStack } from '../core/Stacks';
 import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '../core/Table';

apps/yaak-client/components/Settings/SettingsTheme.tsx

@@ -6,8 +6,7 @@ import { useResolvedAppearance } from '../../hooks/useResolvedAppearance';
 import { useResolvedTheme } from '../../hooks/useResolvedTheme';
 import type { ButtonProps } from '../core/Button';
 import { Heading } from '../core/Heading';
-import type { IconProps } from '../core/Icon';
-import { Icon } from '../core/Icon';
+import { Icon, type IconProps } from '@yaakapp-internal/ui';
 import { IconButton } from '../core/IconButton';
 import { Link } from '../core/Link';
 import type { SelectProps } from '../core/Select';

apps/yaak-client/components/SettingsDropdown.tsx

@@ -9,7 +9,7 @@ import { showDialog } from '../lib/dialog';
 import { importData } from '../lib/importData';
 import type { DropdownRef } from './core/Dropdown';
 import { Dropdown } from './core/Dropdown';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { KeyboardShortcutsDialog } from './KeyboardShortcutsDialog';
 

apps/yaak-client/components/Sidebar.tsx

@@ -54,12 +54,11 @@ import { filter } from './core/Editor/filter/extension';
 import { evaluate, parseQuery } from './core/Editor/filter/query';
 import { HttpMethodTag } from './core/HttpMethodTag';
 import { HttpStatusTag } from './core/HttpStatusTag';
-import { Icon } from './core/Icon';
+import { Icon, LoadingIcon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { InlineCode } from './core/InlineCode';
 import type { InputHandle } from './core/Input';
 import { Input } from './core/Input';
-import { LoadingIcon } from './core/LoadingIcon';
 import { collapsedFamily, isSelectedFamily, selectedIdsFamily } from './core/tree/atoms';
 import type { TreeNode } from './core/tree/common';
 import type { TreeHandle, TreeProps } from './core/tree/Tree';

apps/yaak-client/components/SwitchWorkspaceDialog.tsx

@@ -5,7 +5,7 @@ import { useState } from 'react';
 import { switchWorkspace } from '../commands/switchWorkspace';
 import { Button } from './core/Button';
 import { Checkbox } from './core/Checkbox';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { InlineCode } from './core/InlineCode';
 import { HStack, VStack } from './core/Stacks';
 

apps/yaak-client/components/TemplateFunctionDialog.tsx

@@ -28,7 +28,7 @@ import { Button } from './core/Button';
 import { collectArgumentValues } from './core/Editor/twig/util';
 import { IconButton } from './core/IconButton';
 import { InlineCode } from './core/InlineCode';
-import { LoadingIcon } from './core/LoadingIcon';
+import { LoadingIcon } from '@yaakapp-internal/ui';
 import { PlainInput } from './core/PlainInput';
 import { HStack } from './core/Stacks';
 import { DYNAMIC_FORM_NULL_ARG, DynamicForm } from './DynamicForm';

apps/yaak-client/components/UrlBar.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import type { FormEvent, ReactNode } from 'react';
 import { memo, useCallback, useRef, useState } from 'react';
 import { useHotKey } from '../hooks/useHotKey';
-import type { IconProps } from './core/Icon';
+import type { IconProps } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import type { InputHandle, InputProps } from './core/Input';
 import { Input } from './core/Input';

apps/yaak-client/components/WebsocketResponsePane.tsx

@@ -16,8 +16,7 @@ import { Editor } from './core/Editor/LazyEditor';
 import { type EventDetailAction, EventDetailHeader, EventViewer } from './core/EventViewer';
 import { EventViewerRow } from './core/EventViewerRow';
 import { HotkeyList } from './core/HotkeyList';
-import { Icon } from './core/Icon';
-import { LoadingIcon } from './core/LoadingIcon';
+import { Icon, LoadingIcon } from '@yaakapp-internal/ui';
 import { HStack, VStack } from './core/Stacks';
 import { WebsocketStatusTag } from './core/WebsocketStatusTag';
 import { EmptyStateText } from './EmptyStateText';

apps/yaak-client/components/WorkspaceActionsDropdown.tsx

@@ -22,7 +22,7 @@ import { CloneGitRepositoryDialog } from './CloneGitRepositoryDialog';
 import type { ButtonProps } from './core/Button';
 import { Button } from './core/Button';
 import type { DropdownItem } from './core/Dropdown';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import type { RadioDropdownItem } from './core/RadioDropdown';
 import { RadioDropdown } from './core/RadioDropdown';
 import { SwitchWorkspaceDialog } from './SwitchWorkspaceDialog';

apps/yaak-client/components/WorkspaceHeader.tsx

@@ -6,7 +6,7 @@ import { useToggleCommandPalette } from '../hooks/useToggleCommandPalette';
 import { workspaceLayoutAtom } from '../lib/atoms';
 import { setupOrConfigureEncryption } from '../lib/setupOrConfigureEncryption';
 import { CookieDropdown } from './CookieDropdown';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { PillButton } from './core/PillButton';
 import { HStack } from './core/Stacks';

apps/yaak-client/components/core/Button.tsx

@@ -4,8 +4,7 @@ import type { HTMLAttributes, ReactNode } from 'react';
 import { forwardRef, useImperativeHandle, useRef } from 'react';
 import type { HotkeyAction } from '../../hooks/useHotKey';
 import { useFormattedHotkey, useHotKey } from '../../hooks/useHotKey';
-import { Icon } from './Icon';
-import { LoadingIcon } from './LoadingIcon';
+import { Icon, LoadingIcon } from '@yaakapp-internal/ui';
 
 export type ButtonProps = Omit<HTMLAttributes<HTMLButtonElement>, 'color' | 'onChange'> & {
   innerClassName?: string;

apps/yaak-client/components/core/Checkbox.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
-import { Icon } from './Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconTooltip } from './IconTooltip';
 import { HStack } from './Stacks';
 

apps/yaak-client/components/core/ColorPicker.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { useState } from 'react';
 import { HexColorPicker } from 'react-colorful';
 import { useRandomKey } from '../../hooks/useRandomKey';
-import { Icon } from './Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { PlainInput } from './PlainInput';
 
 interface Props {

apps/yaak-client/components/core/Dropdown.tsx

@@ -35,8 +35,7 @@ import { ErrorBoundary } from '../ErrorBoundary';
 import { Overlay } from '../Overlay';
 import { Button } from './Button';
 import { Hotkey } from './Hotkey';
-import { Icon, type IconProps } from './Icon';
-import { LoadingIcon } from './LoadingIcon';
+import { Icon, LoadingIcon, type IconProps } from '@yaakapp-internal/ui';
 import { Separator } from './Separator';
 import { HStack, VStack } from './Stacks';
 

apps/yaak-client/components/core/Icon.tsx

@@ -1,326 +0,0 @@
-import type { Color } from '@yaakapp-internal/plugins';
-import classNames from 'classnames';
-import {
-  AlarmClockIcon,
-  AlertTriangleIcon,
-  ArchiveIcon,
-  ArrowBigDownDashIcon,
-  ArrowBigLeftDashIcon,
-  ArrowBigRightDashIcon,
-  ArrowBigRightIcon,
-  ArrowBigUpDashIcon,
-  ArrowDownIcon,
-  ArrowDownToDotIcon,
-  ArrowDownToLineIcon,
-  ArrowLeftIcon,
-  ArrowRightCircleIcon,
-  ArrowRightIcon,
-  ArrowUpDownIcon,
-  ArrowUpFromDotIcon,
-  ArrowUpFromLineIcon,
-  ArrowUpIcon,
-  BadgeCheckIcon,
-  BookOpenText,
-  BoxIcon,
-  CakeIcon,
-  CheckCircleIcon,
-  CheckIcon,
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  ChevronsDownUpIcon,
-  ChevronsUpDownIcon,
-  CircleAlertIcon,
-  CircleDashedIcon,
-  CircleDollarSignIcon,
-  CircleFadingArrowUpIcon,
-  CircleHelpIcon,
-  CircleOffIcon,
-  ClipboardPasteIcon,
-  ClockIcon,
-  CodeIcon,
-  Columns2Icon,
-  CommandIcon,
-  CookieIcon,
-  CopyCheck,
-  CopyIcon,
-  CornerRightDownIcon,
-  CornerRightUpIcon,
-  CreditCardIcon,
-  CrosshairIcon,
-  DotIcon,
-  DownloadIcon,
-  EllipsisIcon,
-  EllipsisVerticalIcon,
-  ExpandIcon,
-  ExternalLinkIcon,
-  EyeIcon,
-  EyeOffIcon,
-  FileCodeIcon,
-  FileIcon,
-  FileTextIcon,
-  FilterIcon,
-  FlameIcon,
-  FlaskConicalIcon,
-  FolderCodeIcon,
-  FolderCogIcon,
-  FolderDownIcon,
-  FolderGitIcon,
-  FolderIcon,
-  FolderInputIcon,
-  FolderOpenIcon,
-  FolderOutputIcon,
-  FolderSymlinkIcon,
-  FolderSyncIcon,
-  FolderUpIcon,
-  GiftIcon,
-  GitBranchIcon,
-  GitBranchPlusIcon,
-  GitCommitIcon,
-  GitCommitVerticalIcon,
-  GitForkIcon,
-  GitPullRequestIcon,
-  GlobeIcon,
-  GripVerticalIcon,
-  HandIcon,
-  HardDriveDownloadIcon,
-  HistoryIcon,
-  HomeIcon,
-  ImportIcon,
-  InfoIcon,
-  KeyboardIcon,
-  KeyRoundIcon,
-  LockIcon,
-  LockOpenIcon,
-  MergeIcon,
-  MessageSquare,
-  MinusCircleIcon,
-  MinusIcon,
-  MoonIcon,
-  MoreVerticalIcon,
-  PaletteIcon,
-  PanelLeftCloseIcon,
-  PanelLeftOpenIcon,
-  PencilIcon,
-  PinIcon,
-  PinOffIcon,
-  Plug,
-  PlusCircleIcon,
-  PlusIcon,
-  PuzzleIcon,
-  RefreshCcwIcon,
-  RefreshCwIcon,
-  RocketIcon,
-  RotateCcwIcon,
-  Rows2Icon,
-  SaveIcon,
-  SearchIcon,
-  SendHorizontalIcon,
-  SettingsIcon,
-  ShieldAlertIcon,
-  ShieldCheckIcon,
-  ShieldIcon,
-  ShieldOffIcon,
-  SparklesIcon,
-  SquareCheckIcon,
-  SquareIcon,
-  SquareTerminalIcon,
-  SunIcon,
-  TableIcon,
-  Trash2Icon,
-  UploadIcon,
-  VariableIcon,
-  Wand2Icon,
-  WifiIcon,
-  WrenchIcon,
-  XIcon,
-} from 'lucide-react';
-import type { CSSProperties, HTMLAttributes } from 'react';
-import { memo } from 'react';
-
-const icons = {
-  alarm_clock: AlarmClockIcon,
-  alert_triangle: AlertTriangleIcon,
-  archive: ArchiveIcon,
-  arrow_big_down_dash: ArrowBigDownDashIcon,
-  arrow_big_left_dash: ArrowBigLeftDashIcon,
-  arrow_big_right: ArrowBigRightIcon,
-  arrow_big_right_dash: ArrowBigRightDashIcon,
-  arrow_big_up_dash: ArrowBigUpDashIcon,
-  arrow_down: ArrowDownIcon,
-  arrow_down_to_dot: ArrowDownToDotIcon,
-  arrow_down_to_line: ArrowDownToLineIcon,
-  arrow_left: ArrowLeftIcon,
-  arrow_right: ArrowRightIcon,
-  arrow_right_circle: ArrowRightCircleIcon,
-  arrow_up: ArrowUpIcon,
-  arrow_up_down: ArrowUpDownIcon,
-  arrow_up_from_dot: ArrowUpFromDotIcon,
-  arrow_up_from_line: ArrowUpFromLineIcon,
-  badge_check: BadgeCheckIcon,
-  book_open_text: BookOpenText,
-  box: BoxIcon,
-  cake: CakeIcon,
-  chat: MessageSquare,
-  check: CheckIcon,
-  check_circle: CheckCircleIcon,
-  check_square_checked: SquareCheckIcon,
-  check_square_unchecked: SquareIcon,
-  chevron_down: ChevronDownIcon,
-  chevron_left: ChevronLeftIcon,
-  chevrons_up_down: ChevronsUpDownIcon,
-  chevrons_down_up: ChevronsDownUpIcon,
-  chevron_right: ChevronRightIcon,
-  circle_alert: CircleAlertIcon,
-  circle_dashed: CircleDashedIcon,
-  circle_dollar_sign: CircleDollarSignIcon,
-  circle_fading_arrow_up: CircleFadingArrowUpIcon,
-  clock: ClockIcon,
-  code: CodeIcon,
-  columns_2: Columns2Icon,
-  command: CommandIcon,
-  cookie: CookieIcon,
-  copy: CopyIcon,
-  copy_check: CopyCheck,
-  corner_right_down: CornerRightDownIcon,
-  corner_right_up: CornerRightUpIcon,
-  credit_card: CreditCardIcon,
-  crosshair: CrosshairIcon,
-  dot: DotIcon,
-  download: DownloadIcon,
-  ellipsis: EllipsisIcon,
-  ellipsis_vertical: EllipsisVerticalIcon,
-  expand: ExpandIcon,
-  external_link: ExternalLinkIcon,
-  eye: EyeIcon,
-  eye_closed: EyeOffIcon,
-  file: FileIcon,
-  file_code: FileCodeIcon,
-  file_text: FileTextIcon,
-  filter: FilterIcon,
-  flame: FlameIcon,
-  flask: FlaskConicalIcon,
-  folder: FolderIcon,
-  folder_code: FolderCodeIcon,
-  folder_cog: FolderCogIcon,
-  folder_git: FolderGitIcon,
-  folder_input: FolderInputIcon,
-  folder_open: FolderOpenIcon,
-  folder_output: FolderOutputIcon,
-  folder_symlink: FolderSymlinkIcon,
-  folder_sync: FolderSyncIcon,
-  folder_down: FolderDownIcon,
-  folder_up: FolderUpIcon,
-  gift: GiftIcon,
-  git_branch: GitBranchIcon,
-  git_branch_plus: GitBranchPlusIcon,
-  git_commit: GitCommitIcon,
-  git_commit_vertical: GitCommitVerticalIcon,
-  git_fork: GitForkIcon,
-  git_pull_request: GitPullRequestIcon,
-  globe: GlobeIcon,
-  grip_vertical: GripVerticalIcon,
-  circle_off: CircleOffIcon,
-  hand: HandIcon,
-  hard_drive_download: HardDriveDownloadIcon,
-  help: CircleHelpIcon,
-  history: HistoryIcon,
-  house: HomeIcon,
-  import: ImportIcon,
-  info: InfoIcon,
-  key_round: KeyRoundIcon,
-  keyboard: KeyboardIcon,
-  left_panel_hidden: PanelLeftOpenIcon,
-  left_panel_visible: PanelLeftCloseIcon,
-  lock: LockIcon,
-  lock_open: LockOpenIcon,
-  magic_wand: Wand2Icon,
-  merge: MergeIcon,
-  minus: MinusIcon,
-  minus_circle: MinusCircleIcon,
-  moon: MoonIcon,
-  more_vertical: MoreVerticalIcon,
-  palette: PaletteIcon,
-  paste: ClipboardPasteIcon,
-  pencil: PencilIcon,
-  pin: PinIcon,
-  plug: Plug,
-  plus: PlusIcon,
-  plus_circle: PlusCircleIcon,
-  puzzle: PuzzleIcon,
-  refresh: RefreshCwIcon,
-  rocket: RocketIcon,
-  rotate_ccw: RotateCcwIcon,
-  rows_2: Rows2Icon,
-  save: SaveIcon,
-  search: SearchIcon,
-  send_horizontal: SendHorizontalIcon,
-  settings: SettingsIcon,
-  shield: ShieldIcon,
-  shield_check: ShieldCheckIcon,
-  shield_off: ShieldOffIcon,
-  sparkles: SparklesIcon,
-  square_terminal: SquareTerminalIcon,
-  sun: SunIcon,
-  table: TableIcon,
-  text: FileTextIcon,
-  trash: Trash2Icon,
-  unpin: PinOffIcon,
-  update: RefreshCcwIcon,
-  upload: UploadIcon,
-  variable: VariableIcon,
-  wifi: WifiIcon,
-  wrench: WrenchIcon,
-  x: XIcon,
-  _unknown: ShieldAlertIcon,
-
-  empty: (props: HTMLAttributes<HTMLSpanElement>) => <div {...props} />,
-};
-
-export interface IconProps {
-  icon: keyof typeof icons;
-  className?: string;
-  style?: CSSProperties;
-  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  spin?: boolean;
-  title?: string;
-  color?: Color | 'custom' | 'default';
-}
-
-export const Icon = memo(function Icon({
-  icon,
-  color = 'default',
-  spin,
-  size = 'md',
-  style,
-  className,
-  title,
-}: IconProps) {
-  const Component = icons[icon] ?? icons._unknown;
-  return (
-    <Component
-      style={style}
-      title={title}
-      className={classNames(
-        className,
-        !spin && 'transform-gpu',
-        spin && 'animate-spin',
-        'flex-shrink-0',
-        size === 'xl' && 'h-6 w-6',
-        size === 'lg' && 'h-5 w-5',
-        size === 'md' && 'h-4 w-4',
-        size === 'sm' && 'h-3.5 w-3.5',
-        size === 'xs' && 'h-3 w-3',
-        size === '2xs' && 'h-2.5 w-2.5',
-        color === 'default' && 'inherit',
-        color === 'danger' && 'text-danger',
-        color === 'warning' && 'text-warning',
-        color === 'notice' && 'text-notice',
-        color === 'info' && 'text-info',
-        color === 'success' && 'text-success',
-        color === 'primary' && 'text-primary',
-        color === 'secondary' && 'text-secondary',
-      )}
-    />
-  );
-});

apps/yaak-client/components/core/IconButton.tsx

@@ -4,9 +4,7 @@ import { forwardRef, useCallback } from 'react';
 import { useTimedBoolean } from '../../hooks/useTimedBoolean';
 import type { ButtonProps } from './Button';
 import { Button } from './Button';
-import type { IconProps } from './Icon';
-import { Icon } from './Icon';
-import { LoadingIcon } from './LoadingIcon';
+import { Icon, LoadingIcon, type IconProps } from '@yaakapp-internal/ui';
 
 export type IconButtonProps = IconProps &
   ButtonProps & {

apps/yaak-client/components/core/IconTooltip.tsx

@@ -1,5 +1,4 @@
-import type { IconProps } from './Icon';
-import { Icon } from './Icon';
+import { Icon, type IconProps } from '@yaakapp-internal/ui';
 import type { TooltipProps } from './Tooltip';
 import { Tooltip } from './Tooltip';
 

apps/yaak-client/components/core/Input.tsx

@@ -22,8 +22,7 @@ import type { DropdownItem } from './Dropdown';
 import { Dropdown } from './Dropdown';
 import type { EditorProps } from './Editor/Editor';
 import { Editor } from './Editor/LazyEditor';
-import type { IconProps } from './Icon';
-import { Icon } from './Icon';
+import { Icon, type IconProps } from '@yaakapp-internal/ui';
 import { IconButton } from './IconButton';
 import { IconTooltip } from './IconTooltip';
 import { Label } from './Label';

apps/yaak-client/components/core/JsonAttributeTree.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
 import { useMemo, useState } from 'react';
-import { Icon } from './Icon';
+import { Icon } from '@yaakapp-internal/ui';
 
 interface Props {
   depth?: number;

apps/yaak-client/components/core/Link.tsx

@@ -2,7 +2,7 @@ import { Link as RouterLink } from '@tanstack/react-router';
 import classNames from 'classnames';
 import type { HTMLAttributes } from 'react';
 import { appInfo } from '../../lib/appInfo';
-import { Icon } from './Icon';
+import { Icon } from '@yaakapp-internal/ui';
 
 interface Props extends HTMLAttributes<HTMLAnchorElement> {
   href: string;

apps/yaak-client/components/core/LoadingIcon.tsx

@@ -1,35 +0,0 @@
-import classNames from 'classnames';
-
-interface Props {
-  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  className?: string;
-}
-
-export function LoadingIcon({ size = 'md', className }: Props) {
-  const classes = classNames(
-    className,
-    'text-inherit flex-shrink-0',
-    size === 'xl' && 'h-6 w-6',
-    size === 'lg' && 'h-5 w-5',
-    size === 'md' && 'h-4 w-4',
-    size === 'sm' && 'h-3.5 w-3.5',
-    size === 'xs' && 'h-3 w-3',
-    size === '2xs' && 'h-2.5 w-2.5',
-    'animate-spin',
-  );
-
-  return (
-    <div
-      className={classNames(
-        classes,
-        'border-[currentColor] border-b-transparent rounded-full',
-        size === 'xl' && 'border-[0.2rem]',
-        size === 'lg' && 'border-[0.16rem]',
-        size === 'md' && 'border-[0.13rem]',
-        size === 'sm' && 'border-[0.1rem]',
-        size === 'xs' && 'border-[0.08rem]',
-        size === '2xs' && 'border-[0.06rem]',
-      )}
-    />
-  );
-}

apps/yaak-client/components/core/PairEditor.tsx

@@ -28,7 +28,7 @@ import { Dropdown } from './Dropdown';
 import type { EditorProps } from './Editor/Editor';
 import type { GenericCompletionConfig } from './Editor/genericCompletion';
 import { Editor } from './Editor/LazyEditor';
-import { Icon } from './Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './IconButton';
 import type { InputHandle, InputProps } from './Input';
 import { Input } from './Input';

apps/yaak-client/components/core/RadioDropdown.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import { useMemo } from 'react';
 import type { DropdownItem, DropdownItemSeparator, DropdownProps } from './Dropdown';
 import { Dropdown } from './Dropdown';
-import { Icon } from './Icon';
+import { Icon } from '@yaakapp-internal/ui';
 
 export type RadioDropdownItem<T = string | null> =
   | {

apps/yaak-client/components/core/SegmentedControl.tsx

@@ -3,7 +3,7 @@ import { type ReactNode, useRef } from 'react';
 import { useStateWithDeps } from '../../hooks/useStateWithDeps';
 import { generateId } from '../../lib/generateId';
 import { Button } from './Button';
-import type { IconProps } from './Icon';
+import type { IconProps } from '@yaakapp-internal/ui';
 import { IconButton, type IconButtonProps } from './IconButton';
 import { Label } from './Label';
 import { HStack } from './Stacks';

apps/yaak-client/components/core/Tabs/Tabs.tsx

@@ -27,7 +27,7 @@ import { DropMarker } from '../../DropMarker';
 import { ErrorBoundary } from '../../ErrorBoundary';
 import type { ButtonProps } from '../Button';
 import { Button } from '../Button';
-import { Icon } from '../Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import type { RadioDropdownProps } from '../RadioDropdown';
 import { RadioDropdown } from '../RadioDropdown';
 

apps/yaak-client/components/core/Toast.tsx

@@ -4,8 +4,7 @@ import * as m from 'motion/react-m';
 import type { ReactNode } from 'react';
 
 import { useKey } from 'react-use';
-import type { IconProps } from './Icon';
-import { Icon } from './Icon';
+import { Icon, type IconProps } from '@yaakapp-internal/ui';
 import { IconButton } from './IconButton';
 import { VStack } from './Stacks';
 

apps/yaak-client/components/core/tree/TreeItem.tsx

@@ -14,7 +14,7 @@ import { computeSideForDragMove } from '../../../lib/dnd';
 import { jotaiStore } from '../../../lib/jotai';
 import type { ContextMenuProps, DropdownItem } from '../Dropdown';
 import { ContextMenu } from '../Dropdown';
-import { Icon } from '../Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { collapsedFamily, isCollapsedFamily, isLastFocusedFamily, isSelectedFamily } from './atoms';
 import type { TreeNode } from './common';
 import { getNodeKey } from './common';

apps/yaak-client/components/git/GitCommitDialog.tsx

@@ -20,7 +20,7 @@ import { Button } from '../core/Button';
 import type { CheckboxProps } from '../core/Checkbox';
 import { Checkbox } from '../core/Checkbox';
 import { DiffViewer } from '../core/Editor/DiffViewer';
-import { Icon } from '../core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { InlineCode } from '../core/InlineCode';
 import { Input } from '../core/Input';
 import { Separator } from '../core/Separator';

apps/yaak-client/components/git/GitDropdown.tsx

@@ -16,7 +16,7 @@ import { showErrorToast, showToast } from '../../lib/toast';
 import { Banner } from '../core/Banner';
 import type { DropdownItem } from '../core/Dropdown';
 import { Dropdown } from '../core/Dropdown';
-import { Icon } from '../core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { InlineCode } from '../core/InlineCode';
 import { gitCallbacks } from './callbacks';
 import { GitCommitDialog } from './GitCommitDialog';

apps/yaak-client/components/graphql/GraphQLDocsExplorer.tsx

@@ -25,12 +25,11 @@ import type { CSSProperties, HTMLAttributes, KeyboardEvent, ReactNode } from 're
 import { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useClickOutside } from '../../hooks/useClickOutside';
 import { useContainerSize } from '../../hooks/useContainerQuery';
-import { useDebouncedValue } from '@yaakapp-internal/ui';
+import { Icon, useDebouncedValue } from '@yaakapp-internal/ui';
 import { useStateWithDeps } from '../../hooks/useStateWithDeps';
 import { jotaiStore } from '../../lib/jotai';
 import { Banner } from '../core/Banner';
 import { CountBadge } from '../core/CountBadge';
-import { Icon } from '../core/Icon';
 import { IconButton } from '../core/IconButton';
 import { PlainInput } from '../core/PlainInput';
 import { Markdown } from '../Markdown';

apps/yaak-client/components/graphql/GraphQLEditor.tsx

@@ -14,7 +14,7 @@ import { Dropdown } from '../core/Dropdown';
 import type { EditorProps } from '../core/Editor/Editor';
 import { Editor } from '../core/Editor/LazyEditor';
 import { FormattedError } from '../core/FormattedError';
-import { Icon } from '../core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { Separator } from '../core/Separator';
 import { showGraphQLDocExplorerAtom } from './graphqlAtoms';
 

apps/yaak-client/components/responseViewers/BinaryViewer.tsx

@@ -4,7 +4,7 @@ import { getContentTypeFromHeaders } from '../../lib/model_util';
 import { Banner } from '../core/Banner';
 import { Button } from '../core/Button';
 import { InlineCode } from '../core/InlineCode';
-import { LoadingIcon } from '../core/LoadingIcon';
+import { LoadingIcon } from '@yaakapp-internal/ui';
 import { EmptyStateText } from '../EmptyStateText';
 
 interface Props {

apps/yaak-client/components/responseViewers/EventStreamViewer.tsx

@@ -10,7 +10,7 @@ import type { EditorProps } from '../core/Editor/Editor';
 import { Editor } from '../core/Editor/LazyEditor';
 import { EventDetailHeader, EventViewer } from '../core/EventViewer';
 import { EventViewerRow } from '../core/EventViewerRow';
-import { Icon } from '../core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { InlineCode } from '../core/InlineCode';
 import { HStack, VStack } from '../core/Stacks';
 

apps/yaak-client/components/responseViewers/MultipartViewer.tsx

@@ -2,8 +2,7 @@ import { type MultipartPart, parseMultipart } from '@mjackson/multipart-parser';
 import { lazy, Suspense, useMemo } from 'react';
 import { languageFromContentType } from '../../lib/contentType';
 import { Banner } from '../core/Banner';
-import { Icon } from '../core/Icon';
-import { LoadingIcon } from '../core/LoadingIcon';
+import { Icon, LoadingIcon } from '@yaakapp-internal/ui';
 import { TabContent, Tabs } from '../core/Tabs/Tabs';
 import { AudioViewer } from './AudioViewer';
 import { CsvViewer } from './CsvViewer';

apps/yaak-client/hooks/useAuthTab.tsx

@@ -3,7 +3,7 @@ import { modelTypeLabel, patchModel } from '@yaakapp-internal/models';
 import { useMemo } from 'react';
 import { openFolderSettings } from '../commands/openFolderSettings';
 import { openWorkspaceSettings } from '../commands/openWorkspaceSettings';
-import { Icon } from '../components/core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconTooltip } from '../components/core/IconTooltip';
 import { InlineCode } from '../components/core/InlineCode';
 import { HStack } from '../components/core/Stacks';

apps/yaak-client/hooks/useCreateDropdownItems.tsx

@@ -4,7 +4,7 @@ import { useAtomValue } from 'jotai';
 import { useMemo } from 'react';
 import { createFolder } from '../commands/commands';
 import type { DropdownItem } from '../components/core/Dropdown';
-import { Icon } from '../components/core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { createRequestAndNavigate } from '../lib/createRequestAndNavigate';
 import { generateId } from '../lib/generateId';
 import { BODY_TYPE_GRAPHQL } from '../lib/model_util';

apps/yaak-client/lib/initGlobalListeners.tsx

@@ -17,7 +17,7 @@ import type {
 import { openSettings } from "../commands/openSettings";
 import { Button } from "../components/core/Button";
 import { ButtonInfiniteLoading } from "../components/core/ButtonInfiniteLoading";
-import { Icon } from "../components/core/Icon";
+import { Icon } from "@yaakapp-internal/ui";
 import { HStack, VStack } from "../components/core/Stacks";
 
 // Listen for toasts