Refactor/react icons

src/common/toast.tsx

@@ -2,9 +2,7 @@ import React, { ReactNode } from 'react'
 import toast from 'react-hot-toast'
 import { playAlarm } from './playAlarm'
 import { translateError } from '@/utils/translate-error'
-import { TfiAlert, TfiCheck } from 'react-icons/tfi'
-import { TiInfo } from 'react-icons/ti'
-import { LuX } from 'react-icons/lu'
+import { Icon } from '../icons'
 
 type ToastType = 'success' | 'error' | 'info' | 'warning'
 
@@ -29,25 +27,25 @@ const TT: Record<
 		borderColor: 'border-r-success border-br-success',
 		iconBg: 'bg-success/10',
 		iconColor: 'text-success',
-		icon: <TfiCheck />,
+		icon: <Icon name="check" />,
 	},
 	error: {
 		borderColor: 'border-r-error',
 		iconBg: 'bg-error/10',
 		iconColor: 'text-error',
-		icon: <TfiAlert />,
+		icon: <Icon name="alert" />,
 	},
 	info: {
 		borderColor: 'border-r-info',
 		iconBg: 'bg-info/10',
 		iconColor: 'text-info',
-		icon: <TiInfo />,
+		icon: <Icon name="info" />,
 	},
 	warning: {
 		borderColor: 'border-r-warning',
 		iconBg: 'bg-warning/10',
 		iconColor: 'text-warning',
-		icon: <TfiAlert />,
+		icon: <Icon name="alert" />,
 	},
 }
 
@@ -80,7 +78,7 @@ export function showToast(message: string, type: ToastType, options?: ToastOptio
 					onClick={() => toast.remove(t.id, t.toasterId)}
 					className="rounded-full btn text-base-content/80 btn-xs btn-ghost"
 				>
-					<LuX size={15} className="" />
+					<Icon name="close" size={15} />
 				</button>
 			</div>
 		),
@@ -117,7 +115,7 @@ export function showPreviewToast(itemName: string, onCancel: () => void): string
 			>
 				<div className="flex items-center gap-1.5 min-w-0">
 					<div className="relative flex items-center justify-center w-6 h-6 rounded-xl bg-primary/10 shrink-0">
-						<TiInfo className="text-base text-primary" />
+						<Icon name="info" className="text-base text-primary" />
 						<span className="absolute -top-0.5 -right-0.5 flex h-2 w-2">
 							<span className="absolute inline-flex w-full h-full rounded-full animate-ping bg-primary opacity-60" />
 							<span className="relative inline-flex w-2 h-2 rounded-full bg-primary" />
@@ -139,7 +137,7 @@ export function showPreviewToast(itemName: string, onCancel: () => void): string
 					}}
 					className="shrink-0 flex items-center gap-1.5 text-[11px] font-medium px-3 py-1.5 rounded-xl bg-base-200 hover:bg-error/10 hover:text-error text-base-content/60 transition-all duration-150 cursor-pointer border border-base-content/8 active:scale-95"
 				>
-					<LuX size={11} />
+					<Icon name="close" size={11} />
 					بازگشت
 				</button>
 			</div>

src/components/UpdateReleaseNotesModal.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react'
-import { RiThumbUpLine } from 'react-icons/ri'
 import { Button } from './button/button'
 import Modal from './modal'
 
@@ -92,8 +91,7 @@ export const UpdateReleaseNotesModal = ({
 					</div>
 
 					<div className="flex items-center justify-center gap-2 py-1 text-muted">
-						<RiThumbUpLine size={14} />
-						<span className="text-xs">دمت گرم که همراه مایی</span>
+						💙<span className="text-xs">دمت گرم که همراه مایی</span>
 					</div>
 				</div>
 

src/components/auth/AuthRequiredModal.tsx

@@ -1,7 +1,7 @@
 import { callEvent } from '@/common/utils/call-event'
 import Modal from '@/components/modal'
 import { Button } from '../button/button'
-import { FiLock } from 'react-icons/fi'
+import { Icon } from '@/src/icons'
 
 interface AuthRequiredModalProps {
 	isOpen: boolean
@@ -40,7 +40,10 @@ export function AuthRequiredModal({
 						className="absolute inset-0 rounded-full bg-primary/5 animate-ping"
 						style={{ animationDuration: '2s' }}
 					/>
-					<FiLock className="relative text-2xl md:text-3xl text-primary" />
+					<Icon
+						name="lock"
+						className="relative text-2xl md:text-3xl text-primary"
+					/>
 				</div>
 				{title && <h3 className="text-lg font-semibold text-content">{title}</h3>}
 				<p className={'text-muted text-xs font-medium'}>{message}</p>

src/components/auth/require-verification.tsx

@@ -1,9 +1,9 @@
 import { motion } from 'framer-motion'
 import type { ReactNode } from 'react'
-import { MdOutlineVerifiedUser } from 'react-icons/md'
 import { callEvent } from '@/common/utils/call-event'
 import { useAuth } from '@/context/auth.context'
 import { Button } from '../button/button'
+import { Icon } from '@/src/icons'
 
 interface RequireVerificationProps {
 	children: ReactNode
@@ -43,7 +43,7 @@ export const RequireVerification = ({
 							'absolute inset-0 p-2 flex flex-col items-center justify-center gap-y-2 bg-base-300/5 backdrop-blur-xs rounded-xl'
 						}
 					>
-						<MdOutlineVerifiedUser size={20} className="text-success/80" />
+						<Icon name="verifyUser" size={20} className="text-success/80" />
 						<h3 className="text-lg font-semibold">نیاز به تأیید حساب</h3>
 						<p className={'text-xs text-content text-center'}>
 							برای دسترسی به این بخش، لطفاً حساب کاربری خود را تأیید کنید.

src/components/blur-mode/blur-mode.button.tsx

@@ -1,6 +1,6 @@
 import { useGeneralSetting } from '@/context/general-setting.context'
 import Tooltip from '../toolTip'
-import { HiOutlineEye, HiOutlineEyeSlash } from 'react-icons/hi2'
+import { Icon } from '@/src/icons'
 
 export function BlurModeButton() {
 	const { blurMode, updateSetting } = useGeneralSetting()
@@ -16,7 +16,11 @@ export function BlurModeButton() {
 				onClick={handleBlurModeToggle}
 				className="relative p-2 transition-all cursor-pointer nav-btn text-base-content/40 hover:text-base-content active:scale-90"
 			>
-				{blurMode ? <HiOutlineEye size={15} /> : <HiOutlineEyeSlash size={15} />}
+				{blurMode ? (
+					<Icon name="outlineEye" size={15} />
+				) : (
+					<Icon name="outlineEyeSlash" size={15} />
+				)}
 			</div>
 		</Tooltip>
 	)

src/components/bottom-sheet/bottom-sheet.tsx

@@ -1,8 +1,7 @@
-import { useState, useRef, type ReactNode } from 'react'
-import { motion, AnimatePresence, PanInfo } from 'framer-motion'
-import { MdClose } from 'react-icons/md'
+import { useState, type ReactNode } from 'react'
+import { motion, AnimatePresence, type PanInfo } from 'framer-motion'
 import { Portal } from '../portal/Portal'
-import { HiChevronRight } from 'react-icons/hi2'
+import { Icon } from '@/src/icons'
 
 type SheetSize = 'small' | 'medium' | 'large' | 'full' | 'screen'
 
@@ -107,7 +106,8 @@ export function BottomSheet({
 											className="absolute p-2 transition-all duration-200 rounded-full right-6 active:scale-95"
 											aria-label="بستن"
 										>
-											<HiChevronRight
+											<Icon
+												name="chevronRight"
 												size={20}
 												className="text-base-content/60"
 											/>

src/components/button/button.tsx

@@ -1,5 +1,5 @@
+import { Icon } from '@/src/icons'
 import type React from 'react'
-import { FaSpinner } from 'react-icons/fa'
 
 interface ButtonProps {
 	onClick?: () => void
@@ -38,7 +38,7 @@ export function Button(prop: ButtonProps) {
 			{prop.loading
 				? prop.loadingText || (
 						<div className="flex items-center gap-1">
-							<FaSpinner className="animate-spin" />
+							<Icon name="spinner" className="animate-spin" />
 							<span className="text-xs">صبر کنید...</span>
 						</div>
 					)

src/components/date-picker/date-picker.tsx

@@ -1,7 +1,6 @@
+import { Icon } from '@/src/icons'
 import jalaliMoment from 'jalali-moment'
 import { useState } from 'react'
-import { FaChevronLeft, FaChevronRight } from 'react-icons/fa6'
-import { TfiBackRight } from 'react-icons/tfi'
 
 interface DatePickerProps {
 	onDateSelect: (date: jalaliMoment.Moment) => void
@@ -202,20 +201,20 @@ export function DatePicker({
 							onClick={goToToday}
 							className="flex items-center justify-center transition-colors duration-300 rounded-full cursor-pointer h-7 w-7 text-muted opacity-70 hover:bg-base-300 hover:opacity-100"
 						>
-							<TfiBackRight size={12} />
+							<Icon name="backRight" size={12} />
 						</button>
 					)}
 					<button
 						onClick={() => changeMonth(-1)}
 						className="flex items-center justify-center transition-colors duration-300 rounded-full cursor-pointer h-7 w-7 text-muted opacity-70 hover:bg-base-300 hover:opacity-100"
 					>
-						<FaChevronRight size={12} />
+						<Icon name="chevronRight" size={12} />
 					</button>
 					<button
 						onClick={() => changeMonth(1)}
 						className="flex items-center justify-center transition-colors duration-300 rounded-full cursor-pointer h-7 w-7 text-muted opacity-70 hover:bg-base-300 hover:opacity-100"
 					>
-						<FaChevronLeft size={12} />
+						<Icon name="chevronLeft" size={12} />
 					</button>
 				</div>
 			</div>

src/components/extension-installed-modal.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react'
-import { FaExternalLinkAlt } from 'react-icons/fa'
 import keepItImage from '@/assets/keep-it.png'
 import { Button } from './button/button'
 import Checkbox from './checkbox'
 import Modal from './modal'
+import { Icon } from '../icons'
 
 interface ExtensionInstalledModalProps {
 	show: boolean
@@ -149,7 +149,7 @@ const StepFirefoxConsent = ({ onGetStarted }: StepFirefoxConsentProps) => {
 					rel="noopener noreferrer"
 					className="flex items-center justify-center font-medium underline text-primary gap-0.5 mb-2"
 				>
-					<FaExternalLinkAlt />
+					<Icon name="externalLink" />
 					سیاست کامل حریم خصوصی
 				</a>
 			</div>

src/components/filter-tooltip/filter-tooltip.tsx

@@ -1,5 +1,4 @@
 import { useState, useRef, ReactNode } from 'react'
-import { FaFilter } from 'react-icons/fa'
 import { ClickableTooltip } from '@/components/clickableTooltip'
 import Tooltip from '../toolTip'
 import { Button } from '../button/button'

src/components/loading/icon-loading.tsx

@@ -1,4 +1,4 @@
-import { FiLoader } from 'react-icons/fi'
+import { Icon } from '@/src/icons'
 import Tooltip from '../toolTip'
 
 interface IconLoadingProps {
@@ -8,14 +8,16 @@ interface IconLoadingProps {
 export function IconLoading({ title, className }: IconLoadingProps) {
 	if (!title) {
 		return (
-			<FiLoader
+			<Icon
+				name="loader"
 				className={`mx-2 block w-4 h-4 animate-spin text-content ${className}`}
 			/>
 		)
 	}
 	return (
 		<Tooltip content={title} position="bottom">
-			<FiLoader
+			<Icon
+				name="loader"
 				className={`mx-2 block w-4 h-4 animate-spin text-content ${className}`}
 			/>
 		</Tooltip>