|  | @@ -1,87 +0,0 @@
 | 
	
		
			
				|  |  | -<template>
 | 
	
		
			
				|  |  | -  <div class="icons-container">
 | 
	
		
			
				|  |  | -    <aside>
 | 
	
		
			
				|  |  | -      <a href="#" target="_blank">Add and use
 | 
	
		
			
				|  |  | -      </a>
 | 
	
		
			
				|  |  | -    </aside>
 | 
	
		
			
				|  |  | -    <el-tabs type="border-card">
 | 
	
		
			
				|  |  | -      <el-tab-pane label="Icons">
 | 
	
		
			
				|  |  | -        <div v-for="item of svgIcons" :key="item">
 | 
	
		
			
				|  |  | -          <el-tooltip placement="top">
 | 
	
		
			
				|  |  | -            <div slot="content">
 | 
	
		
			
				|  |  | -              {{ generateIconCode(item) }}
 | 
	
		
			
				|  |  | -            </div>
 | 
	
		
			
				|  |  | -            <div class="icon-item">
 | 
	
		
			
				|  |  | -              <svg-icon :icon-class="item" class-name="disabled" />
 | 
	
		
			
				|  |  | -              <span>{{ item }}</span>
 | 
	
		
			
				|  |  | -            </div>
 | 
	
		
			
				|  |  | -          </el-tooltip>
 | 
	
		
			
				|  |  | -        </div>
 | 
	
		
			
				|  |  | -      </el-tab-pane>
 | 
	
		
			
				|  |  | -      <el-tab-pane label="Element-UI Icons">
 | 
	
		
			
				|  |  | -        <div v-for="item of elementIcons" :key="item">
 | 
	
		
			
				|  |  | -          <el-tooltip placement="top">
 | 
	
		
			
				|  |  | -            <div slot="content">
 | 
	
		
			
				|  |  | -              {{ generateElementIconCode(item) }}
 | 
	
		
			
				|  |  | -            </div>
 | 
	
		
			
				|  |  | -            <div class="icon-item">
 | 
	
		
			
				|  |  | -              <i :class="'el-icon-' + item" />
 | 
	
		
			
				|  |  | -              <span>{{ item }}</span>
 | 
	
		
			
				|  |  | -            </div>
 | 
	
		
			
				|  |  | -          </el-tooltip>
 | 
	
		
			
				|  |  | -        </div>
 | 
	
		
			
				|  |  | -      </el-tab-pane>
 | 
	
		
			
				|  |  | -    </el-tabs>
 | 
	
		
			
				|  |  | -  </div>
 | 
	
		
			
				|  |  | -</template>
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -<script>
 | 
	
		
			
				|  |  | -import svgIcons from './svg-icons'
 | 
	
		
			
				|  |  | -import elementIcons from './element-icons'
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -export default {
 | 
	
		
			
				|  |  | -  name: 'Icons',
 | 
	
		
			
				|  |  | -  data() {
 | 
	
		
			
				|  |  | -    return {
 | 
	
		
			
				|  |  | -      svgIcons,
 | 
	
		
			
				|  |  | -      elementIcons
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -  },
 | 
	
		
			
				|  |  | -  methods: {
 | 
	
		
			
				|  |  | -    generateIconCode(symbol) {
 | 
	
		
			
				|  |  | -      return `<svg-icon icon-class="${symbol}" />`
 | 
	
		
			
				|  |  | -    },
 | 
	
		
			
				|  |  | -    generateElementIconCode(symbol) {
 | 
	
		
			
				|  |  | -      return `<i class="el-icon-${symbol}" />`
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -}
 | 
	
		
			
				|  |  | -</script>
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -<style lang="scss" scoped>
 | 
	
		
			
				|  |  | -.icons-container {
 | 
	
		
			
				|  |  | -  margin: 10px 20px 0;
 | 
	
		
			
				|  |  | -  overflow: hidden;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -  .icon-item {
 | 
	
		
			
				|  |  | -    margin: 20px;
 | 
	
		
			
				|  |  | -    height: 85px;
 | 
	
		
			
				|  |  | -    text-align: center;
 | 
	
		
			
				|  |  | -    width: 100px;
 | 
	
		
			
				|  |  | -    float: left;
 | 
	
		
			
				|  |  | -    font-size: 30px;
 | 
	
		
			
				|  |  | -    color: #24292e;
 | 
	
		
			
				|  |  | -    cursor: pointer;
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -  span {
 | 
	
		
			
				|  |  | -    display: block;
 | 
	
		
			
				|  |  | -    font-size: 16px;
 | 
	
		
			
				|  |  | -    margin-top: 10px;
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -  .disabled {
 | 
	
		
			
				|  |  | -    pointer-events: none;
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -}
 | 
	
		
			
				|  |  | -</style>
 |