From a9a8115d46117bb31c17e8d79fb6ff2b17998c9a Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Fri, 18 Feb 2022 10:52:31 +0800
Subject: [PATCH] perf: `useRenderIcon` hooks

---
 src/components/ReIcon/src/hooks.ts  | 16 ++++++++++++----
 src/components/ReIcon/src/types.ts  | 18 ++++++++++++++++++
 src/views/permission/page/index.vue |  8 +++++++-
 3 files changed, 37 insertions(+), 5 deletions(-)
 create mode 100644 src/components/ReIcon/src/types.ts

diff --git a/src/components/ReIcon/src/hooks.ts b/src/components/ReIcon/src/hooks.ts
index bc9529fc3..e1eb17fba 100644
--- a/src/components/ReIcon/src/hooks.ts
+++ b/src/components/ReIcon/src/hooks.ts
@@ -1,8 +1,14 @@
+import { iconType } from "./types";
 import { h, defineComponent, Component } from "vue";
 import { IconifyIconOffline, FontIcon } from "../index";
 
-// 支持fontawesome4、5+、iconfont、remixicon、element-plus的icons、自定义svg
-export function useRenderIcon(icon: string): Component {
+/**
+ * 支持fontawesome4、5+、iconfont、remixicon、element-plus的icons、自定义svg
+ * @param icon 必传 string 图标
+ * @param attrs 可选 iconType 属性
+ * @returns Component
+ */
+export function useRenderIcon(icon: string, attrs?: iconType): Component {
   // iconfont
   const ifReg = /^IF-/;
   // typeof icon === "function" 属于SVG
@@ -19,7 +25,8 @@ export function useRenderIcon(icon: string): Component {
       render() {
         return h(FontIcon, {
           icon: iconName,
-          iconType
+          iconType,
+          ...attrs
         });
       }
     });
@@ -31,7 +38,8 @@ export function useRenderIcon(icon: string): Component {
       name: "Icon",
       render() {
         return h(IconifyIconOffline, {
-          icon: icon
+          icon: icon,
+          ...attrs
         });
       }
     });
diff --git a/src/components/ReIcon/src/types.ts b/src/components/ReIcon/src/types.ts
new file mode 100644
index 000000000..0c06ea49d
--- /dev/null
+++ b/src/components/ReIcon/src/types.ts
@@ -0,0 +1,18 @@
+export interface iconType {
+  // iconify (https://docs.iconify.design/icon-components/vue/#properties)
+  inline?: boolean;
+  width?: string | number;
+  height?: string | number;
+  horizontalFlip?: boolean;
+  verticalFlip?: boolean;
+  flip?: string;
+  rotate?: number | string;
+  color?: string;
+  horizontalAlign?: boolean;
+  verticalAlign?: boolean;
+  align?: string;
+  onLoad?: Function;
+
+  //  all icon
+  style?: object;
+}
diff --git a/src/views/permission/page/index.vue b/src/views/permission/page/index.vue
index a6e07df67..001434f39 100644
--- a/src/views/permission/page/index.vue
+++ b/src/views/permission/page/index.vue
@@ -7,6 +7,7 @@ export default {
 <script setup lang="ts">
 import { ref, unref } from "vue";
 import { storageSession } from "/@/utils/storage";
+import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 
 let purview = ref<string>(storageSession.getItem("info").username);
 
@@ -36,6 +37,11 @@ function changRole() {
         查看左侧菜单变化(系统管理)，模拟后台根据不同角色返回对应路由
       </p>
     </h4>
-    <el-button type="primary" @click="changRole">切换角色</el-button>
+    <el-button
+      type="primary"
+      @click="changRole"
+      :icon="useRenderIcon('user', { color: '#fff' })"
+      >切换角色</el-button
+    >
   </div>
 </template>