style(editor): icon组件图标样式调整

Tencent · Sep 8, 2022 · c2cd1c4 · c2cd1c4
1 parent 3e024d2
commit c2cd1c4
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -11,3 +11,4 @@
 @import "./content-menu.scss";
 @import "./stage.scss";
 @import "./code-editor.scss";
+@import "./icon.scss";