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