feat: replace svg with iconify (#606)

apps/client/assets/comments.json

@@ -6,7 +6,6 @@
     "link": "",
     "comment": "Earthworm is more than just a tool; It's a journey into the heart of language learning, making every sentence and conjunction an adventure. With its addictive gameplay, it's not just an exercise, it's a daily habit that invites you to take a deeper look at the richness of the English language!",
     "chinese": " Earthworm 不仅仅是一个工具;这是一次进入语言学习核心的旅程，让每个句子和连词都成为一次冒险。凭借其令人上瘾的游戏玩法，它不仅是一种练习，而且是一种日常习惯，邀请您更深入地了解英语的丰富性！",
-    "icon": "/twitter.svg",
     "time": 1708423574717,
     "likeCount": 1342
   },
@@ -17,7 +16,6 @@
     "link": "",
     "comment": "I am simply fascinated by this app! This progressive way of learning makes each stage full of challenges, but also gives me a strong sense of achievement. I have been unable to stop the pace of learning, I am eager to make a little progress, I hope you can climb another tall building!",
     "chinese": "我简直被这款应用迷住了！这种渐进式的学习方式，让每个阶段都充满挑战，同时也让我有了一种强烈的成就感。我已经不能停下学习的脚步，我渴望一点点的进步，希望能更上一层楼！",
-    "icon": "/twitter.svg",
     "time": 1708409873687,
     "likeCount": 197
   },
@@ -28,7 +26,6 @@
     "link": "",
     "comment": "This application overcomes the boredom of English learning. I can't stop brushing courses now.",
     "chinese": "这个应用克服了英语学习的枯燥，我现在刷课程刷得停不下来。",
-    "icon": "/twitter.svg",
     "time": 1706005913747,
     "likeCount": 79
   },
@@ -39,7 +36,6 @@
     "link": "",
     "comment": "Now I go through the app every day and I feel that my English has improved by leaps and bounds, which is fun and fulfilling. I hope to be able to join and share after studying like me, it will be addictive!",
     "chinese": "现在我每天都要浏览这个应用程序，我觉得我的英语突飞猛进，有趣又充满成就感。我希望能够加入和我一样学习后进行打卡分享，会上瘾的！",
-    "icon": "/twitter.svg",
     "time": 1706931528936,
     "likeCount": 520
   },
@@ -50,7 +46,6 @@
     "link": "",
     "comment": "Such interesting and fulfilling English learning application, it is really overwhelming. I practice it every day now, it has become a habit. Awesome!",
     "chinese": "如此有趣又充实的英语学习应用，真是让人不知所措。我现在每天都在练习，这已经成为一种习惯。棒！",
-    "icon": "/twitter.svg",
     "time": 1706863861905,
     "likeCount": 98
   },
@@ -61,7 +56,6 @@
     "link": "",
     "comment": "Through sentence splitting, I feel that I have a deeper understanding of sentences after brushing the lessons. The feeling is subtle, and when I open it the next day, it gets smoother every time!",
     "chinese": "通过句子拆分进行学习，我感觉我刷课之后，对句子的理解更加深刻。这种感觉是潜移默化的，当我第二天打开，每次都会变得更加流畅！",
-    "icon": "/twitter.svg",
     "time": 1704763341161,
     "likeCount": 86
   },
@@ -72,7 +66,6 @@
     "link": "",
     "comment": "I have never been so enthusiastic about learning as I am now. This app really makes learning so interesting that every learning is like a challenge that I can't resist. It's such a great feeling that I can keep brushing the course without getting bored.",
     "chinese": "再也没有像现在这样，我对学习如此充满热情。这个应用真是把学习变得如此有趣，每一次学习都像是一种挑战，让我无法抗拒。这种感觉太棒了，我能够一直刷课程而不觉得无聊",
-    "icon": "/twitter.svg",
     "time": 1709913419937,
     "likeCount": 486
   },
@@ -83,7 +76,6 @@
     "link": "",
     "comment": "I really can't resist the magic of this English learning application of conjunctions and sentences. When I am free every day, I will habitually open this app and can't help but challenge myself. This is a new way of entertainment for me!",
     "chinese": "我真的无法抵抗这款连词造句的英语学习应用的魔力，每天闲下来的时候，我都会习惯性地打开这款应用，忍不住去挑战一下自己，这对我来说是一种全新的娱乐方式！",
