Replace react-icons with @react-icons/all-files for better bundling and smaller bundle size

apps/desktop/package.json

@@ -15,14 +15,14 @@
     "@linen/types": "*",
     "@linen/ui": "*",
     "@linen/utilities": "*",
+    "@react-icons/all-files": "^4.1.0",
     "@tauri-apps/api": "^1.1.0",
     "autosize": "^5.0.2",
     "axios": "0.27.2",
     "classnames": "^2.3.2",
     "next": "^13.0.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-icons": "^4.7.1"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^1.1.0",

apps/desktop/src/components/Pages/Inbox/Content/Thread/Header/Title/CheckIcon/index.tsx

@@ -1,4 +1,4 @@
-import { GoCheck } from 'react-icons/go';
+import { GoCheck } from '@react-icons/all-files/go/GoCheck';
 import styles from './index.module.scss';
 
 export default function CheckIcon() {

apps/desktop/src/components/Pages/Inbox/Content/Thread/Header/Title/index.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { GoPencil } from 'react-icons/go';
+import { GoPencil } from '@react-icons/all-files/go/GoPencil';
 import classNames from 'classnames';
 import styles from './index.module.css';
 import { ThreadState } from '@linen/types';

apps/desktop/src/components/Pages/Inbox/Content/Thread/Header/index.tsx

@@ -3,7 +3,10 @@ import Title from './Title';
 import { StickyHeader } from '@linen/ui';
 import classNames from 'classnames';
 import { ThreadState } from '@prisma/client';
-import { GoCheck, GoChevronLeft, GoX, GoSync } from 'react-icons/go';
+import { GoCheck } from '@react-icons/all-files/go/GoCheck';
+import { GoChevronLeft } from '@react-icons/all-files/go/GoChevronLeft';
+import { GoX } from '@react-icons/all-files/go/GoX';
+import { GoSync } from '@react-icons/all-files/go/GoSync';
 import { SerializedThread } from '@linen/types';
 import styles from './index.module.scss';
 

apps/desktop/src/components/Pages/Inbox/Content/Thread/MessageForm/FileInput/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styles from './index.module.scss';
-import { FiUpload } from 'react-icons/fi';
+import { FiUpload } from '@react-icons/all-files/fi/FiUpload';
 
 interface Props {
   id: string;

apps/desktop/src/components/Pages/Inbox/index.tsx

@@ -3,7 +3,7 @@ import styles from './index.module.scss';
 import Title from './Title';
 import Header from './Header';
 import Content from './Content';
-import { FiInbox } from 'react-icons/fi';
+import { FiInbox } from '@react-icons/all-files/fi/FiInbox';
 import { Nav } from '@linen/ui';
 import { CommunityType } from '@linen/types';
 

apps/desktop/src/components/Pages/Splash/index.tsx

@@ -1,7 +1,7 @@
 import styles from './index.module.scss';
 import Logo from '../../Logo/Linen';
 import Button from '../../Button/Gradient';
-import { FiInbox } from 'react-icons/fi';
+import { FiInbox } from '@react-icons/all-files/fi/FiInbox';
 import Link from 'next/link';
 
 export default function SplashPage() {

apps/web/components/Actions/ReminderModal/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { FiClock } from 'react-icons/fi';
+import { FiClock } from '@react-icons/all-files/fi/FiClock';
 import { Button, NativeSelect, Modal } from '@linen/ui';
 import { ReminderTypes } from '@linen/types';
 import styles from './index.module.scss';

apps/web/components/Actions/index.tsx

@@ -14,12 +14,15 @@ import {
   onResolve,
 } from '@linen/types';
 import { copyToClipboard } from '@linen/utilities/clipboard';
-import { GoPin } from 'react-icons/go';
-import { AiOutlinePaperClip, AiOutlineHighlight } from 'react-icons/ai';
-import { RxDragHandleDots2 } from 'react-icons/rx';
-import { FiClock, FiThumbsUp, FiTrash2 } from 'react-icons/fi';
-import { FaVolumeMute } from 'react-icons/fa';
-import { BiMessageCheck } from 'react-icons/bi';
+import { GoPin } from '@react-icons/all-files/go/GoPin';
+import { AiOutlinePaperClip } from '@react-icons/all-files/ai/AiOutlinePaperClip';
+import { AiOutlineHighlight } from '@react-icons/all-files/ai/AiOutlineHighlight';
+import { GrDrag } from '@react-icons/all-files/gr/GrDrag';
+import { FiClock } from '@react-icons/all-files/fi/FiClock';
+import { FiThumbsUp } from '@react-icons/all-files/fi/FiThumbsUp';
+import { FiTrash2 } from '@react-icons/all-files/fi/FiTrash2';
+import { FaVolumeMute } from '@react-icons/all-files/fa/FaVolumeMute';
+import { BiMessageCheck } from '@react-icons/all-files/bi/BiMessageCheck';
 import styles from './index.module.scss';
 import { Mode } from '@linen/hooks/mode';
 import ReminderModal from './ReminderModal';
@@ -264,7 +267,7 @@ export default function Actions({
               mode={mode}
             >
               <Tooltip className={styles.tooltip} text="Move">
-                <RxDragHandleDots2 />
+                <GrDrag />
               </Tooltip>
             </Draggable>
           </li>

apps/web/components/Auth/GitHubButton.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@linen/ui';
-import { GoMarkGithub } from 'react-icons/go';
+import { GoMarkGithub } from '@react-icons/all-files/go/GoMarkGithub';
 import { qs } from '@linen/utilities/url';
 
 export default function GitHubButton({

apps/web/components/Autocomplete/index.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useRef, useCallback, useState } from 'react';
 import debounce from '@linen/utilities/debounce';
 import { TextInput } from '@linen/ui';
-import { AiOutlineSearch, AiOutlineLoading } from 'react-icons/ai';
+import { AiOutlineSearch } from '@react-icons/all-files/ai/AiOutlineSearch';
+import { AiOutlineLoading } from '@react-icons/all-files/ai/AiOutlineLoading';
 import styles from './index.module.css';
 
 export default function Autocomplete({

apps/web/components/GridRow/index.module.scss

@@ -9,23 +9,18 @@
 }
 
 .resolutionLabel {
-  font-size: 10px;
+  align-items: center;
+  display: flex;
+  gap: 0.25rem;
+  font-size: 12px;
   border-radius: 1rem;
-  font-weight: bold;
+  font-weight: 500;
   background-color: $color-green-600;
   color: white;
   margin: 0.5rem 0 0.5rem;
-  padding: 0.25rem 0.5rem;
+  padding: 0.125rem 0.5rem;
   width: fit-content;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-}
-
-.resolutionCheck {
-  margin-right: 3px;
-  font-size: 10px
+  user-select: none;
 }
 
 .row {

apps/web/components/GridRow/index.tsx

@@ -5,7 +5,7 @@ import { Avatar, Message } from '@linen/ui';
 import Actions from 'components/Actions';
 import CheckIcon from 'components/icons/CheckIcon';
 import { format } from '@linen/utilities/date';
-import { BsCheckCircleFill } from 'react-icons/bs';
+import { BsCheck } from '@react-icons/all-files/bs/BsCheck';
 import { Mode } from '@linen/hooks/mode';
 import {
   Permissions,
@@ -84,11 +84,11 @@ export function Row({
   onUnread,
 }: Props) {
   const top = !isPreviousMessageFromSameUser;
-  const isResolution = thread.resolutionId === message.id;
-  const resolutionStyle = isResolution ? styles.resolution : {};
+  const resolution = thread.resolutionId === message.id;
   return (
     <div
-      className={classNames(className, styles.container, resolutionStyle, {
+      className={classNames(className, styles.container, {
+        [styles.resolution]: resolution,
         [styles.top]: top,
       })}
     >
@@ -135,10 +135,10 @@ export function Row({
               currentUser={currentUser}
               onLoad={onLoad}
             />
-            {isResolution && (
+            {resolution && (
               <div className={styles.resolutionLabel}>
-                <BsCheckCircleFill className={styles.resolutionCheck} />
-                <>Resolution</>
+                <BsCheck className={styles.resolutionCheck} />
+                Resolution
               </div>
             )}
             {footer}

apps/web/components/Link/JoinChannelLink/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AiOutlineLink } from 'react-icons/ai';
+import { AiOutlineLink } from '@react-icons/all-files/ai/AiOutlineLink';
 import styles from './index.module.css';
 
 interface Props {

apps/web/components/MessageForm/FileInput/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styles from './index.module.scss';
-import { FiUpload } from 'react-icons/fi';
+import { FiUpload } from '@react-icons/all-files/fi/FiUpload';
 
 interface Props {
   id: string;

apps/web/components/NavBar/Desktop/AddCommunityLink/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styles from './index.module.scss';
-import { FiPlus } from 'react-icons/fi';
+import { FiPlus } from '@react-icons/all-files/fi/FiPlus';
 
 interface Props {
   onClick(): void;

apps/web/components/NavBar/Desktop/NewCommunityModal/index.tsx

@@ -1,6 +1,6 @@
 import { Modal } from '@linen/ui';
 import H3 from 'components/H3';
-import { FiX } from 'react-icons/fi';
+import { FiX } from '@react-icons/all-files/fi/FiX';
 import Form from 'components/Pages/Onboarding/Form';
 
 interface Props {

apps/web/components/NavBar/Desktop/index.tsx

@@ -10,18 +10,16 @@ import Link from 'components/Link/InternalLink';
 import NewChannelModal from 'components/Pages/Channel/Content/NewChannelModal';
 import useWebsockets from '@linen/hooks/websockets';
 import styles from './index.module.scss';
-import {
-  FiInbox,
-  FiBarChart,
-  FiHash,
-  FiSettings,
-  FiSliders,
-  FiDollarSign,
-  FiUsers,
-  FiChevronDown,
-  FiChevronUp,
-  FiFileText,
-} from 'react-icons/fi';
+import { FiInbox } from '@react-icons/all-files/fi/FiInbox';
+import { FiBarChart } from '@react-icons/all-files/fi/FiBarChart';
+import { FiHash } from '@react-icons/all-files/fi/FiHash';
+import { FiSettings } from '@react-icons/all-files/fi/FiSettings';
+import { FiSliders } from '@react-icons/all-files/fi/FiSliders';
+import { FiDollarSign } from '@react-icons/all-files/fi/FiDollarSign';
+import { FiUsers } from '@react-icons/all-files/fi/FiUsers';
+import { FiChevronDown } from '@react-icons/all-files/fi/FiChevronDown';
+import { FiChevronUp } from '@react-icons/all-files/fi/FiChevronUp';
+import { FiFileText } from '@react-icons/all-files/fi/FiFileText';
 import { useRouter } from 'next/router';
 import usePath from 'hooks/path';
 import { Mode } from '@linen/hooks/mode';

apps/web/components/NavBar/Mobile/ChannelSelect/index.tsx

@@ -4,7 +4,7 @@ import { useLinkContext } from '@linen/contexts/Link';
 import { SerializedChannel } from '@linen/types';
 import { Label, NativeSelect } from '@linen/ui';
 import CustomRouterPush from 'components/Link/CustomRouterPush';
-import { FiHash } from 'react-icons/fi';
+import { FiHash } from '@react-icons/all-files/fi/FiHash';
 import styles from './index.module.scss';
 
 interface Props {

apps/web/components/NavBar/Mobile/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import { FiInbox } from 'react-icons/fi';
+import { FiInbox } from '@react-icons/all-files/fi/FiInbox';
 import { useRouter } from 'next/router';
 import Link from 'components/Link/InternalLink';
 import { Nav } from '@linen/ui';

apps/web/components/Pages/Branding/Header/index.tsx

@@ -1,5 +1,5 @@
 import { StickyHeader } from '@linen/ui';
-import { FiSliders } from 'react-icons/fi';
+import { FiSliders } from '@react-icons/all-files/fi/FiSliders';
 import styles from './index.module.scss';
 
 export default function Header() {
@@ -8,9 +8,7 @@ export default function Header() {
       <div className={styles.title}>
         <FiSliders /> Branding
       </div>
-      <div className={styles.subtitle}>
-        Design made simple
-      </div>
+      <div className={styles.subtitle}>Design made simple</div>
     </StickyHeader>
   );
 }

apps/web/components/Pages/Channel/Content/Empty/index.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import styles from './index.module.scss';
 import { SerializedUser, ThreadStatus } from '@linen/types';
 import ThreadStatusIcon from '../ThreadStatusIcon';
-import { FiMessageSquare } from 'react-icons/fi';
+import { FiMessageSquare } from '@react-icons/all-files/fi/FiMessageSquare';
 
 interface Props {
   currentUser?: SerializedUser;

apps/web/components/Pages/Channel/Content/Header/index.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 import { Dropdown, NativeSelect, StickyHeader } from '@linen/ui';
 import styles from './index.module.css';
 import { SerializedThread, SerializedUser, ThreadStatus } from '@linen/types';
-import { FiHash, FiMoreVertical } from 'react-icons/fi';
-import { BiMessageCheck } from 'react-icons/bi';
+import { FiHash } from '@react-icons/all-files/fi/FiHash';
+import { FiMoreVertical } from '@react-icons/all-files/fi/FiMoreVertical';
+import { BiMessageCheck } from '@react-icons/all-files/bi/BiMessageCheck';
 import Icon from './Icon';
-import { BsFillGearFill } from 'react-icons/bs';
+import { BsFillGearFill } from '@react-icons/all-files/bs/BsFillGearFill';
 import { ShowIntegrationDetail } from '../IntegrationsModal';
 
 interface Props {

apps/web/components/Pages/Channel/Content/IntegrationsModal/index.tsx

@@ -2,15 +2,16 @@ import React, { useContext, useEffect, useState } from 'react';
 import H3 from 'components/H3';
 import { Modal } from '@linen/ui';
 import { channelsIntegrationType, Permissions } from '@linen/types';
-import { CgLinear } from 'react-icons/cg';
+import { CgLinear } from '@react-icons/all-files/cg/CgLinear';
 import { Button } from '@linen/ui';
-import { FiGithub, FiMail } from 'react-icons/fi';
+import { FiGithub } from '@react-icons/all-files/fi/FiGithub';
+import { FiMail } from '@react-icons/all-files/fi/FiMail';
 import { qs } from '@linen/utilities/url';
 import { Toast } from '@linen/ui';
 import { useSession } from 'utilities/auth/react';
 import { ChannelContext } from 'contexts/channel';
 import * as api from 'utilities/requests';
-import { GoX } from 'react-icons/go';
+import { GoX } from '@react-icons/all-files/go/GoX';
 
 interface IntegrationsModalProps {
   permissions: Permissions;

apps/web/components/Pages/Channel/Content/NewChannelModal.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import H3 from 'components/H3';
-import { FiPlus, FiX } from 'react-icons/fi';
+import { FiPlus } from '@react-icons/all-files/fi/FiPlus';
+import { FiX } from '@react-icons/all-files/fi/FiX';
 import { Button, Modal, TextInput, Toast } from '@linen/ui';
 import { useLinkContext } from '@linen/contexts/Link';
 import CustomRouterPush from 'components/Link/CustomRouterPush';

apps/web/components/Pages/Channel/Content/ScrollToBottomIcon/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import { FiArrowDown } from 'react-icons/fi';
+import { FiArrowDown } from '@react-icons/all-files/fi/FiArrowDown';
 import styles from './index.module.scss';
 
 interface Props {

apps/web/components/Pages/Channel/Content/ThreadStatusIcon/index.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { ThreadStatus } from '@linen/types';
-import { FaVolumeMute } from 'react-icons/fa';
-import { BiMessageCheck } from 'react-icons/bi';
-import { FiClock, FiInbox } from 'react-icons/fi';
+import { FaVolumeMute } from '@react-icons/all-files/fa/FaVolumeMute';
+import { BiMessageCheck } from '@react-icons/all-files/bi/BiMessageCheck';
+import { FiInbox } from '@react-icons/all-files/fi/FiInbox';
+import { FiClock } from '@react-icons/all-files/fi/FiClock';
 
 interface Props {
   status: ThreadStatus;

apps/web/components/Pages/Channel/CopyToClipboardIcon/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AiOutlinePaperClip } from 'react-icons/ai';
+import { AiOutlinePaperClip } from '@react-icons/all-files/ai/AiOutlinePaperClip';
 import { Toast } from '@linen/ui';
 import { copyToClipboard } from '@linen/utilities/clipboard';
 

apps/web/components/Pages/Configurations/Content/CommunityChatRow/index.tsx

@@ -2,7 +2,8 @@ import React, { useState } from 'react';
 import { ChatType } from '@linen/types';
 import Row from '../Row';
 import { NativeSelect } from '@linen/ui';
-import { RiChatCheckLine, RiChatDeleteLine } from 'react-icons/ri';
+import { RiChatCheckLine } from '@react-icons/all-files/ri/RiChatCheckLine';
+import { RiChatDeleteLine } from '@react-icons/all-files/ri/RiChatDeleteLine';
 
 interface Props {
   chat: ChatType | null;

apps/web/components/Pages/Configurations/Content/CommunityTypeRow/index.tsx

@@ -2,7 +2,8 @@ import React, { useState } from 'react';
 import { AccountType } from '@linen/types';
 import Row from '../Row';
 import { NativeSelect } from '@linen/ui';
-import { AiFillEye, AiFillEyeInvisible } from 'react-icons/ai';
+import { AiFillEye } from '@react-icons/all-files/ai/AiFillEye';
+import { AiFillEyeInvisible } from '@react-icons/all-files/ai/AiFillEyeInvisible';
 
 interface Props {
   type: AccountType;