From ad444fe3ae284320b6e928abf78c20b186ad3361 Mon Sep 17 00:00:00 2001
From: xuanzai <43233731+MikuBlog@users.noreply.github.com>
Date: Sun, 1 Dec 2019 15:48:30 +0800
Subject: [PATCH] perf[views/icons]: use grid (#2803)

---
 src/views/icons/index.vue | 54 +++++++++++++++++++++++----------------
 1 file changed, 32 insertions(+), 22 deletions(-)

diff --git a/src/views/icons/index.vue b/src/views/icons/index.vue
index 3677afd6..33fab3a3 100644
--- a/src/views/icons/index.vue
+++ b/src/views/icons/index.vue
@@ -6,30 +6,34 @@
     </aside>
     <el-tabs type="border-card">
       <el-tab-pane label="Icons">
-        <div v-for="item of svgIcons" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
-          <el-tooltip placement="top">
-            <div slot="content">
-              {{ generateIconCode(item) }}
-            </div>
-            <div class="icon-item">
-              <svg-icon :icon-class="item" class-name="disabled" />
-              <span>{{ item }}</span>
-            </div>
-          </el-tooltip>
-        </div>
+        <div class="grid">
+          <div v-for="item of svgIcons" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
+            <el-tooltip placement="top">
+              <div slot="content">
+                {{ generateIconCode(item) }}
+              </div>
+              <div class="icon-item">
+                <svg-icon :icon-class="item" class-name="disabled" />
+                <span>{{ item }}</span>
+              </div>
+            </el-tooltip>
+          </div>
+         </div>
       </el-tab-pane>
       <el-tab-pane label="Element-UI Icons">
-        <div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item),$event)">
-          <el-tooltip placement="top">
-            <div slot="content">
-              {{ generateElementIconCode(item) }}
-            </div>
-            <div class="icon-item">
-              <i :class="'el-icon-' + item" />
-              <span>{{ item }}</span>
-            </div>
-          </el-tooltip>
-        </div>
+        <div class="grid">
+          <div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item),$event)">
+            <el-tooltip placement="top">
+              <div slot="content">
+                {{ generateElementIconCode(item) }}
+              </div>
+              <div class="icon-item">
+                <i :class="'el-icon-' + item" />
+                <span>{{ item }}</span>
+              </div>
+            </el-tooltip>
+          </div>
+         </div>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -66,6 +70,12 @@ export default {
 .icons-container {
   margin: 10px 20px 0;
   overflow: hidden;
+  
+  .grid {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  }
 
   .icon-item {
     margin: 20px;