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