perf: 将本地图标全部按需引入，首屏加载减少 61 个图标资源，首屏加载再次变快 (#389)

* perf: 优化图标，将本地图标按需引入，首屏加载减少 `61` 个图标资源，首屏加载再次变快

src/views/system/dept/index.vue

@@ -6,6 +6,11 @@ import { FormInstance } from "element-plus";
 import { reactive, ref, onMounted } from "vue";
 import { TableProBar } from "@/components/ReTable";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Delete from "@iconify-icons/ep/delete";
+import EditPen from "@iconify-icons/ep/edit-pen";
+import Search from "@iconify-icons/ep/search";
+import Refresh from "@iconify-icons/ep/refresh";
+import AddFill from "@iconify-icons/ri/add-circle-line";
 
 defineOptions({
   name: "Dept"
@@ -74,13 +79,13 @@ onMounted(() => {
       <el-form-item>
         <el-button
           type="primary"
-          :icon="useRenderIcon('search')"
+          :icon="useRenderIcon(Search)"
           :loading="loading"
           @click="onSearch"
         >
           搜索
         </el-button>
-        <el-button :icon="useRenderIcon('refresh')" @click="resetForm(formRef)">
+        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
           重置
         </el-button>
       </el-form-item>
@@ -94,7 +99,7 @@ onMounted(() => {
       @refresh="onSearch"
     >
       <template #buttons>
-        <el-button type="primary" :icon="useRenderIcon('add')">
+        <el-button type="primary" :icon="useRenderIcon(AddFill)">
           新增部门
         </el-button>
       </template>
@@ -124,7 +129,7 @@ onMounted(() => {
               type="primary"
               :size="size"
               @click="handleUpdate(row)"
-              :icon="useRenderIcon('edits')"
+              :icon="useRenderIcon(EditPen)"
             >
               修改
             </el-button>
@@ -135,7 +140,7 @@ onMounted(() => {
                   link
                   type="primary"
                   :size="size"
-                  :icon="useRenderIcon('delete')"
+                  :icon="useRenderIcon(Delete)"
                   @click="handleDelete(row)"
                 >
                   删除

src/views/system/dict/config.vue

@@ -4,6 +4,8 @@ import { ref, reactive } from "vue";
 import { type Direction } from "element-plus";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { type VxeTableEvents, type VxeTableInstance } from "vxe-table";
+import Delete from "@iconify-icons/ep/delete";
+import EditPen from "@iconify-icons/ep/edit-pen";
 
 interface Props {
   drawer: boolean;
@@ -108,7 +110,7 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
               <el-button
                 link
                 type="primary"
-                :icon="useRenderIcon('edits')"
+                :icon="useRenderIcon(EditPen)"
                 @click="editConfig(row)"
               >
                 编辑
@@ -116,7 +118,7 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
               <el-button
                 link
                 type="primary"
-                :icon="useRenderIcon('delete')"
+                :icon="useRenderIcon(Delete)"
                 @click="delConfig(row)"
               >
                 删除

src/views/system/dict/index.vue

@@ -14,6 +14,8 @@ import {
   type VxeTableEvents,
   type FormMethods
 } from "vxe-table";
+import Delete from "@iconify-icons/ep/delete";
+import EditPen from "@iconify-icons/ep/edit-pen";
 
 type onEditNRow = {
   name: string;
@@ -293,7 +295,7 @@ function onHide() {
           <el-button
             link
             type="primary"
-            :icon="useRenderIcon('edits')"
+            :icon="useRenderIcon(EditPen)"
             @click="onEdit(row)"
           >
             编辑
@@ -318,7 +320,7 @@ function onHide() {
           <el-button
             link
             type="primary"
-            :icon="useRenderIcon('delete')"
+            :icon="useRenderIcon(Delete)"
             @click="confirmEvent"
           >
             删除

src/views/system/role/index.vue

@@ -6,6 +6,14 @@ import { type FormInstance } from "element-plus";
 import { TableProBar } from "@/components/ReTable";
 import { type PaginationProps } from "@pureadmin/table";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Database from "@iconify-icons/ri/database-2-line";
+import More from "@iconify-icons/ep/more-filled";
+import Delete from "@iconify-icons/ep/delete";
+import EditPen from "@iconify-icons/ep/edit-pen";
+import Search from "@iconify-icons/ep/search";
+import Refresh from "@iconify-icons/ep/refresh";
+import Menu from "@iconify-icons/ep/menu";
+import AddFill from "@iconify-icons/ri/add-circle-line";
 
 defineOptions({
   name: "Role"
@@ -94,13 +102,13 @@ onMounted(() => {
       <el-form-item>
         <el-button
           type="primary"
-          :icon="useRenderIcon('search')"
+          :icon="useRenderIcon(Search)"
           :loading="loading"
           @click="onSearch"
         >
           搜索
         </el-button>
-        <el-button :icon="useRenderIcon('refresh')" @click="resetForm(formRef)">
+        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
           重置
         </el-button>
       </el-form-item>
@@ -113,7 +121,7 @@ onMounted(() => {
       @refresh="onSearch"
     >
       <template #buttons>
-        <el-button type="primary" :icon="useRenderIcon('add')">
+        <el-button type="primary" :icon="useRenderIcon(AddFill)">
           新增角色
         </el-button>
       </template>
@@ -144,7 +152,7 @@ onMounted(() => {
               type="primary"
               :size="size"
               @click="handleUpdate(row)"
-              :icon="useRenderIcon('edits')"
+              :icon="useRenderIcon(EditPen)"
             >
               修改
             </el-button>
@@ -155,7 +163,7 @@ onMounted(() => {
                   link
                   type="primary"
                   :size="size"
-                  :icon="useRenderIcon('delete')"
+                  :icon="useRenderIcon(Delete)"
                   @click="handleDelete(row)"
                 >
                   删除
@@ -169,7 +177,7 @@ onMounted(() => {
                 type="primary"
                 :size="size"
                 @click="handleUpdate(row)"
-                :icon="useRenderIcon('more')"
+                :icon="useRenderIcon(More)"
               />
               <template #dropdown>
                 <el-dropdown-menu>
@@ -179,7 +187,7 @@ onMounted(() => {
                       link
                       type="primary"
                       :size="size"
-                      :icon="useRenderIcon('menu')"
+                      :icon="useRenderIcon(Menu)"
                     >
                       菜单权限
                     </el-button>
@@ -190,7 +198,7 @@ onMounted(() => {
                       link
                       type="primary"
                       :size="size"
-                      :icon="useRenderIcon('database')"
+                      :icon="useRenderIcon(Database)"
                     >
                       数据权限
                     </el-button>

src/views/system/user/index.vue

@@ -8,6 +8,15 @@ import { TableProBar } from "@/components/ReTable";
 import { type PaginationProps } from "@pureadmin/table";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 
+import Role from "@iconify-icons/ri/admin-line";
+import Password from "@iconify-icons/ri/lock-password-line";
+import More from "@iconify-icons/ep/more-filled";
+import Delete from "@iconify-icons/ep/delete";
+import EditPen from "@iconify-icons/ep/edit-pen";
+import Search from "@iconify-icons/ep/search";
+import Refresh from "@iconify-icons/ep/refresh";
+import AddFill from "@iconify-icons/ri/add-circle-line";
+
 defineOptions({
   name: "User"
 });
@@ -104,16 +113,13 @@ onMounted(() => {
         <el-form-item>
           <el-button
             type="primary"
-            :icon="useRenderIcon('search')"
+            :icon="useRenderIcon(Search)"
             :loading="loading"
             @click="onSearch"
           >
             搜索
           </el-button>
-          <el-button
-            :icon="useRenderIcon('refresh')"
-            @click="resetForm(formRef)"
-          >
+          <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
             重置
           </el-button>
         </el-form-item>
@@ -126,7 +132,7 @@ onMounted(() => {
         @refresh="onSearch"
       >
         <template #buttons>
-          <el-button type="primary" :icon="useRenderIcon('add')">
+          <el-button type="primary" :icon="useRenderIcon(AddFill)">
             新增用户
           </el-button>
         </template>
@@ -156,7 +162,7 @@ onMounted(() => {
                 type="primary"
                 :size="size"
                 @click="handleUpdate(row)"
-                :icon="useRenderIcon('edits')"
+                :icon="useRenderIcon(EditPen)"
               >
                 修改
               </el-button>
@@ -167,7 +173,7 @@ onMounted(() => {
                     link
                     type="primary"
                     :size="size"
-                    :icon="useRenderIcon('delete')"
+                    :icon="useRenderIcon(Delete)"
                     @click="handleDelete(row)"
                   >
                     删除
@@ -181,7 +187,7 @@ onMounted(() => {
                   type="primary"
                   :size="size"
                   @click="handleUpdate(row)"
-                  :icon="useRenderIcon('more')"
+                  :icon="useRenderIcon(More)"
                 />
                 <template #dropdown>
                   <el-dropdown-menu>
@@ -191,7 +197,7 @@ onMounted(() => {
                         link
                         type="primary"
                         :size="size"
-                        :icon="useRenderIcon('password')"
+                        :icon="useRenderIcon(Password)"
                       >
                         重置密码
                       </el-button>
@@ -202,7 +208,7 @@ onMounted(() => {
                         link
                         type="primary"
                         :size="size"
-                        :icon="useRenderIcon('role')"
+                        :icon="useRenderIcon(Role)"
                       >
                         分配角色
                       </el-button>

src/views/system/user/tree.vue

@@ -5,6 +5,15 @@ import { getDeptList } from "@/api/system";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { ref, watch, onMounted, getCurrentInstance } from "vue";
 
+import LocationCompany from "@iconify-icons/ep/add-location";
+import UnExpand from "@iconify-icons/mdi/arrow-expand-right";
+import Expand from "@iconify-icons/mdi/arrow-expand-down";
+import More2Fill from "@iconify-icons/ri/more-2-fill";
+import Reset from "@iconify-icons/ri/restart-line";
+import Dept from "@iconify-icons/ri/git-branch-line";
+import OfficeBuilding from "@iconify-icons/ep/office-building";
+import Search from "@iconify-icons/ep/search";
+
 interface Tree {
   id: number;
   name: string;
@@ -85,7 +94,7 @@ onMounted(async () => {
           <el-icon class="el-input__icon">
             <IconifyIconOffline
               v-show="searchValue.length === 0"
-              icon="search"
+              :icon="Search"
             />
           </el-icon>
         </template>
@@ -94,7 +103,7 @@ onMounted(async () => {
         <IconifyIconOffline
           class="w-[28px] cursor-pointer"
           width="18px"
-          icon="more-vertical"
+          :icon="More2Fill"
         />
         <template #dropdown>
           <el-dropdown-menu>
@@ -103,7 +112,7 @@ onMounted(async () => {
                 class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
                 link
                 type="primary"
-                :icon="useRenderIcon('expand')"
+                :icon="useRenderIcon(Expand)"
                 @click="toggleRowExpansionAll(true)"
               >
                 展开全部
@@ -114,7 +123,7 @@ onMounted(async () => {
                 class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
                 link
                 type="primary"
-                :icon="useRenderIcon('unExpand')"
+                :icon="useRenderIcon(UnExpand)"
                 @click="toggleRowExpansionAll(false)"
               >
                 折叠全部
@@ -125,7 +134,7 @@ onMounted(async () => {
                 class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
                 link
                 type="primary"
-                :icon="useRenderIcon('reset')"
+                :icon="useRenderIcon(Reset)"
                 @click="onReset"
               >
                 重置状态
@@ -170,10 +179,10 @@ onMounted(async () => {
           <IconifyIconOffline
             :icon="
               data.type === 1
-                ? 'office-building'
+                ? OfficeBuilding
                 : data.type === 2
-                ? 'location-company'
-                : 'dept'
+                ? LocationCompany
+                : Dept
             "
           />
           {{ node.label }}