add icons page

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

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1504000178424" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14764" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M871.424 61.44q18.432 0 34.816 6.656t28.672 18.944 19.456 28.672 7.168 35.84l0 720.896q0 38.912-25.088 64.512t-62.976 25.6l-721.92 0q-40.96 0-66.048-26.624t-25.088-66.56l0-718.848q0-35.84 24.576-62.464t65.536-26.624l720.896 0zM633.856 829.44q18.432 0 26.624-8.704t8.192-23.04q0-13.312-8.192-22.528t-26.624-9.216l-62.464 0q1.024-2.048 1.024-6.144l0-507.904 63.488 0q18.432 0 25.6-9.216t7.168-22.528-7.168-22.528-25.6-9.216l-249.856 0q-18.432 0-25.6 9.216t-7.168 22.528 7.168 22.528 25.6 9.216l57.344 0 0 507.904q0 2.048 0.512 3.072t0.512 3.072l-56.32 0q-18.432 0-26.624 9.216t-8.192 22.528q0 14.336 8.192 23.04t26.624 8.704l245.76 0z" p-id="14765"></path></svg>

src/router/index.js

@@ -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/views/svg-icons/generateIconsView.js

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

src/views/svg-icons/index.vue

@@ -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>