From 7c31c1c6e627eb4f4345c6392da51167d68ed5ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com>
Date: Mon, 25 Apr 2022 19:21:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8A=A0icons=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/components/icons/index.vue | 70 +++++++++++++++++++++++++++-
 1 file changed, 69 insertions(+), 1 deletion(-)

diff --git a/src/views/components/icons/index.vue b/src/views/components/icons/index.vue
index 96b6f1a..9bebb6a 100644
--- a/src/views/components/icons/index.vue
+++ b/src/views/components/icons/index.vue
@@ -1,5 +1,73 @@
 <template>
   <div class="icons-container">
-    敬请期待
+    <el-tabs type="border-card">
+      <el-tab-pane label="svg Icons">
+        <div v-for="item of svgIconList" :key="item" class="item">
+          <el-tooltip placement="top">
+            <template #content> {{ generateIconCode(item) }} </template>
+            <div class="icon-item">
+              <svg-icon :icon-class="item" style="height: 40px; width: 40px" />
+            </div>
+          </el-tooltip>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="Element-UI Icons">
+        <div v-for="item of elementIcons" :key="item">
+          <el-tooltip placement="top">
+            <template #content> {{ generateElementIconCode(item) }} </template>
+            <div class="icon-item">
+              <el-icon><component :is="item" /></el-icon>
+            </div>
+          </el-tooltip>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
+
+<script setup name="icons">
+import icons from '@/components/IconSelect/requireIcons'
+import * as elIcons from '@element-plus/icons-vue'
+
+const svgIconList = ref(icons)
+const elementIcons = ref([])
+
+for (const key in elIcons) {
+  elementIcons.value.push(key)
+}
+
+function generateIconCode(symbol) {
+  return `<svg-icon icon-class="${symbol}" />`
+}
+function generateElementIconCode(symbol) {
+  return `<el-icon><${symbol} /></el-icon>`
+}
+</script>
+
+<style lang="scss" scoped>
+.icons-container {
+  margin: 10px 20px 0;
+  overflow: hidden;
+
+  .icon-item,
+  .item {
+    margin: 20px;
+    height: 60px;
+    text-align: center;
+    width: 60px;
+    float: left;
+    font-size: 30px;
+    color: #24292e;
+    cursor: pointer;
+  }
+
+  span {
+    display: block;
+    font-size: 16px;
+    margin-top: 10px;
+  }
+  .disabled {
+    pointer-events: none;
+  }
+}
+</style>