Skip to content
Snippets Groups Projects
Commit 90fd4328 authored by Pan's avatar Pan Committed by 花裤衩
Browse files

add icons page

parent 97570fa6
No related branches found
No related tags found
No related merge requests found
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
<?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
......@@ -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,
......
const data = {
state: {
iconsMap: []
},
generate(iconsMap) {
this.state.iconsMap = iconsMap
}
}
export default data
<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>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment