chore: twitter

Yourrrrlove · Jan 10, 2024 · 2aeb69a · 2aeb69a
1 parent ce318e0
commit 2aeb69a
Show file tree

Hide file tree

Showing 15 changed files with 63 additions and 240 deletions.
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-github-btn": "^1.4.0",
+    "react-icons": "^5.0.0",
     "react-router-dom": "^6.21.1",
     "smooth-scroll-into-view-if-needed": "^2.0.2",
     "styled-components": "^6.1.2",

diff --git a/src/components/Bgm.jsx b/src/components/Bgm.jsx
@@ -1,4 +1,5 @@
 import React, { useState, useRef } from 'react';
+import { TfiHeadphone } from 'react-icons/tfi';
 import styled, { keyframes } from 'styled-components';
 const Rotation = keyframes`
   from {
@@ -16,7 +17,7 @@ const Swing = keyframes`
       transform: translateX(0);
     }
 `;
-const StyledWraper = styled.aside`
+const StyledWrapper = styled.aside`
   position: fixed;
   left: 0.4rem;
   bottom: 0.4rem;
@@ -25,6 +26,7 @@ const StyledWraper = styled.aside`
   border-radius: 50%;
   cursor: pointer;
   background: #fff;
+  color: #333;
   padding: 0.3rem;
   box-shadow: 0 0 6px black;
   display: flex;
@@ -76,23 +78,8 @@ export default function Bgm() {
   };
 
   return (
-    <StyledWraper onClick={togglePlay} className={playing ? 'playing' : 'paused'}>
-      <svg
-        t="1571192531683"
-        className="icon"
-        viewBox="0 0 1024 1024"
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-        p-id="9314"
-        width="24"
-        height="24"
-      >
-        <path
-          d="M217.7 928.3c-47.7 0-84.1-36.4-84.1-84.1V619.9c0-47.7 36.4-84.1 84.1-84.1 47.7 0 84.1 36.4 84.1 84.1v224.3c0 47.6-36.5 84.1-84.1 84.1z m672.7-84.1V619.9c0-47.7-39.2-84.1-84.1-84.1-44.9 0-84.1 36.4-84.1 84.1v224.3c0 47.7 39.2 84.1 84.1 84.1 44.9 0 84.1-36.5 84.1-84.1z m70.1-266.3C960.5 320 755.9 95.7 512 95.7S63.5 322.8 63.5 577.9v280.3h42V577.9c0-235.5 185-442.9 406.5-442.9s406.5 207.4 406.5 442.9v280.3h42V577.9z"
-          p-id="9315"
-          fill="#515151"
-        ></path>
-      </svg>
+    <StyledWrapper onClick={togglePlay} className={playing ? 'playing' : 'paused'}>
+      <TfiHeadphone size="28" fill="#333" />
       <audio
         ref={bgMusic}
         autoPlay={false}
@@ -102,6 +89,6 @@ export default function Bgm() {
         src="/bgm.mp3"
       ></audio>
       {!played && <div className="tip">👈 点击播放</div>}
-    </StyledWraper>
+    </StyledWrapper>
   );
 }
diff --git a/src/components/ColorSet/IconCollection.jsx b/src/components/ColorSet/IconCollection.jsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { BiCollection } from 'react-icons/bi';
 import styled from 'styled-components';
 import ChineseBorder from '../../assets/img/chinese.circle.border.png';
 
@@ -47,22 +48,7 @@ const IconCollection = ({ showCollection, ...rest }) => {
     <Wrapper onClick={handleClick} {...rest}>
       {showTip && <p className="favTip">暂无收藏</p>}
 
-      <svg
-        t="1568178514471"
-        className="icon"
-        viewBox="0 0 1024 1024"
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-        p-id="8559"
-        width="32"
-        height="32"
-      >
-        <path
-          d="M914.304 182.848H109.696v36.608h804.608v-36.608z m-73.152-109.696H182.848v36.544h658.304v-36.544z m109.696 256h36.544v-36.608H36.544v621.696h950.912v-512h-36.608v475.456H73.152V329.152h877.696zM510.464 440.064a130.112 130.112 0 0 0-181.056-2.112 132.8 132.8 0 0 0 1.6 188.224l166.784 165.952a17.984 17.984 0 0 0 25.6 0l166.528-165.952a132.8 132.8 0 0 0 1.28-188.288 130.112 130.112 0 0 0-180.736 2.176z m182.848 88.256a100.288 100.288 0 0 1-29.184 71.936l-153.6 152.896-153.6-152.896a100.288 100.288 0 0 1-29.12-71.936 88.384 88.384 0 0 1 26.944-64 93.504 93.504 0 0 1 130.112 1.536l25.6 25.6 25.6-25.6a93.504 93.504 0 0 1 130.112-1.536 88.384 88.384 0 0 1 27.136 63.936z"
-          fill="#fff"
-          p-id="8560"
-        ></path>
-      </svg>
+      <BiCollection size="28" />
     </Wrapper>
   );
 };

