feat: icons

Former-commit-id: e3e295596632d26820c076cc34c1d2d3cda3ad8b

src/views/demo/icons.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="icons-container">
+    <el-tabs type="border-card">
+      <el-tab-pane label="Icons">
+        <div class="grid">
+          <div
+            v-for="item of svg_icons"
+            :key="item"
+            @click="handleClipboard(generateIconCode(item), $event)"
+          >
+            <el-tooltip
+              effect="dark"
+              :content="generateIconCode(item)"
+              placement="top"
+            >
+              <div class="icon-item">
+                <svg-icon :icon-class="item" />
+                <span>{{ item }}</span>
+              </div>
+            </el-tooltip>
+          </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="Element-UI Icons">
+        <div class="grid">
+          <div
+            v-for="(icon, name) of icons"
+            :key="name"
+            @click="handleClipboard(generateElementIconCode(name), $event)"
+          >
+            <el-tooltip
+              effect="dark"
+              :content="generateElementIconCode(name)"
+              placement="top"
+            >
+              <div class="icon-item">
+                <el-icon :size="20">
+                  <component :is="icon" />
+                </el-icon>
+                <span>{{ name }}</span>
+              </div>
+            </el-tooltip>
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SvgIcon from "@/components/SvgIcon/index.vue";
+import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+
+defineOptions({
+  // eslint-disable-next-line
+  name: "Icons",
+  inheritAttrs: false,
+});
+const svg_icons: string[] = [
+  "advert",
+  "api",
+  "brand",
+  "bug",
+  "cascader",
+  "chart",
+  "client",
+  "close",
+  "close_all",
+  "close_left",
+  "close_other",
+  "close_right",
+  "coupon",
+  "dashboard",
+  "dict",
+  "dict_item",
+  "document",
+  "download",
+  "drag",
+  "edit",
+  "exit-fullscreen",
+  "eye-open",
+  "eye",
+  "fullscreen",
+  "github",
+  "goods-list",
+  "goods",
+  "guide",
+  "homepage",
+  "lab",
+  "language",
+  "link",
+  "menu",
+  "message",
+  "money",
+  "monitor",
+  "multi_level",
+  "nested",
+  "number",
+  "order",
+  "password",
+  "peoples",
+  "perm",
+  "publish",
+  "rabbitmq",
+  "rate",
+  "redis",
+  "refresh",
+  "role",
+  "security",
+  "shopping",
+  "size",
+  "skill",
+  "system",
+  "theme",
+  "tree",
+  "user",
+  "uv",
+  "valid_code",
+  "verify_code",
+];
+const icons = ref(ElementPlusIconsVue);
+
+const { text, isSupported, copy } = useClipboard();
+
+function generateIconCode(symbol) {
+  return `<svg-icon icon-class="${symbol}" />`;
+}
+
+function generateElementIconCode(symbol) {
+  return `<el-icon><${symbol} /></el-icon>`;
+}
+
+function handleClipboard(text, event) {
+  // clipboard(text, event);
+  copy(text)
+    .then(() => {
+      ElMessage.success("Copy successfully");
+    })
+    .catch(() => {
+      ElMessage.warning("Copy failed");
+    });
+}
+</script>
+
+<style lang="scss" scoped>
+.icons-container {
+  margin: 10px 20px 0;
+  overflow: hidden;
+
+  .grid {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  }
+
+  .icon-item {
+    float: left;
+    width: 100px;
+    height: 85px;
+    margin: 20px;
+    font-size: 30px;
+    color: #24292e;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  span {
+    display: block;
+    margin-top: 10px;
+    font-size: 16px;
+  }
+
+  .disabled {
+    pointer-events: none;
+  }
+}
+</style>