add icons page

Author: PanJiaChen

src/icons/index.js

@@ -1,10 +1,12 @@
 import Vue from 'vue'
 import IconSvg from '@/components/Icon-svg'// svg组件
-
+import generateIconsView from '@/views/svg-icons/generateIconsView.js'// just for views/icons , you can delete it
 // register globally
 Vue.component('icon-svg', IconSvg)
 const requireAll = requireContext => requireContext.keys().map(requireContext)
 const req = require.context('./svg', false, /\.svg$/)
 
-requireAll(req)
+const iconMap = requireAll(req)
 
+console.log(generateIconsView)
+generateIconsView.generate(iconMap) // just for views/icons , you can delete it

src/icons/svg/icons.svg

@@ -55,6 +55,13 @@ export const asyncRouterMap = [
     noDropdown: true,
     children: [{ path: 'index', component: _import('permission/index'), name: '权限测试页', meta: { role: ['admin'] }}]
   },
+  {
+    path: '/icon',
+    component: Layout,
+    icon: 'icons',
+    noDropdown: true,
+    children: [{ path: 'index', component: _import('svg-icons/index'), name: 'icons' }]
+  },
   {
     path: '/components',
     component: Layout,

src/router/index.js

@@ -0,0 +1,10 @@
+const data = {
+  state: {
+    iconsMap: []
+  },
+  generate(iconsMap) {
+    this.state.iconsMap = iconsMap
+  }
+}
+
+export default data

src/views/svg-icons/generateIconsView.js

@@ -0,0 +1,52 @@
+<template>
+  <div class="icons-container">
+    <div class="icons-wrapper">
+      <div v-for='item of iconsMap' :key='item' class='icon-item'>
+        <icon-svg :icon-class="item" />
+        <span>{{item}}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import icons from './generateIconsView'
+
+export default {
+  data() {
+    return {
+      iconsMap: []
+    }
+  },
+  mounted() {
+    const iconsMap = icons.state.iconsMap.map((i) => {
+      return i.default.id.split('-')[1]
+    })
+    this.iconsMap = iconsMap
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.icons-container {
+  margin: 40px 20px 0;
+  overflow: hidden;
+  .icons-wrapper {
+    margin: 0 auto;
+  }
+  .icon-item {
+    margin: 20px;
+    height: 137px;
+    text-align: center;
+    width: 120px;
+    float: left;
+    font-size: 40px;
+    color: #666;
+  }
+  span {
+    display: block;
+    font-size: 24px;
+    margin-top: 10px;
+  }
+}
+</style>