perf: icon

src/components/ReIcon/src/hooks.ts

@@ -1,6 +1,6 @@
 import { iconType } from "./types";
 import { h, defineComponent, Component } from "vue";
-import { IconifyIconOffline, FontIcon } from "../index";
+import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index";
 
 /**
  * 支持fontawesome4、5+、iconfont、remixicon、element-plus的icons、自定义svg
@@ -37,7 +37,9 @@ export function useRenderIcon(icon: string, attrs?: iconType): Component {
     return defineComponent({
       name: "Icon",
       render() {
-        return h(IconifyIconOffline, {
+        const IconifyIcon =
+          attrs && attrs["online"] ? IconifyIconOnline : IconifyIconOffline;
+        return h(IconifyIcon, {
           icon: icon,
           ...attrs
         });

src/components/ReIcon/src/types.ts

@@ -11,7 +11,9 @@ export interface iconType {
   horizontalAlign?: boolean;
   verticalAlign?: boolean;
   align?: string;
+  online?: boolean;
   onLoad?: Function;
+  includes?: Function;
 
   //  all icon
   style?: object;

src/views/login/components/phone.vue

@@ -59,6 +59,9 @@ function onBack() {
             clearable
             v-model="ruleForm.verifyCode"
             placeholder="短信验证码"
+            :prefix-icon="
+              useRenderIcon('ri:shield-keyhole-line', { online: true })
+            "
           />
           <el-button
             :disabled="isDisabled"

src/views/login/components/regist.vue

@@ -101,6 +101,9 @@ function onBack() {
             clearable
             v-model="ruleForm.verifyCode"
             placeholder="短信验证码"
+            :prefix-icon="
+              useRenderIcon('ri:shield-keyhole-line', { online: true })
+            "
           />
           <el-button
             :disabled="isDisabled"

src/views/login/components/update.vue

@@ -80,6 +80,9 @@ function onBack() {
             clearable
             v-model="ruleForm.verifyCode"
             placeholder="短信验证码"
+            :prefix-icon="
+              useRenderIcon('ri:shield-keyhole-line', { online: true })
+            "
           />
           <el-button
             :disabled="isDisabled"

src/views/login/index.vue

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