From 63bcf4629979449b6882f5439c129ece6550abe1 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Mon, 28 Feb 2022 12:20:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=89=A9=E4=BD=99=E7=9A=84Fo?=
 =?UTF-8?q?ntAwesome?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/NEXT/components/ContactButton.js   |  4 +---
 themes/NEXT/components/DarkModeButton.js  |  4 +---
 themes/NEXT/components/LeftFloatButton.js |  5 +----
 themes/NEXT/components/RewardButton.js    |  4 +---
 themes/NEXT/components/ShareButton.js     |  4 +---
 themes/NEXT/components/SideAreaLeft.js    |  1 -
 themes/NEXT/components/SideBar.js         | 10 ++++------
 7 files changed, 9 insertions(+), 23 deletions(-)

diff --git a/themes/NEXT/components/ContactButton.js b/themes/NEXT/components/ContactButton.js
index 753244f8..4744f81a 100644
--- a/themes/NEXT/components/ContactButton.js
+++ b/themes/NEXT/components/ContactButton.js
@@ -1,7 +1,5 @@
 import React from 'react'
 import Link from 'next/link'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faInfo } from '@fortawesome/free-solid-svg-icons'
 
 /**
  * 悬浮在屏幕右下角,联系我的按钮
@@ -14,7 +12,7 @@ const ContactButton = () => {
       <a className={'fixed right-10 bottom-40 animate__fadeInRight animate__animated animate__faster'}>
       <span
         className='dark:bg-black bg-white px-5 py-3 cursor-pointer shadow-card text-xl hover:bg-blue-500 transform duration-200 hover:text-white hover:shadow'>
-        <FontAwesomeIcon icon={faInfo} className='dark:text-gray-200 ' title='about' />
+        <i className='dark:text-gray-200 fas fa-info' title='about' />
       </span>
       </a>
     </Link>
diff --git a/themes/NEXT/components/DarkModeButton.js b/themes/NEXT/components/DarkModeButton.js
index 145b9358..f70b1428 100644
--- a/themes/NEXT/components/DarkModeButton.js
+++ b/themes/NEXT/components/DarkModeButton.js
@@ -1,6 +1,4 @@
 import { useGlobal } from '@/lib/global'
-import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { loadUserThemeFromCookies, saveTheme } from '@/lib/theme'
 
 const DarkModeButton = () => {
@@ -14,7 +12,7 @@ const DarkModeButton = () => {
     changeTheme(newTheme)
   }
   return <div className='z-10 duration-200 text-xs cursor-pointer py-1.5 px-1'>
-    <FontAwesomeIcon icon={userTheme === 'dark' ? faSun : faMoon} id='darkModeButton' className='hover:scale-125 transform duration-200'
+    <i id='darkModeButton' className={`hover:scale-125 transform duration-200 fas ${userTheme === 'dark' ? 'fa-sun' : 'fa-moon'}`}
        onClick={handleChangeDarkMode} />
   </div>
 }
diff --git a/themes/NEXT/components/LeftFloatButton.js b/themes/NEXT/components/LeftFloatButton.js
index 4872a746..a84312da 100644
--- a/themes/NEXT/components/LeftFloatButton.js
+++ b/themes/NEXT/components/LeftFloatButton.js
@@ -1,8 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import throttle from 'lodash.throttle'
 import DarkModeButton from './DarkModeButton'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faBars } from '@fortawesome/free-solid-svg-icons'
 
 /**
  * 左上角悬浮菜单栏
@@ -32,8 +30,7 @@ const LeftFloatButton = () => {
     {/* 菜单折叠 */}
     <div className='p-1 border hover:shadow-xl duration-200 dark:border-gray-500 h-12 bg-white dark:bg-gray-600 dark:bg-opacity-70 bg-opacity-70
       dark:hover:bg-gray-100 text-xl cursor-pointer mr-2 my-2 dark:text-gray-300 dark:hover:text-black'>
-      <FontAwesomeIcon icon={faBars} className='p-2.5 hover:scale-125 transform duration-200'
-         onClick={() => changeCollapse(!collapse)} />
+      <i className='p-2.5 hover:scale-125 transform duration-200 fas fa-bars' onClick={() => changeCollapse(!collapse)} />
     </div>
     {/* 夜间模式 */}
     <DarkModeButton />
