refactor: Consolidate icon imports across components and streamline import statements for improved readability

src/app/features/settings/Settings.tsx

@@ -1,19 +1,6 @@
 import React, { useMemo, useState } from 'react';
-import {
-  Avatar,
-  Box,
-  Button,
-  config,
-  Icon,
-  IconButton,
-  Icons,
-  IconSrc,
-  MenuItem,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Text,
-} from 'folds';
+import { Avatar, Box, Button, config, IconButton, MenuItem, Overlay, OverlayBackdrop, OverlayCenter, Text } from 'folds';
+import { Icon, Icons, IconSrc } from '../../components/icons';
 import FocusTrap from 'focus-trap-react';
 import { General } from './general';
 import { PageNav, PageNavContent, PageNavHeader, PageRoot } from '../../components/page';

src/app/features/settings/about/About.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { getVersion } from '@tauri-apps/api/app';
-import { Box, Text, IconButton, Icon, Icons, Scroll, Button, config, toRem } from 'folds';
+import { Box, Text, IconButton, Scroll, Button, config, toRem } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';

src/app/features/settings/account/Account.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Box, Text, IconButton, Icon, Icons, Scroll } from 'folds';
+import { Box, Text, IconButton, Scroll } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { MatrixId } from './MatrixId';
 import { Profile } from './Profile';

src/app/features/settings/account/IgnoredUserList.tsx

@@ -1,5 +1,6 @@
 import React, { ChangeEventHandler, FormEventHandler, useCallback, useState } from 'react';
-import { Box, Button, Chip, Icon, IconButton, Icons, Input, Spinner, Text, config } from 'folds';
+import { Box, Button, Chip, IconButton, Input, Spinner, Text, config } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';

src/app/features/settings/account/Profile.tsx

@@ -9,26 +9,8 @@ import React, {
   useState,
 } from 'react';
 import classNames from 'classnames';
-import {
-  Box,
-  Text,
-  IconButton,
-  Icon,
-  Icons,
-  Input,
-  Avatar,
-  Button,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Modal,
-  Dialog,
-  Header,
-  config,
-  Spinner,
-  color,
-  toRem,
-} from 'folds';
+import { Box, Text, IconButton, Input, Avatar, Button, Overlay, OverlayBackdrop, OverlayCenter, Modal, Dialog, Header, config, Spinner, color, toRem } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 import { HexColorPicker, RgbaColorPicker, RgbaColor } from 'react-colorful';
 import FocusTrap from 'focus-trap-react';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';

src/app/features/settings/audio/Audio.tsx

@@ -1,24 +1,7 @@
 /* eslint-disable no-console */
 import React, { useCallback, useEffect, useRef, useState, MouseEventHandler } from 'react';
-import {
-  Box,
-  Button,
-  color,
-  config,
-  Header,
-  Icon,
-  IconButton,
-  Icons,
-  Input,
-  Menu,
-  MenuItem,
-  PopOut,
-  RectCords,
-  Scroll,
-  Switch,
-  Text,
-  toRem,
-} from 'folds';
+import { Box, Button, color, config, Header, IconButton, Input, Menu, MenuItem, PopOut, RectCords, Scroll, Switch, Text, toRem } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 import FocusTrap from 'focus-trap-react';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';

src/app/features/settings/developer-tools/AccountData.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react';
-import { Box, Text, Icon, Icons, Button, MenuItem } from 'folds';
+import { Box, Text, Button, MenuItem } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';

src/app/features/settings/developer-tools/DevelopTools.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react';
-import { Box, Text, IconButton, Icon, Icons, Scroll, Switch, Button } from 'folds';
+import { Box, Text, IconButton, Scroll, Switch, Button } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';

src/app/features/settings/devices/DeviceTile.tsx

@@ -1,20 +1,6 @@
 import React, { FormEventHandler, ReactNode, useCallback, useEffect, useState } from 'react';