-    "icon": "/twitter.svg",
     "time": 1708567188968,
     "likeCount": 232
   },
@@ -94,7 +86,6 @@
     "link": "",
     "comment": "I didn't expect that learning English could be so interesting. I can't stop the way this conjunction makes sentences.",
     "chinese": "真没想到学习英语可以这么有趣，这个连词造句的方式简直让我停不下来。",
-    "icon": "/twitter.svg",
     "time": 1703189419913,
     "likeCount": 78
   }

apps/client/components/DropMenu.vue

@@ -7,22 +7,7 @@
       tabindex="0"
       class="btn btn-ghost btn-sm mx-0 h-8 rounded-md px-1"
     >
-      <svg
-        t="1711437189034"
-        class="icon"
-        viewBox="0 0 1024 1024"
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-        p-id="9876"
-        width="1.5em"
-        height="1.5em"
-      >
-        <path
-          d="M716.714667 912.384a30.378667 30.378667 0 0 0-4.48-3.925333 24.576 24.576 0 0 0-4.266667 3.669333 51.541333 51.541333 0 0 1-35.754667 14.336 50.730667 50.730667 0 0 1-24.917333-6.4l-22.997333-12.8a50.730667 50.730667 0 0 1-23.424-60.672l0.256-0.981333a3.968 3.968 0 0 0-2.901334-3.157334 51.2 51.2 0 0 1-44.16-42.922666 211.456 211.456 0 0 1-2.261333-25.173334 169.216 169.216 0 0 1 2.517333-25.6 51.2 51.2 0 0 1 43.904-42.922666c1.408-0.256 2.901333-1.493333 2.901334-2.517334a4.266667 4.266667 0 0 0-0.256-1.493333 50.901333 50.901333 0 0 1 23.936-60.928l24.661333-13.568a53.077333 53.077333 0 0 1 24.661333-6.4 50.261333 50.261333 0 0 1 35.072 14.08l4.266667 3.669333h0.256a37.248 37.248 0 0 0 4.266667-3.669333 51.498667 51.498667 0 0 1 34.816-13.568 49.578667 49.578667 0 0 1 24.661333 6.4l23.936 13.098667a51.456 51.456 0 0 1 23.68 60.928l-0.256 0.768a3.285333 3.285333 0 0 0 2.986667 3.242666 51.2 51.2 0 0 1 43.904 42.922667 182.016 182.016 0 0 1 2.176 25.6 186.154667 186.154667 0 0 1-2.176 25.6 50.901333 50.901333 0 0 1-43.904 42.666667c-1.493333 0.256-2.986667 1.664-2.986667 2.688a4.266667 4.266667 0 0 0 0.256 1.493333 51.2 51.2 0 0 1-23.936 60.672l-23.936 13.354667a49.578667 49.578667 0 0 1-24.661333 6.4 51.2 51.2 0 0 1-35.84-14.890667z m26.069333-45.098667a102.4 102.4 0 0 1 9.898667 8.533334l23.936-13.312a51.2 51.2 0 0 1-2.986667-16.512 54.442667 54.442667 0 0 1 47.658667-54.229334 173.653333 173.653333 0 0 0 1.664-17.493333 170.666667 170.666667 0 0 0-1.664-17.578667 54.570667 54.570667 0 0 1-47.658667-54.229333 48.64 48.64 0 0 1 2.986667-16.512l-23.68-13.312a80.085333 80.085333 0 0 1-9.898667 7.936 45.013333 45.013333 0 0 1-59.178667 0c-4.266667-3.242667-7.68-6.186667-9.898666-8.149333l-24.661334 13.568a58.026667 58.026667 0 0 1 2.730667 16.512 54.570667 54.570667 0 0 1-47.317333 54.229333 88.789333 88.789333 0 0 0 0 35.072 54.442667 54.442667 0 0 1 47.317333 54.229333 59.733333 59.733333 0 0 1-2.730667 16.512l22.741334 12.8c2.432-2.176 5.674667-5.162667 9.813333-8.533333a52.565333 52.565333 0 0 1 30.336-11.562667 51.797333 51.797333 0 0 1 30.592 12.074667z m-592.768 8.533334a362.965333 362.965333 0 0 1 286.421333-354.517334 219.861333 219.861333 0 1 1 152.917334 0 368.981333 368.981333 0 0 1 82.688 28.416 32.085333 32.085333 0 1 1-28.16 57.685334 294.016 294.016 0 0 0-130.986667-30.336 299.050667 299.050667 0 0 0-298.666667 298.666666 32.042667 32.042667 0 1 1-64 0zM357.674667 316.330667a155.349333 155.349333 0 0 0 155.178666 154.922666 155.221333 155.221333 0 0 0 155.178667-154.922666 155.178667 155.178667 0 0 0-310.314667 0z m292.352 457.685333a62.165333 62.165333 0 1 1 62.165333 62.165333 62.208 62.208 0 0 1-62.122667-62.122666z m42.666666 0a19.498667 19.498667 0 1 0 19.498667-19.498667 19.413333 19.413333 0 0 0-19.456 19.541334z"
-          p-id="9877"
-          fill="currentColor"
-        ></path>
-      </svg>
+      <i class="i-ph-user-gear h-6 w-6"></i>
     </button>
     <ul
       v-if="showDropdown"
