feat: 菜单图标 `icon` 支持使用在线图标

src/components/ReIcon/index.ts

@@ -3,7 +3,7 @@ import iconifyIconOnline from "./src/iconifyIconOnline";
 import iconSelect from "./src/Select.vue";
 import fontIcon from "./src/iconfont";
 
-/** 离线图标组件 */
+/** 本地图标组件 */
 const IconifyIconOffline = iconifyIconOffline;
 /** 在线图标组件 */
 const IconifyIconOnline = iconifyIconOnline;

src/components/ReIcon/src/hooks.ts

@@ -3,7 +3,8 @@ import { h, defineComponent, Component } from "vue";
 import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index";
 
 /**
- * 支持fontawesome4、5+、iconfont、remixicon、element-plus的icons、自定义svg
+ * 支持 `iconfont`、自定义 `svg` 以及 `iconify` 中所有的图标
+ * @see 点击查看文档图标篇 {@link https://yiming_chang.gitee.io/pure-admin-doc/pages/icon/}
  * @param icon 必传 图标
  * @param attrs 可选 iconType 属性
  * @returns Component
@@ -34,11 +35,12 @@ export function useRenderIcon(icon: any, attrs?: iconType): Component {
     // svg
     return icon;
   } else {
+    // 通过是否存在 : 符号来判断是在线还是本地图标，存在即是在线图标，反之
     return defineComponent({
       name: "Icon",
       render() {
         const IconifyIcon =
-          attrs && attrs["online"] ? IconifyIconOnline : IconifyIconOffline;
+          icon && icon.includes(":") ? IconifyIconOnline : IconifyIconOffline;
         return h(IconifyIcon, {
           icon: icon,
           ...attrs

src/components/ReIcon/src/iconifyIconOffline.ts

@@ -161,7 +161,7 @@ addIcon("unExpand", UnExpand);
 import LocationCompany from "@iconify-icons/carbon/location-company";
 addIcon("location-company", LocationCompany);
 
-// Iconify Icon在Vue里离线使用（用于内网环境）https://docs.iconify.design/icon-components/vue/offline.html
+// Iconify Icon在Vue里本地使用（用于内网环境）https://docs.iconify.design/icon-components/vue/offline.html
 export default defineComponent({
   name: "IconifyIconOffline",
   components: { IconifyIcon },

src/components/ReIcon/src/types.ts

@@ -11,7 +11,6 @@ export interface iconType {
   horizontalAlign?: boolean;
   verticalAlign?: boolean;
   align?: string;
-  online?: boolean;
   onLoad?: Function;
   includes?: Function;
 

src/views/login/components/phone.vue

@@ -62,9 +62,7 @@ function onBack() {
             clearable
             v-model="ruleForm.verifyCode"
             :placeholder="t('login.smsVerifyCode')"
-            :prefix-icon="
-              useRenderIcon('ri:shield-keyhole-line', { online: true })
-            "
+            :prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
           />
           <el-button
             :disabled="isDisabled"

src/views/login/components/regist.vue

@@ -110,9 +110,7 @@ function onBack() {
             clearable
             v-model="ruleForm.verifyCode"
             :placeholder="t('login.smsVerifyCode')"
-            :prefix-icon="
-              useRenderIcon('ri:shield-keyhole-line', { online: true })
-            "
+            :prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
           />
           <el-button
             :disabled="isDisabled"

src/views/login/components/update.vue

@@ -83,9 +83,7 @@ function onBack() {
             clearable
             v-model="ruleForm.verifyCode"
             :placeholder="t('login.smsVerifyCode')"
-            :prefix-icon="
-              useRenderIcon('ri:shield-keyhole-line', { online: true })
-            "
+            :prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
           />
           <el-button
             :disabled="isDisabled"

src/views/login/index.vue

@@ -207,9 +207,7 @@ watch(imgCode, value => {
                   clearable
                   v-model="ruleForm.verifyCode"
                   :placeholder="t('login.verifyCode')"
-                  :prefix-icon="
-                    useRenderIcon('ri:shield-keyhole-line', { online: true })
-                  "
+                  :prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
                 >
                   <template v-slot:append>
                     <ReImageVerify v-model:code="imgCode" />

src/views/system/dict/index.vue

@@ -240,21 +240,21 @@ function onHide() {
         <el-button-group>
           <el-button
             type="primary"
-            :icon="useRenderIcon('fa:plus-square-o', { online: true })"
+            :icon="useRenderIcon('fa:plus-square-o')"
             @click="onAdd"
           >
             {{ t("buttons.hsadd") }}
           </el-button>
           <el-button
             type="primary"
-            :icon="useRenderIcon('fa:folder-open-o', { online: true })"
+            :icon="useRenderIcon('fa:folder-open-o')"
             @click="onExpand"
           >
             {{ t("buttons.hsexpendAll") }}
           </el-button>
           <el-button
             type="primary"
-            :icon="useRenderIcon('fa:folder-o', { online: true })"
+            :icon="useRenderIcon('fa:folder-o')"
             @click="onUnExpand"
           >
             {{ t("buttons.hscollapseAll") }}
@@ -301,7 +301,7 @@ function onHide() {
           <el-button
             link
             type="primary"
-            :icon="useRenderIcon('fa:plus-square-o', { online: true })"
+            :icon="useRenderIcon('fa:plus-square-o')"
             @click="onAddChild(row)"
           >
             新增子类型
@@ -310,7 +310,7 @@ function onHide() {
             v-show="row.model"
             link
             type="primary"
-            :icon="useRenderIcon('fa:cog', { online: true })"
+            :icon="useRenderIcon('fa:cog')"
             @click="onDeploy(row)"
           >
             字典配置