-import {
-  Box,
-  Text,
-  IconButton,
-  Icon,
-  Icons,
-  Chip,
-  Input,
-  Button,
-  color,
-  Spinner,
-  toRem,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-} from 'folds';
+import { Box, Text, IconButton, Chip, Input, Button, color, Spinner, toRem, Overlay, OverlayBackdrop, OverlayCenter } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 import { CryptoApi } from 'matrix-js-sdk/lib/crypto-api';
 import FocusTrap from 'focus-trap-react';
 import { IMyDevice, MatrixError } from 'matrix-js-sdk';

src/app/features/settings/devices/Devices.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Box, Text, IconButton, Icon, Icons, Scroll } from 'folds';
+import { Box, Text, IconButton, Scroll } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';

src/app/features/settings/devices/LocalBackup.tsx

@@ -1,5 +1,6 @@
 import React, { FormEventHandler, useCallback, useEffect, useState } from 'react';
-import { Box, Button, color, Icon, Icons, Spinner, Text, toRem } from 'folds';
+import { Box, Button, color, Spinner, Text, toRem } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 import FileSaver from 'file-saver';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SettingTile } from '../../../components/setting-tile';

src/app/features/settings/devices/Verification.tsx

@@ -1,23 +1,6 @@
 import React, { MouseEventHandler, useCallback, useState } from 'react';
-import {
-  Badge,
-  Box,
-  Button,
-  Chip,
-  config,
-  Icon,
-  Icons,
-  Spinner,
-  Text,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  IconButton,
-  RectCords,
-  PopOut,
-  Menu,
-  MenuItem,
-} from 'folds';
+import { Badge, Box, Button, Chip, config, Spinner, Text, Overlay, OverlayBackdrop, OverlayCenter, IconButton, RectCords, PopOut, Menu, MenuItem } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 import FocusTrap from 'focus-trap-react';
 import { CryptoApi, VerificationRequest } from 'matrix-js-sdk/lib/crypto-api';
 import { VerificationStatus } from '../../../hooks/useDeviceVerificationStatus';

src/app/features/settings/emojis-stickers/EmojisStickers.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { Box, Text, IconButton, Icon, Icons, Scroll, config, Switch } from 'folds';
+import { Box, Text, IconButton, Scroll, config, Switch } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';
 import { GlobalPacks } from './GlobalPacks';

src/app/features/settings/emojis-stickers/GlobalPacks.tsx

@@ -1,25 +1,6 @@
 import React, { MouseEventHandler, useCallback, useEffect, useMemo, useState } from 'react';
-import {
-  Box,
-  Text,
-  Button,
-  Icon,
-  Icons,
-  IconButton,
-  Avatar,
-  AvatarFallback,
-  config,
-  Spinner,
-  Menu,
-  RectCords,
-  PopOut,
-  Checkbox,
-  toRem,
-  Scroll,
-  Header,
-  Line,
-  Chip,
-} from 'folds';
+import { Box, Text, Button, IconButton, Avatar, AvatarFallback, config, Spinner, Menu, RectCords, PopOut, Checkbox, toRem, Scroll, Header, Line, Chip } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 import FocusTrap from 'focus-trap-react';
 import { useAtomValue } from 'jotai';
 import { Room } from 'matrix-js-sdk';

src/app/features/settings/emojis-stickers/UserPack.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Avatar, AvatarFallback, Box, Button, Icon, Icons, Text } from 'folds';
+import { Avatar, AvatarFallback, Box, Button, Text } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 import { useUserImagePack } from '../../../hooks/useImagePacks';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';

src/app/features/settings/general/General.tsx

@@ -7,27 +7,8 @@ import React, {
   useState,
 } from 'react';
 import dayjs from 'dayjs';
-import {
-  as,
-  Box,
-  Button,
-  Chip,
-  color,
-  config,
-  Header,
-  Icon,
-  IconButton,
-  Icons,
-  Input,
-  Menu,
-  MenuItem,
-  PopOut,
-  RectCords,
-  Scroll,
-  Switch,
-  Text,
-  toRem,
-} from 'folds';
+import { as, Box, Button, Chip, color, config, Header, IconButton, Input, Menu, MenuItem, PopOut, RectCords, Scroll, Switch, Text, toRem } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 import { HexColorPicker } from 'react-colorful';
 import { isKeyHotkey } from 'is-hotkey';
 import FocusTrap from 'focus-trap-react';

