Skip to content

Commit 3ac4b02

Browse files
author
einan
committed
Icon library changed from react-icons to hugeicons.
1 parent f2efe01 commit 3ac4b02

18 files changed

Lines changed: 130 additions & 89 deletions

File tree

‎example/components/ButtonExample.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1-
import { FaComments } from 'react-icons/fa'
21
import Button from '../../src/Button/Button'
32

3+
import { HugeiconsIcon } from '@hugeicons/react';
4+
// @ts-ignore
5+
import { Chatting01Icon } from '@hugeicons/core-free-icons';
6+
47
function ButtonExample() {
58
return (
69
<div style={{ display: 'flex' }}>
@@ -16,7 +19,7 @@ function ButtonExample() {
1619
type='transparent'
1720
color='black'
1821
icon={{
19-
component: <FaComments />,
22+
component: <HugeiconsIcon icon={Chatting01Icon} />,
2023
size: 18,
2124
}}
2225
/>

‎example/components/ChatListExample.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import Identicon from 'identicon.js'
22
import loremIpsum from 'lorem-ipsum'
33
import React, { useEffect, useState } from 'react'
4-
import { BsListTask } from 'react-icons/bs'
54
import ChatList from '../../src/ChatList/ChatList'
65
import SideBar from '../../src/SideBar/SideBar'
76
import { IChatItemProps } from '../../src/type'
87

8+
import { HugeiconsIcon } from '@hugeicons/react';
9+
// @ts-ignore
10+
import { LeftToRightListBulletIcon } from '@hugeicons/core-free-icons';
11+
912
function Test(params: any) {
1013
return (
1114
<div className='rce-citem-body--bottom-status-icon' onClick={() => console.log('clicked')}>
@@ -25,7 +28,7 @@ function Test(params: any) {
2528
>
2629
{Math.ceil(Math.random() * 9) + 1}
2730
</span>
28-
<BsListTask />
31+
<HugeiconsIcon icon={LeftToRightListBulletIcon} size={16} />
2932
</div>
3033
)
3134
}

‎example/components/DropdownExample.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import { FaSquare } from 'react-icons/fa'
2-
import { MdOutlineMoreVert } from 'react-icons/md'
31
import Dropdown from '../../src/Dropdown/Dropdown'
42

3+
import { HugeiconsIcon } from '@hugeicons/react';
4+
// @ts-ignore
5+
import { MoreVerticalIcon, SquareIcon } from '@hugeicons/core-free-icons';
6+
57
function DropdownExample() {
68
return (
79
<div>
@@ -15,22 +17,22 @@ function DropdownExample() {
1517
type: 'transparent',
1618
color: '#929292',
1719
icon: {
18-
component: <MdOutlineMoreVert />,
20+
component: <HugeiconsIcon icon={MoreVerticalIcon} />,
1921
size: 24,
2022
},
2123
}}
2224
items={[
2325
{
2426
icon: {
25-
component: <FaSquare />,
27+
component: <HugeiconsIcon icon={SquareIcon} />,
2628
float: 'left',
2729
size: 22,
2830
},
2931
text: 'Menu Item',
3032
},
3133
{
3234
icon: {
33-
component: <FaSquare />,
35+
component: <HugeiconsIcon icon={SquareIcon} />,
3436
float: 'left',
3537
color: 'purple',
3638
size: 22,
@@ -39,7 +41,7 @@ function DropdownExample() {
3941
},
4042
{
4143
icon: {
42-
component: <FaSquare />,
44+
component: <HugeiconsIcon icon={SquareIcon} />,
4345
float: 'left',
4446
color: 'yellow',
4547
size: 22,

‎example/components/NavbarExample.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import { FaCircle, FaMapMarkerAlt, FaVideo } from 'react-icons/fa'
2-
import { MdOutlineMoreVert } from 'react-icons/md'
31
import Avatar from '../../src/Avatar/Avatar'
42
import Button from '../../src/Button/Button'
53
import Dropdown from '../../src/Dropdown/Dropdown'
64
import Navbar from '../../src/Navbar/Navbar'
75
import { photo } from '../utils/common'
86

7+
import { HugeiconsIcon } from '@hugeicons/react';
8+
// @ts-ignore
9+
import { CircleIcon, Location01Icon, Video01Icon, MoreVerticalIcon } from '@hugeicons/core-free-icons';
10+
911
function NavbarExample() {
1012
return (
1113
<div style={{ width: '100%' }}>
@@ -35,7 +37,7 @@ function NavbarExample() {
3537
</span>
3638
{
3739
<span onClick={() => {}} className='user-location' style={{ fontSize: '10px', color: '#575757' }}>
38-
<FaMapMarkerAlt color='#9e9e9e' />
40+
<HugeiconsIcon icon={Location01Icon} size={10} color='#9e9e9e' />
3941
Konum bilinmiyor
4042
</span>
4143
}
@@ -56,7 +58,7 @@ function NavbarExample() {
5658
icon={{
5759
component: (
5860
<div className='chat-list-navbar-menu-button'>
59-
<FaVideo />
61+
<HugeiconsIcon icon={Video01Icon} />
6062
</div>
6163
),
6264
size: 24,
@@ -68,7 +70,7 @@ function NavbarExample() {
6870
type: 'transparent',
6971
color: '#929292',
7072
icon: {
71-
component: <MdOutlineMoreVert />,
73+
component: <HugeiconsIcon icon={MoreVerticalIcon} />,
7274
size: 24,
7375
},
7476
}}
@@ -77,7 +79,7 @@ function NavbarExample() {
7779
items={[
7880
{
7981
icon: {
80-
component: <FaCircle />,
82+
component: <HugeiconsIcon icon={CircleIcon} />,
8183
float: 'left',
8284
color: 'blue',
8385
size: 15,

‎example/components/PopupExample.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import { useState } from 'react'
2-
import { FaTimes } from 'react-icons/fa'
32
import Button from '../../src/Button/Button'
43
import Popup from '../../src/Popup/Popup'
54

5+
import { HugeiconsIcon } from '@hugeicons/react';
6+
// @ts-ignore
7+
import { Cancel01Icon } from '@hugeicons/core-free-icons';
8+
69
function PopupExample() {
710
const [show, setShow] = useState<boolean>(false)
811
return (
@@ -20,7 +23,7 @@ function PopupExample() {
2023
setShow(false)
2124
},
2225
icon: {
23-
component: <FaTimes />,
26+
component: <HugeiconsIcon icon={Cancel01Icon} />,
2427
size: 18,
2528
},
2629
},

‎example/utils/MessageTypes.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import loremIpsum from 'lorem-ipsum'
22
import { MessageType } from '../../src/type'
33
import { getRandomColor, photo, token } from './common'
4-
import { MdOutlineVideoCall } from 'react-icons/md'
4+
5+
import { HugeiconsIcon } from '@hugeicons/react';
6+
// @ts-ignore
7+
import { Video01Icon } from '@hugeicons/core-free-icons';
58

69
export const photoMessage: MessageType = {
710
type: 'photo',
@@ -338,13 +341,14 @@ export const meetingLinkMessage: MessageType = {
338341
onClickButton(id) {
339342
console.log(id)
340343
},
341-
Component: () => MdOutlineVideoCall({ size: '25px' }),
344+
// Component: () => MdOutlineVideoCall({ size: '25px' }),
345+
Component: () => HugeiconsIcon({ icon: Video01Icon, size: 25 })
342346
},
343347
{
344348
onClickButton(id) {
345349
console.log(id)
346350
},
347-
Component: () => MdOutlineVideoCall({ size: '25px' }),
351+
Component: () => HugeiconsIcon({ icon: Video01Icon, size: 25 })
348352
},
349353
],
350354
meetingID: String(Math.random()),

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-chat-elements",
3-
"version": "12.0.15",
3+
"version": "12.0.16",
44
"description": "Reactjs chat components",
55
"author": "Avare Kodcu <abdurrahmaneker58@gmail.com>",
66
"main": "dist/main.js",
@@ -17,7 +17,6 @@
1717
"@types/progressbar.js": "^1.1.2",
1818
"@types/react": "^18.0.9",
1919
"@types/react-dom": "^18.0.4",
20-
"@types/react-icons": "^3.0.0",
2120
"babel-jest": "21.2.0",
2221
"babel-loader": "^8.2.5",
2322
"copyfiles": "^2.4.1",
@@ -86,9 +85,10 @@
8685
"react-dom": "18.2.0"
8786
},
8887
"dependencies": {
88+
"@hugeicons/core-free-icons": "^1.0.13",
89+
"@hugeicons/react": "^1.0.5",
8990
"classnames": "^2.2.5",
9091
"progressbar.js": "^1.1.0",
91-
"react-icons": "^4.3.1",
9292
"react-spinkit": "^3.0.0",
9393
"timeago.js": "^4.0.2"
9494
},

‎src/ChatItem/ChatItem.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,6 @@
184184
.rce-citem-body--bottom-tools-item svg {
185185
width: 18px;
186186
height: 18px;
187-
fill: #575757;
188187
}
189188

190189
.rce-container-citem.subitem .rce-citem {

‎src/ChatItem/ChatItem.tsx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,17 @@ import { format } from 'timeago.js'
77

88
import classNames from 'classnames'
99

10-
import { MdVideoCall, MdVolumeOff, MdVolumeUp } from 'react-icons/md'
1110
import { IChatItemProps } from '../type'
12-
import { FaArrowDown, FaArrowUp } from 'react-icons/fa'
11+
12+
import { HugeiconsIcon } from '@hugeicons/react';
13+
import {
14+
Video01Icon,
15+
VolumeOffIcon,
16+
VolumeHighIcon,
17+
ArrowDown01Icon,
18+
ArrowUp01Icon,
19+
// @ts-ignore
20+
} from '@hugeicons/core-free-icons';
1321

1422
const ChatItem: React.FC<IChatItemProps> = ({
1523
avatarFlexible = false,
@@ -119,7 +127,7 @@ const ChatItem: React.FC<IChatItemProps> = ({
119127
/>
120128
{props.subList && props.subList.length > 0 && (
121129
<button className='rce-citem-expand-button' onClick={(e) => onExpandItem(e, props.id)}>
122-
{props.expanded ? <FaArrowUp /> : <FaArrowDown />}
130+
{props.expanded ? <HugeiconsIcon icon={ArrowUp01Icon} /> : <HugeiconsIcon icon={ArrowDown01Icon} />}
123131
</button>
124132
)}
125133
</div>,
@@ -134,20 +142,20 @@ const ChatItem: React.FC<IChatItemProps> = ({
134142
<div className='rce-citem-body--bottom-tools' onMouseEnter={handleOnMouseEnter} onMouseLeave={handleOnMouseLeave}>
135143
{props.showMute && (
136144
<div className='rce-citem-body--bottom-tools-item' onClick={props.onClickMute}>
137-
{props.muted === true && <MdVolumeOff />}
138-
{props.muted === false && <MdVolumeUp />}
145+
{props.muted === true && <HugeiconsIcon icon={VolumeOffIcon} />}
146+
{props.muted === false && <HugeiconsIcon icon={VolumeHighIcon} />}
139147
</div>
140148
)}
141149
{props.showVideoCall && (
142150
<div className='rce-citem-body--bottom-tools-item' onClick={props.onClickVideoCall}>
143-
<MdVideoCall />
151+
<HugeiconsIcon icon={Video01Icon} />
144152
</div>
145153
)}
146154
</div>
147155
<div className='rce-citem-body--bottom-tools-item-hidden-hover'>
148156
{props.showMute && props.muted && (
149157
<div className='rce-citem-body--bottom-tools-item'>
150-
<MdVolumeOff />
158+
<HugeiconsIcon icon={VolumeOffIcon} />
151159
</div>
152160
)}
153161
</div>

‎src/FileMessage/FileMessage.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
import React from 'react'
2-
import { FaFile, FaCloudDownloadAlt, FaExclamationTriangle } from 'react-icons/fa'
32
import ProgressCircle from '../Circle/Circle'
43
import { IFileMessageProps } from '../type'
54
import './FileMessage.css'
65

6+
import { HugeiconsIcon } from '@hugeicons/react';
7+
// @ts-ignore
8+
import { File01Icon, CloudDownloadIcon, Alert02Icon } from '@hugeicons/core-free-icons';
9+
710
const FileMessage: React.FC<IFileMessageProps> = props => {
811
var progressOptions = {
912
strokeWidth: 5,
@@ -40,18 +43,18 @@ const FileMessage: React.FC<IFileMessageProps> = props => {
4043
<div className='rce-mbox-file'>
4144
<button onClick={onClick}>
4245
<div className='rce-mbox-file--icon'>
43-
<FaFile color='#aaa' />
46+
<HugeiconsIcon icon={File01Icon} color='#aaa' />
4447
<div className='rce-mbox-file--size'>{props?.data.size}</div>
4548
</div>
4649
<div className='rce-mbox-file--text'>{props.text}</div>
4750
<div className='rce-mbox-file--buttons'>
4851
{error && (
4952
<span className='rce-error-button'>
50-
<FaExclamationTriangle color='#ff3d3d' />
53+
<HugeiconsIcon icon={Alert02Icon} color='#ff3d3d' />
5154
</span>
5255
)}
5356
{!error && props?.data?.status && !props?.data?.status.download && !props?.data?.status.click && (
54-
<FaCloudDownloadAlt color='#aaa' />
57+
<HugeiconsIcon icon={CloudDownloadIcon} color='#aaa' />
5558
)}
5659
{!error &&
5760
props?.data?.status &&

0 commit comments

Comments
 (0)