Icon library changed from react-icons to hugeicons.

example/components/ButtonExample.tsx

@@ -1,6 +1,9 @@
-import { FaComments } from 'react-icons/fa'
 import Button from '../../src/Button/Button'
 
+import { HugeiconsIcon } from '@hugeicons/react';
+// @ts-ignore
+import { Chatting01Icon } from '@hugeicons/core-free-icons';
+
 function ButtonExample() {
   return (
     <div style={{ display: 'flex' }}>
@@ -16,7 +19,7 @@ function ButtonExample() {
           type='transparent'
           color='black'
           icon={{
-            component: <FaComments />,
+            component: <HugeiconsIcon icon={Chatting01Icon} />,
             size: 18,
           }}
         />

example/components/ChatListExample.tsx

@@ -1,12 +1,15 @@
 import Identicon from 'identicon.js'
 import loremIpsum from 'lorem-ipsum'
 import React, { useEffect, useState } from 'react'
-import { BsListTask } from 'react-icons/bs'
 import ChatList from '../../src/ChatList/ChatList'
 import SideBar from '../../src/SideBar/SideBar'
 import { IChatItemProps } from '../../src/type'
 import { FaUsers } from 'react-icons/fa'
 
+import { HugeiconsIcon } from '@hugeicons/react';
+// @ts-ignore
+import { LeftToRightListBulletIcon } from '@hugeicons/core-free-icons';
+
 function Test(params: any) {
   return (
     <div className='rce-citem-body--bottom-status-icon' onClick={() => console.log('clicked')}>
@@ -26,7 +29,7 @@ function Test(params: any) {
       >
         {Math.ceil(Math.random() * 9) + 1}
       </span>
-      <BsListTask />
+      <HugeiconsIcon icon={LeftToRightListBulletIcon} size={16} />
     </div>
   )
 }

example/components/DropdownExample.tsx

@@ -1,7 +1,9 @@
-import { FaSquare } from 'react-icons/fa'
-import { MdOutlineMoreVert } from 'react-icons/md'
 import Dropdown from '../../src/Dropdown/Dropdown'
 
+import { HugeiconsIcon } from '@hugeicons/react';
+// @ts-ignore
+import { MoreVerticalIcon, SquareIcon } from '@hugeicons/core-free-icons';
+
 function DropdownExample() {
   return (
     <div>
@@ -15,22 +17,22 @@ function DropdownExample() {
           type: 'transparent',
           color: '#929292',
           icon: {
-            component: <MdOutlineMoreVert />,
+            component: <HugeiconsIcon icon={MoreVerticalIcon} />,
             size: 24,
           },
         }}
         items={[
           {
             icon: {
-              component: <FaSquare />,
+              component: <HugeiconsIcon icon={SquareIcon} />,
               float: 'left',
               size: 22,
             },
             text: 'Menu Item',
           },
           {
             icon: {
-              component: <FaSquare />,
+              component: <HugeiconsIcon icon={SquareIcon} />,
               float: 'left',
               color: 'purple',
               size: 22,
@@ -39,7 +41,7 @@ function DropdownExample() {
           },
           {
             icon: {
-              component: <FaSquare />,
+              component: <HugeiconsIcon icon={SquareIcon} />,
               float: 'left',
               color: 'yellow',
               size: 22,

example/components/NavbarExample.tsx

@@ -1,11 +1,13 @@
-import { FaCircle, FaMapMarkerAlt, FaVideo } from 'react-icons/fa'
-import { MdOutlineMoreVert } from 'react-icons/md'
 import Avatar from '../../src/Avatar/Avatar'
 import Button from '../../src/Button/Button'
 import Dropdown from '../../src/Dropdown/Dropdown'
 import Navbar from '../../src/Navbar/Navbar'
 import { photo } from '../utils/common'
 
+import { HugeiconsIcon } from '@hugeicons/react';
+// @ts-ignore
+import { CircleIcon, Location01Icon, Video01Icon, MoreVerticalIcon } from '@hugeicons/core-free-icons';
+
 function NavbarExample() {
   return (
     <div style={{ width: '100%' }}>
@@ -35,7 +37,7 @@ function NavbarExample() {
                   </span>
                   {
                     <span onClick={() => {}} className='user-location' style={{ fontSize: '10px', color: '#575757' }}>
-                      <FaMapMarkerAlt color='#9e9e9e' />
+                      <HugeiconsIcon icon={Location01Icon} size={10} color='#9e9e9e' />
                       Konum bilinmiyor
                     </span>
                   }
@@ -56,7 +58,7 @@ function NavbarExample() {
                 icon={{
                   component: (
                     <div className='chat-list-navbar-menu-button'>
-                      <FaVideo />
+                      <HugeiconsIcon icon={Video01Icon} />
                     </div>
                   ),
                   size: 24,
@@ -68,7 +70,7 @@ function NavbarExample() {
                     type: 'transparent',
                     color: '#929292',
                     icon: {
-                      component: <MdOutlineMoreVert />,
+                      component: <HugeiconsIcon icon={MoreVerticalIcon} />,
                       size: 24,
                     },
                   }}
@@ -77,7 +79,7 @@ function NavbarExample() {
                   items={[
                     {
                       icon: {
-                        component: <FaCircle />,
+                        component: <HugeiconsIcon icon={CircleIcon} />,
                         float: 'left',
                         color: 'blue',
                         size: 15,

example/components/PopupExample.tsx

@@ -1,8 +1,11 @@
 import { useState } from 'react'
-import { FaTimes } from 'react-icons/fa'
 import Button from '../../src/Button/Button'
 import Popup from '../../src/Popup/Popup'
 
+import { HugeiconsIcon } from '@hugeicons/react';
+// @ts-ignore
+import { Cancel01Icon } from '@hugeicons/core-free-icons';
+
 function PopupExample() {
   const [show, setShow] = useState<boolean>(false)
   return (
@@ -20,7 +23,7 @@ function PopupExample() {
                 setShow(false)
               },
               icon: {
-                component: <FaTimes />,
+                component: <HugeiconsIcon icon={Cancel01Icon} />,
                 size: 18,
               },
             },

example/utils/MessageTypes.ts

@@ -1,7 +1,10 @@
 import loremIpsum from 'lorem-ipsum'
 import { MessageType } from '../../src/type'
 import { getRandomColor, photo, token } from './common'
-import { MdOutlineVideoCall } from 'react-icons/md'
+
+import { HugeiconsIcon } from '@hugeicons/react';
+// @ts-ignore
+import { Video01Icon } from '@hugeicons/core-free-icons';
 
 export const photoMessage: MessageType = {
   type: 'photo',
@@ -338,13 +341,14 @@ export const meetingLinkMessage: MessageType = {
       onClickButton(id) {
         console.log(id)
       },
-      Component: () => MdOutlineVideoCall({ size: '25px' }),
+    //   Component: () => MdOutlineVideoCall({ size: '25px' }),
+      Component: () => HugeiconsIcon({ icon: Video01Icon, size: 25 })
     },
     {
       onClickButton(id) {
         console.log(id)
       },
-      Component: () => MdOutlineVideoCall({ size: '25px' }),
+      Component: () => HugeiconsIcon({ icon: Video01Icon, size: 25 })
     },
   ],
   meetingID: String(Math.random()),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-chat-elements",
-  "version": "12.0.17",
+  "version": "12.0.18",
   "description": "Reactjs chat components",
   "author": "Avare Kodcu <abdurrahmaneker58@gmail.com>",
   "main": "dist/main.js",
@@ -17,7 +17,6 @@
     "@types/progressbar.js": "^1.1.2",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
-    "@types/react-icons": "^3.0.0",
     "babel-jest": "21.2.0",
     "babel-loader": "^8.2.5",
     "copyfiles": "^2.4.1",
@@ -86,9 +85,10 @@
     "react-dom": "18.2.0"
   },
   "dependencies": {
+    "@hugeicons/core-free-icons": "^1.0.13",
+    "@hugeicons/react": "^1.0.5",
     "classnames": "^2.2.5",
     "progressbar.js": "^1.1.0",
-    "react-icons": "^4.3.1",
     "react-spinkit": "^3.0.0",
     "timeago.js": "^4.0.2"
   },

src/ChatItem/ChatItem.css

@@ -184,7 +184,6 @@
 .rce-citem-body--bottom-tools-item svg {
   width: 18px;
   height: 18px;
-  fill: #575757;
 }
 
 .rce-citem-body--subinfo {

src/ChatItem/ChatItem.tsx

@@ -7,9 +7,18 @@ import { format } from 'timeago.js'
 
 import classNames from 'classnames'
 
-import { MdVideoCall, MdVolumeOff, MdVolumeUp } from 'react-icons/md'
 import { IChatItemProps } from '../type'
 
+import { HugeiconsIcon } from '@hugeicons/react';
+import {
+    Video01Icon,
+    VolumeOffIcon,
+    VolumeHighIcon,
+    ArrowDown01Icon,
+    ArrowUp01Icon,
+    // @ts-ignore
+} from '@hugeicons/core-free-icons';
+
 const ChatItem: React.FC<IChatItemProps> = ({
   avatarFlexible = false,
   date = new Date(),
@@ -65,6 +74,12 @@ const ChatItem: React.FC<IChatItemProps> = ({
     if (onDrag) setOnDrag(false)
   }
 
+  const onExpandItem = (e: React.MouseEvent, id: string | number) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (props.onExpandItem instanceof Function) props.onExpandItem(id);
+  }
+
   return (
     <>
         <div
@@ -109,46 +124,44 @@ const ChatItem: React.FC<IChatItemProps> = ({
                         onError={onAvatarError}
                         lazyLoadingImage={lazyLoadingImage}
                         type={classNames('circle', { 'flexible': avatarFlexible })}
-                        miniImage={props.miniAvatar}
                     />
+                    {props.subList && props.subList.length > 0 && (
+                        <button className='rce-citem-expand-button' onClick={(e) => onExpandItem(e, props.id)}>
+                            {props.expanded ? <HugeiconsIcon icon={ArrowUp01Icon} /> : <HugeiconsIcon icon={ArrowDown01Icon} />}
+                        </button>
+                    )}
                 </div>,
                 <div key={'rce-citem-body'} className='rce-citem-body'>
                     <div className='rce-citem-body--top'>
-                        <div className='rce-citem-body--top-title'>{props.title}</div>
-                        <div className='rce-citem-body--top-time'>{date && (props.dateString || format(date))}</div>
+                    <div className='rce-citem-body--top-title'>{props.title}</div>
+                    <div className='rce-citem-body--top-time'>{date && (props.dateString || format(date))}</div>
                     </div>
 
                     <div className='rce-citem-body--bottom'>
-                        <div className='rce-citem-body--bottom-title'>{props.subtitle}</div>
-                        <div className='rce-citem-body--bottom-tools' onMouseEnter={handleOnMouseEnter} onMouseLeave={handleOnMouseLeave}>
-                            {props.showMute && (
-                            <div className='rce-citem-body--bottom-tools-item' onClick={props.onClickMute}>
-                                {props.muted === true && <MdVolumeOff />}
-                                {props.muted === false && <MdVolumeUp />}
-                            </div>
-                            )}
-                            {props.showVideoCall && (
-                            <div className='rce-citem-body--bottom-tools-item' onClick={props.onClickVideoCall}>
-                                <MdVideoCall />
-                            </div>
-                            )}
+                    <div className='rce-citem-body--bottom-title'>{props.subtitle}</div>
+                    <div className='rce-citem-body--bottom-tools' onMouseEnter={handleOnMouseEnter} onMouseLeave={handleOnMouseLeave}>
+                        {props.showMute && (
+                        <div className='rce-citem-body--bottom-tools-item' onClick={props.onClickMute}>
+                            {props.muted === true && <HugeiconsIcon icon={VolumeOffIcon} />}
+                            {props.muted === false && <HugeiconsIcon icon={VolumeHighIcon} />}
                         </div>
-                        <div className='rce-citem-body--bottom-tools-item-hidden-hover'>
-                            {props.showMute && props.muted && (
-                            <div className='rce-citem-body--bottom-tools-item'>
-                                <MdVolumeOff />
-                            </div>
-                            )}
+                        )}
+                        {props.showVideoCall && (
+                        <div className='rce-citem-body--bottom-tools-item' onClick={props.onClickVideoCall}>
+                            <HugeiconsIcon icon={Video01Icon} />
                         </div>
-                        <div className='rce-citem-body--bottom-status'>{unread && unread > 0 ? <span>{unread}</span> : null}</div>
-                        {props.customStatusComponents !== undefined ? props.customStatusComponents.map(Item => <Item />) : null}
+                        )}
                     </div>
-
-                    {props.subTextElement && (
-                        <div className='rce-citem-body--subinfo'>
-                            {props.subTextElement}
+                    <div className='rce-citem-body--bottom-tools-item-hidden-hover'>
+                        {props.showMute && props.muted && (
+                        <div className='rce-citem-body--bottom-tools-item'>
+                            <HugeiconsIcon icon={VolumeOffIcon} />
                         </div>
-                    )}
+                        )}
+                    </div>
+                    <div className='rce-citem-body--bottom-status'>{unread && unread > 0 ? <span>{unread}</span> : null}</div>
+                    {props.customStatusComponents !== undefined ? props.customStatusComponents.map(Item => <Item />) : null}
+                    </div>
                 </div>,
                 ]}
             </div>

src/FileMessage/FileMessage.tsx

@@ -1,9 +1,12 @@
 import React from 'react'
-import { FaFile, FaCloudDownloadAlt, FaExclamationTriangle } from 'react-icons/fa'
 import ProgressCircle from '../Circle/Circle'
 import { IFileMessageProps } from '../type'
 import './FileMessage.css'
 
+import { HugeiconsIcon } from '@hugeicons/react';
+// @ts-ignore
+import { File01Icon, CloudDownloadIcon, Alert02Icon } from '@hugeicons/core-free-icons';
+
 const FileMessage: React.FC<IFileMessageProps> = props => {
   var progressOptions = {
     strokeWidth: 5,
@@ -40,18 +43,18 @@ const FileMessage: React.FC<IFileMessageProps> = props => {
     <div className='rce-mbox-file'>
       <button onClick={onClick}>
         <div className='rce-mbox-file--icon'>
-          <FaFile color='#aaa' />
+          <HugeiconsIcon icon={File01Icon} color='#aaa' />
           <div className='rce-mbox-file--size'>{props?.data.size}</div>
         </div>
         <div className='rce-mbox-file--text'>{props.text}</div>
         <div className='rce-mbox-file--buttons'>
           {error && (
             <span className='rce-error-button'>
-              <FaExclamationTriangle color='#ff3d3d' />
+              <HugeiconsIcon icon={Alert02Icon} color='#ff3d3d' />
             </span>
           )}
           {!error && props?.data?.status && !props?.data?.status.download && !props?.data?.status.click && (
-            <FaCloudDownloadAlt color='#aaa' />
+            <HugeiconsIcon icon={CloudDownloadIcon} color='#aaa' />
           )}
           {!error &&
             props?.data?.status &&