src/app/features/settings/notifications/KeywordMessages.tsx

@@ -1,6 +1,7 @@
 import React, { ChangeEventHandler, FormEventHandler, useCallback, useMemo, useState } from 'react';
 import { IPushRule, IPushRules, PushRuleKind } from 'matrix-js-sdk';
-import { Box, Text, Badge, Button, Input, config, IconButton, Icons, Icon, Spinner } from 'folds';
+import { Box, Text, Badge, Button, Input, config, IconButton, Spinner } from 'folds';
+import { Icons, Icon } from '../../../components/icons';
 import { useAccountData } from '../../../hooks/useAccountData';
 import { AccountDataEvent } from '../../../../types/matrix/accountData';
 import { SequenceCard } from '../../../components/sequence-card';

src/app/features/settings/notifications/NotificationModeSwitcher.tsx

@@ -1,16 +1,5 @@
-import {
-  Box,
-  Button,
-  config,
-  Icon,
-  Icons,
-  Menu,
-  MenuItem,
-  PopOut,
-  RectCords,
-  Spinner,
-  Text,
-} from 'folds';
+import { Box, Button, config, Menu, MenuItem, PopOut, RectCords, Spinner, Text } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 import { IPushRule } from 'matrix-js-sdk';
 import React, { MouseEventHandler, useMemo, useState } from 'react';
 import FocusTrap from 'focus-trap-react';

src/app/features/settings/notifications/Notifications.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Box, Text, IconButton, Icon, Icons, Scroll } from 'folds';
+import { Box, Text, IconButton, Scroll } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { SystemNotification } from './SystemNotification';
 import { AllMessagesNotifications } from './AllMessages';

src/app/features/settings/plugins/PluginButtonSlot.tsx

@@ -2,6 +2,7 @@ import React, { useSyncExternalStore } from 'react';
 import { IconButton } from 'folds';
 import * as lucide from 'lucide-react';
 import { UILocation } from '@paarrot/plugin-manager';
+import { Icon, Icons, type IconName } from '../../../components/icons';
 import { pluginRegistry } from './PluginAPI';
 
 // ---------------------------------------------------------------------------
@@ -39,11 +40,6 @@ interface PluginButtonSlotProps {
   location: UILocation;
 }
 
-type LucideIconComponent = React.ComponentType<{
-  size?: number | string;
-  strokeWidth?: number | string;
-}>;
-
 function renderPluginButtonIcon(button: {
   icon?: string;
   lucideIcon?: string;
@@ -54,8 +50,14 @@ function renderPluginButtonIcon(button: {
       ? button.icon.slice('lucide:'.length)
       : undefined);
 
+  if (lucideName && lucideName in Icons) {
+    return <Icon src={Icons[lucideName as IconName]} size="300" />;
+  }
+
   if (lucideName) {
-    const IconComponent = (lucide as Record<string, LucideIconComponent | undefined>)[lucideName];
+    const IconComponent = (lucide as Record<string, React.ComponentType<{ size?: number; strokeWidth?: number }> | undefined>)[
+      lucideName
+    ];
     if (IconComponent) {
       return <IconComponent size={18} strokeWidth={2} aria-hidden />;
     }

src/app/features/settings/plugins/Plugins.tsx

@@ -1,26 +1,6 @@
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import {
-  Avatar,
-  Badge,
-  Box,
-  Button,
-  color,
-  config,
-  Header,
-  Icon,
-  IconButton,
-  Icons,
-  Input,
-  Menu,
-  MenuItem,
-  PopOut,
-  RectCords,
-  Scroll,
-  Spinner,
-  Switch,
-  Text,
-  toRem,
-} from 'folds';
+import { Avatar, Badge, Box, Button, color, config, Header, IconButton, Input, Menu, MenuItem, PopOut, RectCords, Scroll, Spinner, Switch, Text, toRem } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 import { HexColorPicker } from 'react-colorful';
 import FocusTrap from 'focus-trap-react';
 import { Page, PageContent, PageHeader } from '../../../components/page';