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

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

src/views/able/menu-tree.vue

@@ -7,6 +7,7 @@ import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { extractPathList, deleteChildren } from "@/utils/tree";
 import { usePermissionStoreHook } from "@/store/modules/permission";
 import type { TreeNode } from "element-plus/es/components/tree-v2/src/types";
+import NodeTree from "@iconify-icons/ri/node-tree";
 
 defineOptions({
   name: "MenuTree"
@@ -50,7 +51,7 @@ const filterMethod = (query: string, node: treeNode) => {
           <el-link
             href="https://element-plus.gitee.io/zh-CN/component/tree-v2.html"
             target="_blank"
-            :icon="useRenderIcon('node-tree')"
+            :icon="useRenderIcon(NodeTree)"
             style="font-size: 16px; margin: 0 5px 4px 0"
           >
             Tree V2

src/views/able/timeline.vue

@@ -2,6 +2,7 @@
 import { markRaw } from "vue";
 import { useRenderFlicker } from "@/components/ReFlicker";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Iphone from "@iconify-icons/ep/iphone";
 
 defineOptions({
   name: "TimeLine"
@@ -32,7 +33,7 @@ const activities = [
     content: "支持自定义图标",
     timestamp: lastBuildTime,
     color: "transparent",
-    icon: useRenderIcon("iphone", {
+    icon: useRenderIcon(Iphone, {
       color: "#0bbd87"
     })
   }

src/views/components/draggable/index.vue

@@ -4,6 +4,7 @@ import Sortable, { Swap } from "sortablejs";
 import draggable from "vuedraggable/src/vuedraggable";
 import { useAppStoreHook } from "@/store/modules/app";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Rank from "@iconify-icons/ep/rank";
 
 defineOptions({
   name: "Draggable"
@@ -63,7 +64,7 @@ onMounted(() => {
           <el-link
             href="https://sortablejs.github.io/vue.draggable.next/#/simple"
             target="_blank"
-            :icon="useRenderIcon('rank')"
+            :icon="useRenderIcon(Rank)"
             style="font-size: 16px; margin: 0 4px 5px"
           >
             vuedraggable

src/views/components/message/index.vue

@@ -3,6 +3,7 @@ import { h } from "vue";
 import hot from "@/assets/svg/hot.svg?component";
 import { message, closeAllMessage } from "@/utils/message";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Check from "@iconify-icons/ep/check";
 
 defineOptions({
   name: "Message"
@@ -68,7 +69,7 @@ defineOptions({
         @click="
           message('自定义消息图标', {
             customClass: 'el',
-            icon: useRenderIcon('check')
+            icon: useRenderIcon(Check)
           })
         "
       >

src/views/components/video/index.vue

@@ -6,6 +6,7 @@ import { deviceDetection } from "@pureadmin/utils";
 import screenShot from "xgplayer/es/controls/screenShot";
 import playbackRate from "xgplayer/es/controls/playbackRate";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import VideoPlay from "@iconify-icons/ep/video-play";
 
 defineOptions({
   name: "Video"
@@ -38,7 +39,7 @@ onMounted(() => {
           <el-link
             href="https://v2.h5player.bytedance.com"
             target="_blank"
-            :icon="useRenderIcon('video-play')"
+            :icon="useRenderIcon(VideoPlay)"
             style="font-size: 16px; margin: 0 4px 5px"
           >
             西瓜播放器

src/views/editor/index.vue

@@ -3,6 +3,7 @@ import "@wangeditor/editor/dist/css/style.css"; // 引入 css
 import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import Edit from "@iconify-icons/ep/edit";
 
 defineOptions({
   name: "Editor"
@@ -46,7 +47,7 @@ const handleCreated = editor => {
           <el-link
             href="https://www.wangeditor.com"
             target="_blank"
-            :icon="useRenderIcon('edit')"
+            :icon="useRenderIcon(Edit)"
             style="font-size: 16px; margin: 0 4px 5px"
           >
             Wangeditor

src/views/flow-chart/index.vue

@@ -11,6 +11,8 @@ import { Snapshot, BpmnElement, Menu } from "@logicflow/extension";
 import { Control, NodePanel, DataDialog } from "@/components/ReFlowChart";
 import { toLogicflowData } from "@/components/ReFlowChart/src/adpterForTurbo";
 
+import SetUp from "@iconify-icons/ep/set-up";
+
 defineOptions({
   name: "FlowChart"
 });
@@ -71,7 +73,7 @@ onMounted(() => {
           <el-link
             href="http://logic-flow.org/"
             target="_blank"
-            :icon="useRenderIcon('set-up')"
+            :icon="useRenderIcon(SetUp)"
             style="font-size: 16px; margin: 0 4px 5px"
           >
             LogicFlow

src/views/list/card/components/Card.vue

@@ -5,6 +5,7 @@ import laptopIcon from "@/assets/svg/laptop.svg?component";
 import serviceIcon from "@/assets/svg/service.svg?component";
 import calendarIcon from "@/assets/svg/calendar.svg?component";
 import userAvatarIcon from "@/assets/svg/user_avatar.svg?component";
+import More2Fill from "@iconify-icons/ri/more-2-fill";
 
 defineOptions({
   name: "ReCard"
@@ -64,7 +65,7 @@ const cardLogoClass = computed(() => [
             {{ product.isSetup ? "已启用" : "已停用" }}
           </el-tag>
           <el-dropdown trigger="click" :disabled="!product.isSetup">
-            <IconifyIconOffline icon="more-vertical" class="text-[24px]" />
+            <IconifyIconOffline :icon="More2Fill" class="text-[24px]" />
             <template #dropdown>
               <el-dropdown-menu :disabled="!product.isSetup">
                 <el-dropdown-item @click="handleClickManage(product)">

src/views/list/card/index.vue

@@ -6,6 +6,8 @@ import { ElMessageBox } from "element-plus";
 import { ref, onMounted, nextTick } from "vue";
 import dialogForm from "./components/DialogForm.vue";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Search from "@iconify-icons/ep/search";
+import AddFill from "@iconify-icons/ri/add-circle-line";
 
 defineOptions({
   name: "ListCard"
@@ -93,7 +95,10 @@ const handleManageProduct = product => {
 <template>
   <div class="main">
     <div class="w-full flex justify-between mb-4">
-      <el-button :icon="useRenderIcon('add')" @click="formDialogVisible = true">
+      <el-button
+        :icon="useRenderIcon(AddFill)"
+        @click="formDialogVisible = true"
+      >
         新建产品
       </el-button>
       <el-input
@@ -106,7 +111,7 @@ const handleManageProduct = product => {
           <el-icon class="el-input__icon">
             <IconifyIconOffline
               v-show="searchValue.length === 0"
-              icon="search"
+              :icon="Search"
             />
           </el-icon>
         </template>

src/views/login/components/phone.vue

@@ -9,6 +9,7 @@ import { $t, transformI18n } from "@/plugins/i18n";
 import { useVerifyCode } from "../utils/verifyCode";
 import { useUserStoreHook } from "@/store/modules/user";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Iphone from "@iconify-icons/ep/iphone";
 
 const { t } = useI18n();
 const loading = ref(false);
@@ -50,7 +51,7 @@ function onBack() {
           clearable
           v-model="ruleForm.phone"
           :placeholder="t('login.phone')"
-          :prefix-icon="useRenderIcon('iphone')"
+          :prefix-icon="useRenderIcon(Iphone)"
         />
       </el-form-item>
     </Motion>

src/views/login/components/regist.vue

@@ -9,6 +9,9 @@ import { useVerifyCode } from "../utils/verifyCode";
 import { $t, transformI18n } from "@/plugins/i18n";
 import { useUserStoreHook } from "@/store/modules/user";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Lock from "@iconify-icons/ri/lock-fill";
+import Iphone from "@iconify-icons/ep/iphone";
+import User from "@iconify-icons/ri/user-3-fill";
 
 const { t } = useI18n();
 const checked = ref(false);
@@ -89,7 +92,7 @@ function onBack() {
           clearable
           v-model="ruleForm.username"
           :placeholder="t('login.username')"
-          :prefix-icon="useRenderIcon('user')"
+          :prefix-icon="useRenderIcon(User)"
         />
       </el-form-item>
     </Motion>
@@ -100,7 +103,7 @@ function onBack() {
           clearable
           v-model="ruleForm.phone"
           :placeholder="t('login.phone')"
-          :prefix-icon="useRenderIcon('iphone')"
+          :prefix-icon="useRenderIcon(Iphone)"
         />
       </el-form-item>
     </Motion>
@@ -136,7 +139,7 @@ function onBack() {
           show-password
           v-model="ruleForm.password"
           :placeholder="t('login.password')"
-          :prefix-icon="useRenderIcon('lock')"
+          :prefix-icon="useRenderIcon(Lock)"
         />
       </el-form-item>
     </Motion>
@@ -148,7 +151,7 @@ function onBack() {
           show-password
           v-model="ruleForm.repeatPassword"
           :placeholder="t('login.sure')"
-          :prefix-icon="useRenderIcon('lock')"
+          :prefix-icon="useRenderIcon(Lock)"
         />
       </el-form-item>
     </Motion>

src/views/login/components/update.vue

@@ -9,6 +9,8 @@ import { useVerifyCode } from "../utils/verifyCode";
 import { $t, transformI18n } from "@/plugins/i18n";
 import { useUserStoreHook } from "@/store/modules/user";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Lock from "@iconify-icons/ri/lock-fill";
+import Iphone from "@iconify-icons/ep/iphone";
 
 const { t } = useI18n();
 const loading = ref(false);
@@ -73,7 +75,7 @@ function onBack() {
           clearable
           v-model="ruleForm.phone"
           :placeholder="t('login.phone')"
-          :prefix-icon="useRenderIcon('iphone')"
+          :prefix-icon="useRenderIcon(Iphone)"
         />
       </el-form-item>
     </Motion>
@@ -109,7 +111,7 @@ function onBack() {
           show-password
           v-model="ruleForm.password"
           :placeholder="t('login.password')"
-          :prefix-icon="useRenderIcon('lock')"
+          :prefix-icon="useRenderIcon(Lock)"
         />
       </el-form-item>
     </Motion>
@@ -121,7 +123,7 @@ function onBack() {
           show-password
           v-model="ruleForm.repeatPassword"
           :placeholder="t('login.sure')"
-          :prefix-icon="useRenderIcon('lock')"
+          :prefix-icon="useRenderIcon(Lock)"
         />
       </el-form-item>
     </Motion>

src/views/login/index.vue

@@ -33,6 +33,9 @@ import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
 import dayIcon from "@/assets/svg/day.svg?component";
 import darkIcon from "@/assets/svg/dark.svg?component";
 import globalization from "@/assets/svg/globalization.svg?component";
+import Lock from "@iconify-icons/ri/lock-fill";
+import Check from "@iconify-icons/ep/check";
+// import User from "@iconify-icons/ri/user-3-fill";
 
 defineOptions({
   name: "Login"
@@ -131,7 +134,7 @@ watch(imgCode, value => {
               <IconifyIconOffline
                 class="check-zh"
                 v-show="locale === 'zh'"
-                icon="check"
+                :icon="Check"
               />
               简体中文
             </el-dropdown-item>
@@ -141,7 +144,7 @@ watch(imgCode, value => {
               @click="translationEn"
             >
               <span class="check-en" v-show="locale === 'en'">
-                <IconifyIconOffline icon="check" />
+                <IconifyIconOffline :icon="Check" />
               </span>
               English
             </el-dropdown-item>
@@ -184,7 +187,6 @@ watch(imgCode, value => {
                   clearable
                   v-model="ruleForm.username"
                   :placeholder="t('login.username')"
-                  :prefix-icon="useRenderIcon('user')"
                 />
               </el-form-item>
             </Motion>
@@ -196,7 +198,7 @@ watch(imgCode, value => {
                   show-password
                   v-model="ruleForm.password"
                   :placeholder="t('login.password')"
-                  :prefix-icon="useRenderIcon('lock')"
+                  :prefix-icon="useRenderIcon(Lock)"
                 />
               </el-form-item>
             </Motion>

src/views/pure-table/high/edit/columns.tsx

@@ -2,6 +2,8 @@ import { tableDataEdit } from "../data";
 import { message } from "@/utils/message";
 import { ref, computed, Transition } from "vue";
 import { clone, delay } from "@pureadmin/utils";
+import EditPen from "@iconify-icons/ep/edit-pen";
+import Check from "@iconify-icons/ep/check";
 
 // 温馨提示：编辑整行方法雷同，将cellRenderer后面渲染的组件抽出来做对应处理即可
 export function useColumns() {
@@ -60,13 +62,13 @@ export function useColumns() {
           </Transition>
           <iconify-icon-offline
             v-show={editing.value(index)}
-            icon="check"
+            icon={Check}
             class={iconClass.value(index)}
             onClick={() => onSure(index)}
           />
           <iconify-icon-offline
             v-show={activeIndex.value === index && !editing.value(index)}
-            icon="edits"
+            icon={EditPen}
             class={iconClass.value(index, true)}
             onClick={() => onEdit(row, index)}
           />

src/views/result/columns.tsx

@@ -1,4 +1,6 @@
 import { IconifyIconOffline } from "@/components/ReIcon";
+import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
+import CloseCircleLine from "@iconify-icons/ri/close-circle-line";
 
 export function useColumns() {
   const columns = [
@@ -7,7 +9,7 @@ export function useColumns() {
         return (
           <span class="flex items-center -mt-6">
             <IconifyIconOffline
-              icon="close-circle-line"
+              icon={CloseCircleLine}
               color="#F56C6C"
               width="18px"
               height="18px"
@@ -20,7 +22,7 @@ export function useColumns() {
             >
               立即解冻
               <IconifyIconOffline
-                icon="arrow-right-s-line"
+                icon={ArrowRightSLine}
                 color="var(--el-color-primary)"
                 width="18px"
                 height="18px"
@@ -35,7 +37,7 @@ export function useColumns() {
         return (
           <span class="flex items-center -mt-8">
             <IconifyIconOffline
-              icon="close-circle-line"
+              icon={CloseCircleLine}
               color="#F56C6C"
               width="18px"
               height="18px"
@@ -48,7 +50,7 @@ export function useColumns() {
             >
               立即升级
               <IconifyIconOffline
-                icon="arrow-right-s-line"
+                icon={ArrowRightSLine}
                 color="var(--el-color-primary)"
                 width="18px"
                 height="18px"

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 }}

src/views/welcome/components/columns.tsx

@@ -1,5 +1,11 @@
 import { IconifyIconOffline } from "@/components/ReIcon";
 import TypeIt from "@/components/ReTypeit";
+import OfficeBuilding from "@iconify-icons/ep/office-building";
+import Tickets from "@iconify-icons/ep/tickets";
+import Location from "@iconify-icons/ep/location";
+import Iphone from "@iconify-icons/ep/iphone";
+import Notebook from "@iconify-icons/ep/notebook";
+import User from "@iconify-icons/ri/user-3-fill";
 
 export function useColumns() {
   const lists = [
@@ -15,7 +21,7 @@ export function useColumns() {
       labelRenderer: () => (
         <div class="flex items-center">
           <el-icon>
-            <IconifyIconOffline icon="user" />
+            <IconifyIconOffline icon={User} />
           </el-icon>
           用户名
         </div>
@@ -26,7 +32,7 @@ export function useColumns() {
       labelRenderer: () => (
         <div class="flex items-center">
           <el-icon>
-            <IconifyIconOffline icon="iphone" />
+            <IconifyIconOffline icon={Iphone} />
           </el-icon>
           手机号
         </div>
@@ -37,7 +43,7 @@ export function useColumns() {
       labelRenderer: () => (
         <div class="flex items-center">
           <el-icon>
-            <IconifyIconOffline icon="location" />
+            <IconifyIconOffline icon={Location} />
           </el-icon>
           居住地
         </div>
@@ -51,7 +57,7 @@ export function useColumns() {
       labelRenderer: () => (
         <div class="flex items-center">
           <el-icon>
-            <IconifyIconOffline icon="tickets" />
+            <IconifyIconOffline icon={Tickets} />
           </el-icon>
           标签
         </div>
@@ -70,7 +76,7 @@ export function useColumns() {
       labelRenderer: () => (
         <div class="flex items-center">
           <el-icon>
-            <IconifyIconOffline icon="office-building" />
+            <IconifyIconOffline icon={OfficeBuilding} />
           </el-icon>
           联系地址
         </div>
@@ -84,7 +90,7 @@ export function useColumns() {
       labelRenderer: () => (
         <div class="flex items-center">
           <el-icon>
-            <IconifyIconOffline icon="notebook" />
+            <IconifyIconOffline icon={Notebook} />
           </el-icon>
           好好学习，天天向上
         </div>