refactor(ui): migrate v-icon icons to iconify names and em sizing

Author: nhktmdzhg

src/components/FeaturesSection.vue

@@ -67,7 +67,7 @@ import FeatureCard from './FeatureCard.vue';
         </FeatureCard>
 
         <FeatureCard iconClass="color-sky" title="Chuẩn bài Linux">
-          <template #icon><v-icon name="si-linux" scale="1.5" /></template>
+          <template #icon><v-icon icon="simple-icons:linux" width="1.5em" height="1.5em" /></template>
           <p>
             Hoạt động ổn định trên X11/Wayland, tương thích ngược với Wine và
             hỗ trợ tối đa cho trình duyệt nhân Chromium.

src/components/FooterSection.vue

@@ -14,7 +14,7 @@
       <div class="footer-links">
         <h4>Liên kết</h4>
         <a href="https://github.com/LotusInputMethod/fcitx5-lotus" class="flex items-center gap-2">
-          <v-icon name="si-github" /> GitHub
+          <v-icon icon="simple-icons:github" /> GitHub
         </a>
         <a href="https://github.com/LotusInputMethod/fcitx5-lotus/releases">Releases</a>
         <a href="https://github.com/LotusInputMethod/fcitx5-lotus/issues/new?template=bug_report.yml">Báo lỗi

src/components/HeroSection.vue

@@ -70,35 +70,35 @@ onUnmounted(() => {
             </el-icon> Cài đặt ngay
           </el-button>
           <el-button size="large" class="btn-source" @click="goToGitHub">
-            <v-icon name="si-github" class="mr-2" scale="1.1" /> Xem trên
+            <v-icon icon="simple-icons:github" class="mr-2" width="1.1em" height="1.1em" /> Xem trên
             GitHub
           </el-button>
         </div>
         <div class="hero-stats">
           <div class="stat-item">
             <strong>
-              <v-icon name="hi-star" scale="1.8" class="align-bottom mr-1" />
+              <v-icon icon="heroicons:star" width="1.2em" height="1.2em" class="align-bottom mr-1" />
               {{ starCount }}
             </strong>
             <span>Stars</span>
           </div>
           <div class="stat-item">
             <strong>
-              <v-icon name="si-linux" scale="1.8" class="align-bottom mr-1" />
+              <v-icon icon="simple-icons:linux" width="1.2em" height="1.2em" class="align-bottom mr-1" />
               6+
             </strong>
             <span>Distros hỗ trợ</span>
           </div>
           <div class="stat-item">
             <strong>
-              <v-icon name="hi-users" scale="1.8" class="align-bottom mr-1" />
+              <v-icon icon="heroicons:users" width="1.2em" height="1.2em" class="align-bottom mr-1" />
               {{ contributorCount }}
             </strong>
             <span>Người đóng góp</span>
           </div>
           <div class="stat-item">
             <strong>
-              <v-icon name="hi-tag" scale="1.8" class="align-bottom mr-1" />
+              <v-icon icon="heroicons:tag" width="1.2em" height="1.2em" class="align-bottom mr-1" />
               <a v-if="latestVersion" :href="latestReleaseUrl" target="_blank" class="release-link">
                 {{ latestVersion }}
               </a>

src/components/NavBar.vue

@@ -54,7 +54,7 @@ onUnmounted(() => {
         </el-button>
 
         <el-button type="primary" round class="btn-github" @click="goToGitHub">
-          <v-icon name="si-github" class="mr-2" /> GitHub
+          <v-icon icon="simple-icons:github" class="mr-2" /> GitHub
         </el-button>
       </div>
 
@@ -81,7 +81,7 @@ onUnmounted(() => {
         <a href="#uninstall" @click="mobileMenuOpen = false">Gỡ cài đặt</a>
         <a href="#contributors" @click="mobileMenuOpen = false">Đóng góp</a>
         <el-button type="primary" @click="goToGitHub">
-          <v-icon name="si-github" class="mr-2" /> GitHub
+          <v-icon icon="simple-icons:github" class="mr-2" /> GitHub
         </el-button>
       </div>
     </Transition>

src/components/UninstallItem.vue

@@ -9,7 +9,7 @@ defineProps<{
   <details class="uninstall-details">
     <summary>
       <div class="distro-label">
-        <v-icon :name="icon" scale="1.4" class="mr-3" />
+        <v-icon :icon="icon" width="1.2em" height="1.2em" class="mr-3" />
         <span>{{ name }}</span>
       </div>
     </summary>

src/components/UsageSection.vue

@@ -170,7 +170,8 @@ const modeColumns = [
 
               <a href="https://fcitx-im.org/wiki/QuickPhrase" target="_blank"
                 class="text-link text-sm inline-flex items-center">
-                Xem chi tiết tại Fcitx5 Wiki <v-icon name="hi-external-link" class="ml-1" scale="0.8" />
+                Xem chi tiết tại Fcitx5 Wiki <v-icon icon="heroicons:arrow-top-right-on-square" class="ml-1"
+                  width="0.8em" height="0.8em" />
               </a>
             </div>
           </el-tab-pane>

src/data/installer.ts

@@ -1,11 +1,11 @@
 export const distros = [
-  { name: 'Ubuntu', icon: 'si-ubuntu' },
-  { name: 'Debian', icon: 'si-debian' },
-  { name: 'Fedora', icon: 'si-fedora' },
-  { name: 'Arch Linux', icon: 'si-archlinux' },
-  { name: 'openSUSE', icon: 'si-opensuse' },
-  { name: 'NixOS', icon: 'si-nixos' },
-  { name: 'Void Linux', icon: 'co-linux' },
+  { name: 'Ubuntu', icon: 'simple-icons:ubuntu' },
+  { name: 'Debian', icon: 'simple-icons:debian' },
+  { name: 'Fedora', icon: 'simple-icons:fedora' },
+  { name: 'Arch Linux', icon: 'simple-icons:archlinux' },
+  { name: 'openSUSE', icon: 'simple-icons:opensuse' },
+  { name: 'NixOS', icon: 'simple-icons:nixos' },
+  { name: 'Void Linux', icon: 'simple-icons:voidlinux' },
 ];
 
 export type StepBlock =