Feature(icons): add element icons page

mock/role/routes.ts

@@ -119,7 +119,7 @@ export const asyncRoutes = [
     children: [
       {
         path: 'index',
-        component: 'views/svg-icons/index',
+        component: 'views/icons/index',
         name: 'Icons',
         meta: { title: 'icons', icon: 'icon', noCache: true }
       }

src/router/index.ts

@@ -162,7 +162,7 @@ export const asyncRoutes: RouteConfig[] = [
     children: [
       {
         path: 'index',
-        component: () => import(/* webpackChunkName: "icons" */ '@/views/svg-icons/index.vue'),
+        component: () => import(/* webpackChunkName: "icons" */ '@/views/icons/index.vue'),
         name: 'Icons',
         meta: { title: 'icons', icon: 'icon', noCache: true }
       }

src/views/icons/elementIcons.ts

@@ -0,0 +1,74 @@
+// Full list here: https://element.eleme.io/#/en-US/component/icon
+
+const elementIcons = [
+  'info',
+  'error',
+  'success',
+  'warning',
+  'question',
+  'back',
+  'arrow-left',
+  'arrow-down',
+  'arrow-right',
+  'arrow-up',
+  'caret-left',
+  'caret-bottom',
+  'caret-top',
+  'caret-right',
+  'd-arrow-left',
+  'd-arrow-right',
+  'minus',
+  'plus',
+  'remove',
+  'circle-plus',
+  'remove-outline',
+  'circle-plus-outline',
+  'close',
+  'check',
+  'circle-close',
+  'circle-check',
+  'zoom-out',
+  'zoom-in',
+  'd-caret',
+  'sort',
+  'sort-down',
+  'sort-up',
+  'tickets',
+  'document',
+  'goods',
+  'sold-out',
+  'news',
+  'message',
+  'date',
+  'printer',
+  'time',
+  'bell',
+  'mobile-phone',
+  'service',
+  'view',
+  'menu',
+  'more',
+  'more-outline',
+  'star-on',
+  'star-off',
+  'location',
+  'location-outline',
+  'phone',
+  'phone-outline',
+  'picture',
+  'picture-outline',
+  'delete',
+  'search',
+  'edit',
+  'edit-outline',
+  'rank',
+  'refresh',
+  'share',
+  'setting',
+  'upload',
+  'upload2',
+  'download',
+  'loading'
+]
+
+export default elementIcons

src/views/icons/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="icons-container">
+    <aside>
+      <a
+        href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/icon.html"
+        target="_blank"
+      >Add and use
+      </a>
+    </aside>
+    <el-tabs type="border-card">
+      <el-tab-pane label="Icons">
+        <div
+          v-for="item of svgIcons"
+          :key="item"
+          @click="handleClipboard(generateSvgIconCode(item),$event)"
+        >
+          <el-tooltip placement="top">
+            <div slot="content">
+              {{ generateSvgIconCode(item) }}
+            </div>
+            <div class="icon-item">
+              <svg-icon
+                :name="item"
+                class="disabled"
+              />
+              <span>{{ item }}</span>
+            </div>
+          </el-tooltip>
+        </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>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { handleClipboard } from '@/utils/clipboard'
+import elementIcons from './elementIcons'
+import svgIcons from './svgIcons'
+
+@Component({
+  methods: {
+    handleClipboard
+  }
+})
+export default class Icons extends Vue {
+  private svgIcons = svgIcons
+  private elementIcons = elementIcons
+
+  private generateElementIconCode(symbol: string) {
+    return `<i class="el-icon-${symbol}" />`
+  }
+
+  private generateSvgIconCode(symbol: string) {
+    return `<svg-icon name="${symbol}" />`
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.icons-container {
+  margin: 10px 20px 0;
+  overflow: hidden;
+
+  .icon-item {
+    margin: 20px;
+    height: 85px;
+    text-align: center;
+    width: 100px;
+    float: left;
+    font-size: 30px;
+    color: #24292e;
+    cursor: pointer;
+  }
+
+  span {
+    display: block;
+    font-size: 16px;
+    margin-top: 10px;
+  }
+
+  .disabled {
+    pointer-events: none;
+  }
+}
+</style>