From c2cd1c40cf22a5b3d54a879b242c9236e085509a Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 8 Sep 2022 12:43:23 +0800
Subject: [PATCH] =?UTF-8?q?style(editor):=20icon=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/components/Icon.vue             | 10 ++++++----
 packages/editor/src/theme/component-list-panel.scss |  5 -----
 packages/editor/src/theme/content-menu.scss         |  4 ++++
 packages/editor/src/theme/icon.scss                 |  6 ++++++
 packages/editor/src/theme/index.scss                |  1 +
 5 files changed, 17 insertions(+), 9 deletions(-)
 create mode 100644 packages/editor/src/theme/icon.scss

diff --git a/packages/editor/src/components/Icon.vue b/packages/editor/src/components/Icon.vue
index a4cd8f9f3..f1f95c8f4 100644
--- a/packages/editor/src/components/Icon.vue
+++ b/packages/editor/src/components/Icon.vue
@@ -1,8 +1,10 @@
 <template>
-  <el-icon v-if="!icon"><Edit></Edit></el-icon>
-  <el-icon v-else-if="typeof icon === 'string' && icon.startsWith('http')"><img :src="icon" /></el-icon>
-  <i v-else-if="typeof icon === 'string'" :class="icon"></i>
-  <el-icon v-else><component :is="toRaw(icon)"></component></el-icon>
+  <el-icon v-if="!icon" class="magic-editor-icon"><Edit></Edit></el-icon>
+  <el-icon v-else-if="typeof icon === 'string' && icon.startsWith('http')" class="magic-editor-icon"
+    ><img :src="icon"
+  /></el-icon>
+  <i v-else-if="typeof icon === 'string'" class="magic-editor-icon" :class="icon"></i>
+  <el-icon v-else class="magic-editor-icon"><component :is="toRaw(icon)"></component></el-icon>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/editor/src/theme/component-list-panel.scss b/packages/editor/src/theme/component-list-panel.scss
index bb451dc83..65e3459f8 100644
--- a/packages/editor/src/theme/component-list-panel.scss
+++ b/packages/editor/src/theme/component-list-panel.scss
@@ -86,11 +86,6 @@
         }
       }
 
-      img {
-        max-width: 100%;
-        max-height: 100%;
-      }
-
       span {
         font-size: 12px;
         text-align: center;
diff --git a/packages/editor/src/theme/content-menu.scss b/packages/editor/src/theme/content-menu.scss
index 92d247535..8359dbb59 100644
--- a/packages/editor/src/theme/content-menu.scss
+++ b/packages/editor/src/theme/content-menu.scss
@@ -31,6 +31,10 @@
       color: $--font-color;
     }
 
+    .magic-editor-icon {
+      margin-right: 5px;
+    }
+
     &.divider {
       padding: 0 14px;
 
diff --git a/packages/editor/src/theme/icon.scss b/packages/editor/src/theme/icon.scss
new file mode 100644
index 000000000..c1de8a403
--- /dev/null
+++ b/packages/editor/src/theme/icon.scss
@@ -0,0 +1,6 @@
+.magic-editor-icon {
+  img {
+    max-width: 100%;
+    max-height: 100%;
+  }
+}
diff --git a/packages/editor/src/theme/index.scss b/packages/editor/src/theme/index.scss
index ec1aa108a..6b09990df 100644
--- a/packages/editor/src/theme/index.scss
+++ b/packages/editor/src/theme/index.scss
@@ -11,3 +11,4 @@
 @import "./content-menu.scss";
 @import "./stage.scss";
 @import "./code-editor.scss";
+@import "./icon.scss";