add icons page

This commit is contained in:
Pan 2017-08-29 17:53:41 +08:00 committed by 花裤衩
parent 97570fa612
commit 90fd4328b7
5 changed files with 74 additions and 2 deletions

View File

@ -1,10 +1,12 @@
import Vue from 'vue' import Vue from 'vue'
import IconSvg from '@/components/Icon-svg'// svg组件 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 // register globally
Vue.component('icon-svg', IconSvg) Vue.component('icon-svg', IconSvg)
const requireAll = requireContext => requireContext.keys().map(requireContext) const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/) 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

1
src/icons/svg/icons.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -55,6 +55,13 @@ export const asyncRouterMap = [
noDropdown: true, noDropdown: true,
children: [{ path: 'index', component: _import('permission/index'), name: '权限测试页', meta: { role: ['admin'] }}] 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', path: '/components',
component: Layout, component: Layout,

View File

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

View File

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