perf: useRenderIcon hooks

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

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

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>