@@ -38,7 +23,11 @@
           @click="item.eventName"
           class="flex items-center gap-2 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-fuchsia-500 dark:hover:text-white"
         >
-          <span v-html="item.icon"></span>
+          <!-- <span v-html="item.icon"></span> -->
+          <i
+            class="h-6 w-6"
+            :class="item.icon"
+          ></i>
 
           <span class="text-sm font-medium">
             {{ item.title }}
@@ -69,56 +58,25 @@ const MENU_OPTIONS = [
     title: "用户信息",
     name: "accountInfo",
     eventName: handleViewUserInfo,
-    icon: `<svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="size-5 opacity-75"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-        stroke-width="2"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-        />
-      </svg>`,
+    icon: "i-ph-user",
   },
   {
     title: "返回游戏",
     name: GO_BACK_GAME_NAME,
     eventName: handleGoBackGamePage,
-    icon: `<svg xmlns="http://www.w3.org/2000/svg" class="size-5 opacity-75" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 11h4M8 9v4m7-1h.01M18 10h.01m-.69-5H6.68a4 4 0 0 0-3.978 3.59l-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258q-.01-.075-.017-.151A4 4 0 0 0 17.32 5"/></svg>`,
+    icon: "i-ph-game-controller",
   },
   {
     title: "设置",
     name: "setting",
     eventName: handleSetting,
-    icon: `<svg
-      xmlns="http://www.w3.org/2000/svg"
-      class="size-5 opacity-75"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      stroke-width="2"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-      />
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-      />
-    </svg>`,
+    icon: "i-ph-gear",
   },
   {
     title: "登出",
     name: "logout",
     eventName: handleLogout,
-    icon: `<svg xmlns="http://www.w3.org/2000/svg" class="size-5 opacity-75" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4m7 14l5-5l-5-5m5 5H9"/></svg>`,
+    icon: "i-ph-sign-out",
   },
 ];
 const showMenuOptions = computed(() => {

apps/client/components/Navbar.vue

@@ -71,33 +71,14 @@
             class="btn btn-ghost btn-sm mx-1 h-8 w-8 rounded-md p-0"
             @click="toggleDarkMode"
           >
-            <svg
+            <i
               v-if="isDarkMode"
-              xmlns="http://www.w3.org/2000/svg"
-              width="1.5em"
-              height="1.5em"
-              viewBox="0 0 256 256"
-            >
-              <path
-                fill="currentColor"
-                d="M233.54 142.23a8 8 0 0 0-8-2a88.08 88.08 0 0 1-109.8-109.8a8 8 0 0 0-10-10a104.84 104.84 0 0 0-52.91 37A104 104 0 0 0 136 224a103.09 103.09 0 0 0 62.52-20.88a104.84 104.84 0 0 0 37-52.91a8 8 0 0 0-1.98-7.98m-44.64 48.11A88 88 0 0 1 65.66 67.11a89 89 0 0 1 31.4-26A106 106 0 0 0 96 56a104.11 104.11 0 0 0 104 104a106 106 0 0 0 14.92-1.06a89 89 0 0 1-26.02 31.4"
-              />
-            </svg>
-            <svg
+              class="i-ph-moon h-6 w-6"
+            ></i>
+            <i
               v-else
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
-              stroke="currentColor"
-              class="h-6 w-6"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
-              />
-            </svg>
+              class="i-ph-sun h-6 w-6"
+            ></i>
           </button>
         </div>
       </div>

apps/client/components/common/backTop.vue

@@ -4,14 +4,9 @@
     @click="scrollToTop"
     :data-content="route.path === '/' ? 'Back to Top' : 'Go to Home'"
   >
-    <svg
-      class="svgIcon w-3 fill-black transition-all duration-300 dark:fill-white"
-      viewBox="0 0 384 512"
-    >
-      <path
-        d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"
-      ></path>
-    </svg>
+    <i
+      class="svgIcon i-ph-arrow-up-bold h-5 w-5 fill-black transition-all duration-300 dark:fill-white"
+    ></i>
   </button>
 </template>
 

apps/client/components/home/Banner.vue

@@ -54,44 +54,18 @@
           class="relative inline-flex -translate-x-0 items-center transition group-hover:-translate-x-6"
         >
           <div
-            class="absolute translate-x-0 text-purple-600 opacity-100 transition group-hover:-translate-x-6 group-hover:opacity-0"
+            class="absolute flex translate-x-0 items-center justify-center text-purple-600 opacity-100 transition group-hover:-translate-x-6 group-hover:opacity-0"
           >
-            <svg
-              width="15"
-              height="15"
-              viewBox="0 0 15 15"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-            >
-              <path
-                d="M7.22303 0.665992C7.32551 0.419604 7.67454 0.419604 7.77702 0.665992L9.41343 4.60039C9.45663 4.70426 9.55432 4.77523 9.66645 4.78422L13.914 5.12475C14.18 5.14607 14.2878 5.47802 14.0852 5.65162L10.849 8.42374C10.7636 8.49692 10.7263 8.61176 10.7524 8.72118L11.7411 12.866C11.803 13.1256 11.5206 13.3308 11.2929 13.1917L7.6564 10.9705C7.5604 10.9119 7.43965 10.9119 7.34365 10.9705L3.70718 13.1917C3.47945 13.3308 3.19708 13.1256 3.25899 12.866L4.24769 8.72118C4.2738 8.61176 4.23648 8.49692 4.15105 8.42374L0.914889 5.65162C0.712228 5.47802 0.820086 5.14607 1.08608 5.12475L5.3336 4.78422C5.44573 4.77523 5.54342 4.70426 5.58662 4.60039L7.22303 0.665992Z"
-                fill="currentColor"
-              ></path>
-            </svg>
+            <i class="i-ph-star-fill h-5 w-5"></i>
           </div>
           <span
             class="bg-gradient-to-r from-purple-600 to-gray-300 bg-clip-text pl-6 font-medium text-transparent"
             >Star us on GitHub</span
           >
           <div
-            class="absolute right-0 translate-x-12 text-purple-400 opacity-0 transition group-hover:translate-x-6 group-hover:opacity-100"
+            class="absolute right-0 flex translate-x-12 items-center justify-center text-purple-400 opacity-0 transition group-hover:translate-x-6 group-hover:opacity-100"
           >
-            <svg
-              width="15"
-              height="15"
-              viewBox="0 0 15 15"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-            >
-              <path
-                d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z"
-                fill="currentColor"
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-              ></path>
-            </svg>
+            <i class="i-ph-arrow-right h-5 w-5"></i>
           </div>
         </div>
       </a>

apps/client/components/home/Comments.vue

@@ -29,11 +29,7 @@
                     {{ "@" + item.account }}
                   </p>
                 </div>
-                <img
-                  width="30"
-                  :src="item.icon"
-                  class="self-start"
-                />
+                <i class="i-simple-icons-twitter h-6 w-6 self-start text-[#03a9f4]"></i>
               </div>
               <p class="mt-4 text-sm text-gray-700 dark:text-gray-300 lg:text-base">
                 {{ item.chinese }}
@@ -46,14 +42,9 @@
               <div class="mx-auto my-4"></div>
               <div class="mt-4 flex items-center justify-between text-xs">
                 <div class="flex items-center">
-                  <svg
-                    class="mr-2 h-5 w-5 fill-current text-pink-300 dark:text-blue-300"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
-                    />
-                  </svg>
+                  <i
+                    class="i-ph-heart-straight-fill mr-2 h-5 w-5 fill-current text-pink-300 dark:text-blue-300"
+                  ></i>
                   <span class="text-gray-500 dark:text-gray-400">{{ item.likeCount }} likes</span>
                 </div>
                 <a