diff --git a/src/icons/index.js b/src/icons/index.js index 5b20f849b971ef064d86cc801bd579a54bae2a0b..d850a9c3568eaf6786c88a3a1855f24a366534dc 100644 --- a/src/icons/index.js +++ b/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 diff --git a/src/icons/svg/icons.svg b/src/icons/svg/icons.svg new file mode 100644 index 0000000000000000000000000000000000000000..906af96a020bb885e9dc2c059bba35cb767857e7 --- /dev/null +++ b/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> \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 407acc7a87a56ab4200f28d707be6f9fef49dc39..d4d504be6e7c7dfb5118d7b62aaadb8b525527a3 100644 --- a/src/router/index.js +++ b/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, diff --git a/src/views/svg-icons/generateIconsView.js b/src/views/svg-icons/generateIconsView.js new file mode 100644 index 0000000000000000000000000000000000000000..a3458b2eadd85c9f2407d4b38cf91241cb04dba5 --- /dev/null +++ b/src/views/svg-icons/generateIconsView.js @@ -0,0 +1,10 @@ +const data = { + state: { + iconsMap: [] + }, + generate(iconsMap) { + this.state.iconsMap = iconsMap + } +} + +export default data diff --git a/src/views/svg-icons/index.vue b/src/views/svg-icons/index.vue new file mode 100644 index 0000000000000000000000000000000000000000..e0233f98e36076f483b4eca48544dae2913b8f5f --- /dev/null +++ b/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>