diff --git a/themes/NEXT/components/RewardButton.js b/themes/NEXT/components/RewardButton.js
index c4b05984..6de4f449 100644
--- a/themes/NEXT/components/RewardButton.js
+++ b/themes/NEXT/components/RewardButton.js
@@ -1,7 +1,5 @@
 import React from 'react'
 import Image from 'next/image'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faQrcode } from '@fortawesome/free-solid-svg-icons'
 
 /**
  * 赞赏按钮
@@ -23,7 +21,7 @@ const RewardButton = () => {
     <div className='justify-center'>
       <div onMouseEnter={openPopover} onMouseLeave={closePopover}
       className='bg-pink-500 py-2 w-36 mx-auto animate__jello text-white hover:bg-green-400 duration-200 transform hover:scale-110 px-3 rounded cursor-pointer'>
-          <FontAwesomeIcon icon={faQrcode} className='mr-2' />
+          <i className='mr-2 fas fa-qrcode' />
           <span>打赏一杯咖啡</span>
       </div>
 
diff --git a/themes/NEXT/components/ShareButton.js b/themes/NEXT/components/ShareButton.js
index f872e910..39fea1f2 100644
--- a/themes/NEXT/components/ShareButton.js
+++ b/themes/NEXT/components/ShareButton.js
@@ -1,7 +1,5 @@
 import React from 'react'
 import ShareBar from './ShareBar'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faShareAltSquare } from '@fortawesome/free-solid-svg-icons'
 
 /**
  * 悬浮在屏幕右下角,分享按钮
@@ -27,7 +25,7 @@ const ShareButton = ({ post }) => {
         </div>
         <div ref={btnRef}
           className='z-20 border dark:border-gray-500 dark:bg-gray-600 bg-white cursor-pointer text-md hover:shadow-2xl shadow-lg'>
-          <FontAwesomeIcon icon={faShareAltSquare} className='transform duration-200 hover:scale-150 dark:text-gray-200 p-4' title='share' />
+          <i className='fas fa-share-alt-square transform duration-200 hover:scale-150 dark:text-gray-200 p-4' title='share' />
         </div>
     </div>
   )
diff --git a/themes/NEXT/components/SideAreaLeft.js b/themes/NEXT/components/SideAreaLeft.js
index 193d58ae..e59662be 100644
--- a/themes/NEXT/components/SideAreaLeft.js
+++ b/themes/NEXT/components/SideAreaLeft.js
@@ -48,7 +48,6 @@ const SideAreaLeft = (props) => {
           <div key={locale.NAV.ABOUT} className='mb-5 bg-white dark:bg-gray-800 duration-200 py-6'>
             <InfoCard />
             <>
-              {/* <div className='px-5 text-sm font-light pb-1 text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faChartBar} className='mr-2' />{locale.COMMON.ANALYTICS}</div> */}
               <div className='mt-2 text-center dark:text-gray-300 font-light text-xs'>
                 <span className='px-1 '>
                   <strong className='font-medium'>{postCount}</strong>{locale.COMMON.POSTS}</span>
diff --git a/themes/NEXT/components/SideBar.js b/themes/NEXT/components/SideBar.js
index dfe9f643..afd5333e 100644
--- a/themes/NEXT/components/SideBar.js
+++ b/themes/NEXT/components/SideBar.js
@@ -2,8 +2,6 @@ import CategoryGroup from './CategoryGroup'
 import InfoCard from './InfoCard'
 import TagGroups from './TagGroups'
 import { useGlobal } from '@/lib/global'
-import { faAngleDoubleRight, faTag, faThList } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import React from 'react'
 
@@ -32,10 +30,10 @@ const SideBar = ({ tags, currentTag, post, slot, categories, currentCategory })
       {categories && (
         <section className='mt-8'>
           <div className='text-sm px-5 flex flex-nowrap justify-between font-light'>
-            <div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-2' />{locale.COMMON.CATEGORY}</div>
+            <div className='text-gray-600 dark:text-gray-200'><i className='mr-2 fas fa-th-list' />{locale.COMMON.CATEGORY}</div>
             <Link href={'/category'} passHref>
               <a className='mb-3 text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
-                {locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
+                {locale.COMMON.MORE} <i className='fas fa-angle-double-right'/>
               </a>
             </Link>
           </div>
@@ -47,10 +45,10 @@ const SideBar = ({ tags, currentTag, post, slot, categories, currentCategory })
       {tags && (
         <section className='mt-4'>
           <div className='text-sm py-2 px-5 flex flex-nowrap justify-between font-light dark:text-gray-200'>
-            <div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faTag} className='mr-2'/>{locale.COMMON.TAGS}</div>
+            <div className='text-gray-600 dark:text-gray-200'><i className='mr-2 fas fa-tag'/>{locale.COMMON.TAGS}</div>
             <Link href={'/tag'} passHref>
               <a className='text-gray-400 hover:text-black  dark:hover:text-white hover:underline cursor-pointer'>
-                {locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
+                {locale.COMMON.MORE} <i className='fas fa-angle-double-right'/>
               </a>
             </Link>
           </div>