diff --git a/src/components/FileUpload/index.vue b/src/components/FileUpload/index.vue
index 7fdc3c2b..ee207bac 100644
--- a/src/components/FileUpload/index.vue
+++ b/src/components/FileUpload/index.vue
@@ -11,7 +11,7 @@
         drag
     >
         <div class="slot">
-            <i class="el-icon-upload" />
+            <el-icon class="el-icon--upload"><el-icon-upload-filled /></el-icon>
             <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         </div>
         <template #tip>
diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
index 44f8ff34..17c778cb 100644
--- a/src/components/ImageUpload/index.vue
+++ b/src/components/ImageUpload/index.vue
@@ -23,10 +23,10 @@
                 <div class="mask">
                     <div class="actions">
                         <span title="预览" @click.stop="preview">
-                            <i class="el-icon-zoom-in" />
+                            <el-icon><el-icon-zoom-in /></el-icon>
                         </span>
                         <span title="移除" @click.stop="remove">
-                            <i class="el-icon-delete" />
+                            <el-icon><el-icon-delete /></el-icon>
                         </span>
                     </div>
                 </div>
@@ -155,7 +155,6 @@ function onSuccess(res) {
         top: 0;
         width: 100%;
         height: 100%;
-        font-size: 24px;
         background-color: rgb(0 0 0 / 50%);
         transition: all 0.3s;
         .actions {
@@ -179,6 +178,9 @@ function onSuccess(res) {
                 &:hover:not(.disabled) {
                     transform: scale(1.5);
                 }
+                .el-icon {
+                    font-size: 24px;
+                }
             }
         }
     }
diff --git a/src/components/ImagesUpload/index.vue b/src/components/ImagesUpload/index.vue
index 230993cb..15d7bf24 100644
--- a/src/components/ImagesUpload/index.vue
+++ b/src/components/ImagesUpload/index.vue
@@ -5,16 +5,16 @@
             <div class="mask">
                 <div class="actions">
                     <span title="预览" @click="preview(index)">
-                        <i class="el-icon-zoom-in" />
+                        <el-icon><el-icon-zoom-in /></el-icon>
                     </span>
                     <span title="移除" @click="remove(index)">
-                        <i class="el-icon-delete" />
+                        <el-icon><el-icon-delete /></el-icon>
                     </span>
                     <span v-show="url.length > 1" title="左移" :class="{'disabled': index == 0}" @click="move(index, 'left')">
-                        <i class="el-icon-back" />
+                        <el-icon><el-icon-back /></el-icon>
                     </span>
                     <span v-show="url.length > 1" title="右移" :class="{'disabled': index == url.length - 1}" @click="move(index, 'right')">
-                        <i class="el-icon-right" />
+                        <el-icon><el-icon-right /></el-icon>
                     </span>
                 </div>
             </div>
@@ -186,7 +186,6 @@ function onSuccess(res) {
         top: 0;
         width: 100%;
         height: 100%;
-        font-size: 24px;
         background-color: rgb(0 0 0 / 50%);
         transition: all 0.3s;
         .actions {
@@ -210,6 +209,9 @@ function onSuccess(res) {
                 &:hover:not(.disabled) {
                     transform: scale(1.5);
                 }
+                .el-icon {
+                    font-size: 24px;
+                }
             }
         }
     }
diff --git a/src/components/PageMain/index.vue b/src/components/PageMain/index.vue
index 97a9740f..48f64c73 100644
--- a/src/components/PageMain/index.vue
+++ b/src/components/PageMain/index.vue
@@ -10,7 +10,7 @@
         <div v-if="title" class="title-container">{{ title }}</div>
         <slot />
         <div v-if="collaspeData" class="collaspe" title="展开" @click="unCollaspe">
-            <i class="el-icon-arrow-down" />
+            <el-icon><el-icon-arrow-down /></el-icon>
         </div>
     </div>
 </template>
diff --git a/src/components/Result/index.vue b/src/components/Result/index.vue
index a5ff43fe..cdd13dad 100644
--- a/src/components/Result/index.vue
+++ b/src/components/Result/index.vue
@@ -1,13 +1,13 @@
 <template>
     <div class="result">
         <div v-if="type === 'success'" class="icon icon-success">
-            <i class="el-icon-success" />
+            <el-icon><el-icon-success-filled /></el-icon>
         </div>
         <div v-else-if="type === 'warning'" class="icon icon-warning">
-            <i class="el-icon-warning" />
+            <el-icon><el-icon-warning-filled /></el-icon>
         </div>
         <div v-else class="icon icon-error">
-            <i class="el-icon-error" />
+            <el-icon><el-icon-circle-close-filled /></el-icon>
         </div>
         <h1>{{ title }}</h1>
         <div v-if="desc" class="desc">{{ desc }}</div>
diff --git a/src/components/Trend/index.vue b/src/components/Trend/index.vue
index 7e3db2f4..cf3d7c29 100644
--- a/src/components/Trend/index.vue
+++ b/src/components/Trend/index.vue
@@ -3,7 +3,7 @@
         <span v-if="prefix" class="prefix">{{ prefix }}</span>
         <span class="text">{{ value }}</span>
         <span v-if="suffix" class="suffix">{{ suffix }}</span>
-        <i :class="`${isUp ? 'el-icon-caret-top' : 'el-icon-caret-bottom'}`" />
+        <svg-icon :name="`${isUp ? 'el-icon-caret-top' : 'el-icon-caret-bottom'}`" />
     </div>
 </template>