diff --git a/src/components/ColorSet/index.jsx b/src/components/ColorSet/index.jsx
@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
-
+import { GiYinYang } from 'react-icons/gi';
 import styled from 'styled-components';
 import IconCollection from './IconCollection';
-import Yinyang from '../../assets/img/yinyang.svg';
 
 const Wrapper = styled.div`
   ul {
@@ -39,14 +38,13 @@ const Wrapper = styled.div`
     right: -1.6rem;
     top: 50%;
     transform: translateY(-50%);
-    background-image: url(${Yinyang});
-    background-size: cover;
     width: 3rem;
     height: 3rem;
-    border: 1px solid #000;
     border-radius: 50%;
+    border: none;
     transition: all 0.6s;
-    box-shadow: 1px -1px 6px black;
+    /* box-shadow: 1px -1px 6px black; */
+    padding: 0;
   }
   &.expand .btn {
     transform: translateY(-50%) rotateZ(180deg);
@@ -56,14 +54,14 @@ const Wrapper = styled.div`
 const ColorSet = ({ currSetName = '', setCurrSet, sets = [] }) => {
   const [isHover, setIsHover] = useState(false);
 
-  const handleSetClick = name => {
+  const handleSetClick = (name) => {
     console.log('clicked set name', name);
 
     setCurrSet(name);
   };
 
   const handleSetHover = () => {
-    setIsHover(prev => !prev);
+    setIsHover((prev) => !prev);
   };
   return (
     <Wrapper className={`sets ${isHover ? 'expand' : ''}`}>
@@ -80,7 +78,7 @@ const ColorSet = ({ currSetName = '', setCurrSet, sets = [] }) => {
                 onClick={handleSetClick.bind(null, name)}
                 key={name}
                 style={{
-                  background: `rgba(${RGB.join(',')})`
+                  background: `rgba(${RGB.join(',')})`,
                 }}
                 className={name == currSetName ? 'selected' : ''}
               >
@@ -91,7 +89,9 @@ const ColorSet = ({ currSetName = '', setCurrSet, sets = [] }) => {
           return null;
         })}
       </ul>
-      <button onClick={handleSetHover} className="btn"></button>
+      <button onClick={handleSetHover} className="btn">
+        <GiYinYang className="icon" fill="#000" size="100%" />
+      </button>
     </Wrapper>
   );
 };

diff --git a/src/components/ColorTitle/IconCopy.jsx b/src/components/ColorTitle/IconCopy.jsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
+import { IoCopyOutline } from 'react-icons/io5';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 // import FadeInDown from '../animates/FadeInDown';
 const Wrapper = styled.div`
@@ -10,13 +11,15 @@ const Wrapper = styled.div`
   position: relative;
   .icon {
     width: 1.4rem;
+    margin-top: 4px;
   }
   > .hex {
     font-size: 0.6rem;
     padding: 0.3rem;
     background: rgba(51, 51, 51, 0.5);
     border-radius: 0.2rem;
     text-transform: uppercase;
+    margin-top: 5px;
   }
   .copyTip {
     position: absolute;
@@ -46,29 +49,9 @@ const IconFav = ({ currColorHex }) => {
       }}
     >
       <Wrapper onClick={handleCopyClick}>
-        <svg
-          t="1568174087144"
-          className="icon"
-          viewBox="0 0 1024 1024"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          p-id="7098"
-          width="36"
-          height="36"
-        >
-          <path
-            d="M220.429 838.029c-18.2 0-32.9-14.7-32.9-32.9v-437c0-18.2 14.7-32.9 32.9-32.9h440c18.2 0 32.9 14.7 32.9 32.9v436.9c0 18.2-14.7 32.9-32.9 32.9h-440z m407-65.9v-371.1h-374.1v371.1h374.1z"
-            fill="#fff"
-            p-id="7099"
-          ></path>
-          <path
-            d="M438.129 254.029c-18.2 0-32.9-14.7-32.9-32.9s14.7-32.9 32.9-32.9h369.6c18.2 0 32.9 14.7 32.9 32.9v363.5c0 18.2-14.7 32.9-32.9 32.9s-32.9-14.7-32.9-32.9v-330.6h-336.7z"
-            fill="#fff"
-            p-id="7100"
-          ></path>
-        </svg>
+        <IoCopyOutline className="icon" />
         <span className="hex">{currColorHex}</span>
-        {copied ? <span className="copyTip">已复制!</span> : null}
+        {copied ? <span className="copyTip">已复制！</span> : null}
       </Wrapper>
     </CopyToClipboard>
   );

diff --git a/src/components/ColorTitle/IconDownload.jsx b/src/components/ColorTitle/IconDownload.jsx
@@ -1,5 +1,5 @@
 // import React from 'react';
-
+import { MdDownload } from 'react-icons/md';
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
@@ -20,27 +20,7 @@ const Wrapper = styled.div`
 const IconDownload = ({ handleDownload }) => {
   return (
     <Wrapper className="download" onClick={handleDownload}>
-      <svg
-        t="1568731641905"
-        className="icon"
-        viewBox="0 0 1047 1024"
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-        p-id="1446"
-        width="32"
-        height="32"
-      >
-        <path
-          d="M523.987449 0a42.759353 42.759353 0 0 0-42.759353 42.759353v498.158822L301.663529 361.353608a43.500845 43.500845 0 0 0-60.555153 0 42.759353 42.759353 0 0 0 0 60.431572l227.020033 227.267198a79.092445 79.092445 0 0 0 111.223751 0l227.514362-227.143616a42.635771 42.635771 0 0 0 0-60.555154 42.882935 42.882935 0 0 0-60.555153 0L566.870384 540.918175V42.759353A42.882935 42.882935 0 0 0 523.987449 0z"
-          fill="#ffffff"
-          p-id="1447"
-        ></path>
-        <path
-          d="M860.871832 120.245233a42.882935 42.882935 0 1 0 0 85.642288 101.584359 101.584359 0 0 1 101.460777 101.584359v529.301473a101.584359 101.584359 0 0 1-101.460777 101.584359H187.226647a101.707941 101.707941 0 0 1-101.584359-101.584359V307.47188a101.707941 101.707941 0 0 1 101.584359-101.584359 42.882935 42.882935 0 0 0 0-85.642288A187.473811 187.473811 0 0 0 0 307.47188v529.301473a187.473811 187.473811 0 0 0 187.226647 187.226647h673.645185A187.350229 187.350229 0 0 0 1047.974897 836.773353V307.47188A187.350229 187.350229 0 0 0 860.871832 120.245233z"
-          fill="#ffffff"
-          p-id="1448"
-        ></path>
-      </svg>
+      <MdDownload />
     </Wrapper>
   );
 };

diff --git a/src/components/ColorTitle/IconFav.jsx b/src/components/ColorTitle/IconFav.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
+import { IoMdHeart } from 'react-icons/io';
 
 const Wrapper = styled.div`
   position: absolute;
@@ -48,22 +49,7 @@ const IconFav = ({ currColor }) => {
   };
   return (
     <Wrapper className="fav" onClick={toggleFav}>
-      <svg
-        t="1568172188297"
-        className="icon"
-        viewBox="0 0 1024 1024"
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-        p-id="2640"
-        width="32"
-        height="32"
-      >
-        <path
-          d="M512 910.933333l-61.866667-56.106667c-219.733333-199.466667-364.8-331.093333-364.8-492.16 0-131.626667 103.04-234.666667 234.666667-234.666667 74.24 0 145.493333 34.56 192 88.96 46.506667-54.4 117.76-88.96 192-88.96 131.626667 0 234.666667 103.04 234.666667 234.666667 0 161.066667-145.066667 292.693333-364.8 492.16l-61.866667 56.106667z"
-          p-id="2641"
-          fill={isFav ? '#ef7a82' : '#fff'}
-        ></path>
-      </svg>
+      <IoMdHeart className="icon" fill={isFav ? '#ef7a82' : '#fff'} />
     </Wrapper>
   );
 };

diff --git a/src/components/IconBack.jsx b/src/components/IconBack.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
-
+import { IoArrowBackCircleOutline } from 'react-icons/io5';
 import Icon from './Icon';
 
 const IconBack = () => {
@@ -10,30 +10,7 @@ const IconBack = () => {
       handleClick={() => {
         navigateTo('/');
       }}
-      icon={
-        <svg
-          style={{ width: '2rem', height: '2rem' }}
-          t="1569329382185"
-          className="icon"
-          viewBox="0 0 1024 1024"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          p-id="3667"
-          width="45"
-          height="45"
-        >
-          <path
-            d="M512 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333zM512 853.333333c-188.202667 0-341.333333-153.130667-341.333333-341.333333s153.130667-341.333333 341.333333-341.333333 341.333333 153.130667 341.333333 341.333333S700.202667 853.333333 512 853.333333z"
-            p-id="3668"
-            fill="#ffffff"
-          ></path>
-          <path
-            d="M626.304 329.984 568.362667 267.349333 322.048 495.189333 567.552 734.549333 627.114667 673.450667 445.952 496.810667Z"
-            p-id="3669"
-            fill="#ffffff"
-          ></path>
-        </svg>
-      }
+      icon={<IoArrowBackCircleOutline size="35" />}
     ></Icon>
   );
 };

diff --git a/src/components/IconImage.jsx b/src/components/IconImage.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import Icon from './Icon';
+import { GoImage } from 'react-icons/go';
 
 const IconImage = ({ path = '' }) => {
   const navigateTo = useNavigate();
@@ -10,29 +11,7 @@ const IconImage = ({ path = '' }) => {
       handleClick={() => {
         navigateTo(path);
       }}
-      icon={
-        <svg
-          t="1569320467584"
-          className="icon"
-          viewBox="0 0 1073 1024"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          p-id="1776"
-          width="32"
-          height="32"
-        >
-          <path
-            d="M191.597683 1024h690.029335A191.850117 191.850117 0 0 0 1072.84605 833.033403V191.597683A191.850117 191.850117 0 0 0 881.627018 0H191.597683A191.850117 191.850117 0 0 0 0 191.597683V833.033403a191.850117 191.850117 0 0 0 191.597683 190.966597zM87.468507 833.033403V191.597683a104.255393 104.255393 0 0 1 104.129176-104.129176h690.029335a104.255393 104.255393 0 0 1 104.129176 104.129176V833.033403a104.255393 104.255393 0 0 1-104.129176 104.129176H191.597683A104.255393 104.255393 0 0 1 87.468507 833.033403z"
-            fill="#ffffff"
-            p-id="1777"
-          ></path>
-          <path
-            d="M351.767287 481.770985a154.616048 154.616048 0 1 0-154.616048-154.616048 154.742265 154.742265 0 0 0 154.616048 154.616048z m-67.147541-154.616048a67.147541 67.147541 0 1 1 67.147541 67.147541 67.147541 67.147541 0 0 1-67.147541-67.147541zM191.597683 826.848761a43.544928 43.544928 0 0 0 30.923209-12.621718L388.748921 647.74658 536.675459 795.168248l400.48712-400.108467a43.797362 43.797362 0 0 0 0-61.84642 45.816837 45.816837 0 0 0-61.84642 0L536.675459 671.980279 388.748921 524.053741 160.674473 752.128189a43.923579 43.923579 0 0 0-12.621718 30.92321 43.797362 43.797362 0 0 0 43.671145 43.797362z"
-            fill="#ffffff"
-            p-id="1778"
-          ></path>
-        </svg>
-      }
+      icon={<GoImage size="36" />}
     ></Icon>
   );
 };

diff --git a/src/components/IconInfo.jsx b/src/components/IconInfo.jsx
@@ -1,35 +1,8 @@
-import React from 'react';
 import Icon from './Icon';
+import { GoInfo } from 'react-icons/go';
 
 const IconInfo = ({ showInfoModal }) => {
-  return (
-    <Icon
-      handleClick={showInfoModal}
-      icon={
-        <svg
-          t="1568731000727"
-          className="icon"
-          viewBox="0 0 1024 1024"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          p-id="1168"
-          width="32"
-          height="32"
-        >
-          <path
-            d="M873.93304 149.954855A511.943948 511.943948 0 1 0 312.687215 983.626704 512.426118 512.426118 0 0 0 983.626704 711.200681a511.58232 511.58232 0 0 0-109.693664-561.245826z m66.057284 361.627465A428.046376 428.046376 0 1 1 511.943948 84.379742 428.528546 428.528546 0 0 1 940.231409 511.943948z"
-            fill="#ffffff"
-            p-id="1169"
-          ></path>
-          <path
-            d="M511.943948 328.960451A41.948786 41.948786 0 0 0 470.115704 370.909236v423.104134a41.948786 41.948786 0 0 0 84.379742 0v-423.104134a41.948786 41.948786 0 0 0-42.551498-41.948785zM511.943948 164.540497A41.948786 41.948786 0 0 0 470.115704 206.489282v23.505786a41.948786 41.948786 0 0 0 84.379742 0v-23.505786a41.948786 41.948786 0 0 0-42.551498-41.948785z"
-            fill="#ffffff"
-            p-id="1170"
-          ></path>
-        </svg>
-      }
-    ></Icon>
-  );
+  return <Icon handleClick={showInfoModal} icon={<GoInfo size="34" />}></Icon>;
 };
 
 export default IconInfo;