<template>
<el-dialog :visible.sync="visible" :title="'Icons'">
<div style="background: #efefef; max-height: 500px; overflow: hidden scroll;">
<el-row :gutter="10">
<el-col v-for="icon in icons" :key="icon" :span="3" class="col-hover" style="padding: 8px; text-align: center; cursor: pointer;" @click.native="handleCopy(icon)">
<svg class="icon-svg aui-navbar__icon-menu" style="height: 24px; width: 24px;" aria-hidden="true">
<use v-bind:xlink:href="`#${icon}`"></use>
</svg>
</el-col>
</el-row>
</div>
<div slot="footer">
<el-button @click="close()">Close</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
name: 'IconsDialog',
data() {
return {
icons: [],
visible: false
}
},
methods: {
init() {
this.loadIcons()
this.visible = true
},
loadIcons() {
this.icons = [
'icon-check-circle',
'icon-CI',
'icon-Dollar',
'icon-compass',
'icon-close-circle',
'icon-frown',
'icon-info-circle',
'icon-left-circle',
'icon-down-circle',
'icon-EURO',
'icon-copyright',
'icon-minus-circle',
'icon-meh',
'icon-plus-circle',
'icon-play-circle',
'icon-question-circle',
'icon-Pound',
'icon-right-circle',
'icon-smile',
'icon-trademark',
'icon-time-circle',
'icon-timeout',
'icon-earth',
'icon-YUAN',
'icon-up-circle',
'icon-warning-circle',
'icon-sync',
'icon-transaction',
'icon-undo',
'icon-redo',
'icon-reload',
'icon-reloadtime',
'icon-message',
'icon-dashboard',
'icon-issuesclose',
'icon-poweroff',
'icon-logout',
'icon-login',
'icon-piechart',
'icon-setting',
'icon-eye',
'icon-location',
'icon-edit-square',
'icon-export',
'icon-save',
'icon-Import',
'icon-appstore',
'icon-close-square',
'icon-down-square',
'icon-layout',
'icon-left-square',
'icon-play-square',
'icon-control',
'icon-codelibrary',
'icon-detail',
'icon-minus-square',
'icon-plus-square',
'icon-right-square',
'icon-project',
'icon-wallet',
'icon-up-square',
'icon-calculator',
'icon-interation',
'icon-check-square',
'icon-border',
'icon-border-outer',
'icon-border-top',
'icon-border-bottom',
'icon-border-left',
'icon-border-right',
'icon-border-inner',
'icon-border-verticle',
'icon-border-horizontal',
'icon-radius-bottomleft',
'icon-radius-bottomright',
'icon-radius-upleft',
'icon-radius-upright',
'icon-radius-setting',
'icon-adduser',
'icon-deleteteam',
'icon-deleteuser',
'icon-addteam',
'icon-user',
'icon-team',
'icon-areachart',
'icon-linechart',
'icon-barchart',
'icon-pointmap',
'icon-container',
'icon-database',
'icon-sever',
'icon-mobile',
'icon-tablet',
'icon-redenvelope',
'icon-book',
'icon-filedone',
'icon-reconciliation',
'icon-file-exception',
'icon-filesync',
'icon-filesearch',
'icon-solution',
'icon-fileprotect',
'icon-file-add',
'icon-file-excel',
'icon-file-exclamation',
'icon-file-pdf',
'icon-file-image',
'icon-file-markdown',
'icon-file-unknown',
'icon-file-ppt',
'icon-file-word',
'icon-file',
'icon-file-zip',
'icon-file-text',
'icon-file-copy',
'icon-snippets',
'icon-audit',
'icon-diff',
'icon-Batchfolding',
'icon-securityscan',
'icon-propertysafety',
'icon-safetycertificate',
'icon-insurance',
'icon-alert',
'icon-delete',
'icon-hourglass',
'icon-bulb',
'icon-experiment',
'icon-bell',
'icon-trophy',
'icon-rest',
'icon-USB',
'icon-skin',
'icon-home',
'icon-bank',
'icon-filter',
'icon-funnelplot',
'icon-like',
'icon-unlike',
'icon-unlock',
'icon-lock',
'icon-customerservice',
'icon-flag',
'icon-moneycollect',
'icon-medicinebox',
'icon-shop',
'icon-rocket',
'icon-shopping',
'icon-folder',
'icon-folder-open',
'icon-folder-add',
'icon-deploymentunit',
'icon-accountbook',
'icon-contacts',
'icon-carryout',
'icon-calendar-check',
'icon-calendar',
'icon-scan',
'icon-select',
'icon-boxplot',
'icon-build',
'icon-sliders',
'icon-laptop',
'icon-barcode',
'icon-camera',
'icon-cluster',
'icon-gateway',
'icon-car',
'icon-printer',
'icon-read',
'icon-cloud-server',
'icon-cloud-upload',
'icon-cloud',
'icon-cloud-download',
'icon-cloud-sync',
'icon-video',
'icon-notification',
'icon-sound',
'icon-radarchart',
'icon-qrcode',
'icon-fund',
'icon-image',
'icon-mail',
'icon-table',
'icon-idcard',
'icon-creditcard',
'icon-heart',
'icon-block',
'icon-error',
'icon-star',
'icon-gold',
'icon-heatmap',
'icon-wifi',
'icon-attachment',
'icon-edit',
'icon-key',
'icon-api',
'icon-disconnect',
'icon-highlight',
'icon-monitor',
'icon-link',
'icon-man',
'icon-percentage',
'icon-search',
'icon-pushpin',
'icon-phone',
'icon-shake',
'icon-tag',
'icon-wrench',
'icon-woman',
'icon-tags',
'icon-scissor',
'icon-mr',
'icon-share',
'icon-branches',
'icon-fork',
'icon-shrink',
'icon-arrawsalt',
'icon-verticalright',
'icon-verticalleft',
'icon-right',
'icon-left',
'icon-up',
'icon-down',
'icon-fullscreen',
'icon-fullscreen-exit',
'icon-doubleleft',
'icon-doubleright',
'icon-arrowright',
'icon-arrowup',
'icon-arrowleft',
'icon-arrowdown',
'icon-upload',
'icon-colum-height',
'icon-vertical-align-botto',
'icon-vertical-align-middl',
'icon-totop',
'icon-vertical-align-top',
'icon-download',
'icon-sort-descending',
'icon-sort-ascending',
'icon-fall',
'icon-swap',
'icon-stock',
'icon-rise',
'icon-indent',
'icon-outdent',
'icon-menu',
'icon-unorderedlist',
'icon-orderedlist',
'icon-align-right',
'icon-align-center',
'icon-align-left',
'icon-pic-center',
'icon-pic-right',
'icon-pic-left',
'icon-bold',
'icon-font-colors',
'icon-exclaimination',
'icon-font-size',
'icon-infomation',
'icon-line-height',
'icon-strikethrough',
'icon-underline',
'icon-number',
'icon-italic',
'icon-code',
'icon-column-width',
'icon-check',
'icon-ellipsis',
'icon-dash',
'icon-close',
'icon-enter',
'icon-line',
'icon-minus',
'icon-question',
'icon-plus',
'icon-rollback',
'icon-small-dash',
'icon-pause',
'icon-bg-colors',
'icon-crown',
'icon-drag',
'icon-desktop',
'icon-gift',
'icon-stop',
'icon-fire',
'icon-thunderbolt',
'icon-check-circle-fill',
'icon-left-circle-fill',
'icon-down-circle-fill',
'icon-minus-circle-fill',
'icon-close-circle-fill',
'icon-info-circle-fill',
'icon-up-circle-fill',
'icon-right-circle-fill',
'icon-plus-circle-fill',
'icon-question-circle-fill',
'icon-EURO-circle-fill',
'icon-frown-fill',
'icon-copyright-circle-fil',
'icon-CI-circle-fill',
'icon-compass-fill',
'icon-Dollar-circle-fill',
'icon-poweroff-circle-fill',
'icon-meh-fill',
'icon-play-circle-fill',
'icon-Pound-circle-fill',
'icon-smile-fill',
'icon-stop-fill',
'icon-warning-circle-fill',
'icon-time-circle-fill',
'icon-trademark-circle-fil',
'icon-YUAN-circle-fill',
'icon-heart-fill',
'icon-piechart-circle-fil',
'icon-dashboard-fill',
'icon-message-fill',
'icon-check-square-fill',
'icon-down-square-fill',
'icon-minus-square-fill',
'icon-close-square-fill',
'icon-codelibrary-fill',
'icon-left-square-fill',
'icon-play-square-fill',
'icon-up-square-fill',
'icon-right-square-fill',
'icon-plus-square-fill',
'icon-accountbook-fill',
'icon-carryout-fill',
'icon-calendar-fill',
'icon-calculator-fill',
'icon-interation-fill',
'icon-project-fill',
'icon-detail-fill',
'icon-save-fill',
'icon-wallet-fill',
'icon-control-fill',
'icon-layout-fill',
'icon-appstore-fill',
'icon-mobile-fill',
'icon-tablet-fill',
'icon-book-fill',
'icon-redenvelope-fill',
'icon-safetycertificate-f',
'icon-propertysafety-fill',
'icon-insurance-fill',
'icon-securityscan-fill',
'icon-file-exclamation-fil',
'icon-file-add-fill',
'icon-file-fill',
'icon-file-excel-fill',
'icon-file-markdown-fill',
'icon-file-text-fill',
'icon-file-ppt-fill',
'icon-file-unknown-fill',
'icon-file-word-fill',
'icon-file-zip-fill',
'icon-file-pdf-fill',
'icon-file-image-fill',
'icon-diff-fill',
'icon-file-copy-fill',
'icon-snippets-fill',
'icon-batchfolding-fill',
'icon-reconciliation-fill',
'icon-folder-add-fill',
'icon-folder-fill',
'icon-folder-open-fill',
'icon-database-fill',
'icon-container-fill',
'icon-sever-fill',
'icon-calendar-check-fill',
'icon-image-fill',
'icon-idcard-fill',
'icon-creditcard-fill',
'icon-fund-fill',
'icon-read-fill',
'icon-contacts-fill',
'icon-delete-fill',
'icon-notification-fill',
'icon-flag-fill',
'icon-moneycollect-fill',
'icon-medicinebox-fill',
'icon-rest-fill',
'icon-shopping-fill',
'icon-skin-fill',
'icon-video-fill',
'icon-sound-fill',
'icon-bulb-fill',
'icon-bell-fill',
'icon-filter-fill',
'icon-fire-fill',
'icon-funnelplot-fill',
'icon-gift-fill',
'icon-hourglass-fill',
'icon-home-fill',
'icon-trophy-fill',
'icon-location-fill',
'icon-cloud-fill',
'icon-customerservice-fill',
'icon-experiment-fill',
'icon-eye-fill',
'icon-like-fill',
'icon-lock-fill',
'icon-unlike-fill',
'icon-star-fill',
'icon-unlock-fill',
'icon-alert-fill',
'icon-api-fill',
'icon-highlight-fill',
'icon-phone-fill',
'icon-edit-fill',
'icon-pushpin-fill',
'icon-rocket-fill',
'icon-thunderbolt-fill',
'icon-tag-fill',
'icon-wrench-fill',
'icon-tags-fill',
'icon-bank-fill',
'icon-camera-fill',
'icon-error-fill',
'icon-crown-fill',
'icon-mail-fill',
'icon-car-fill',
'icon-printer-fill',
'icon-shop-fill',
'icon-setting-fill',
'icon-USB-fill',
'icon-golden-fill',
'icon-build-fill',
'icon-boxplot-fill',
'icon-sliders-fill',
'icon-alibaba',
'icon-alibabacloud',
'icon-antdesign',
'icon-ant-cloud',
'icon-behance',
'icon-googleplus',
'icon-medium',
'icon-google',
'icon-IE',
'icon-amazon',
'icon-slack',
'icon-alipay',
'icon-taobao',
'icon-zhihu',
'icon-HTML',
'icon-linkedin',
'icon-yahoo',
'icon-facebook',
'icon-skype',
'icon-CodeSandbox',
'icon-chrome',
'icon-codepen',
'icon-aliwangwang',
'icon-apple',
'icon-android',
'icon-sketch',
'icon-Gitlab',
'icon-dribbble',
'icon-instagram',
'icon-reddit',
'icon-windows',
'icon-yuque',
'icon-Youtube',
'icon-Gitlab-fill',
'icon-dropbox',
'icon-dingtalk',
'icon-android-fill',
'icon-apple-fill',
'icon-HTML-fill',
'icon-windows-fill',
'icon-QQ',
'icon-twitter',
'icon-skype-fill',
'icon-weibo',
'icon-yuque-fill',
'icon-Youtube-fill',
'icon-yahoo-fill',
'icon-wechat-fill',
'icon-chrome-fill',
'icon-alipay-circle-fill',
'icon-aliwangwang-fill',
'icon-behance-circle-fill',
'icon-amazon-circle-fill',
'icon-codepen-circle-fill',
'icon-CodeSandbox-circle-f',
'icon-dropbox-circle-fill',
'icon-github-fill',
'icon-dribbble-circle-fill',
'icon-googleplus-circle-f',
'icon-medium-circle-fill',
'icon-QQ-circle-fill',
'icon-IE-circle-fill',
'icon-google-circle-fill',
'icon-dingtalk-circle-fill',
'icon-sketch-circle-fill',
'icon-slack-circle-fill',
'icon-twitter-circle-fill',
'icon-taobao-circle-fill',
'icon-weibo-circle-fill',
'icon-zhihu-circle-fill',
'icon-reddit-circle-fill',
'icon-alipay-square-fill',
'icon-dingtalk-square-fill',
'icon-CodeSandbox-square-f',
'icon-behance-square-fill',
'icon-amazon-square-fill',
'icon-codepen-square-fill',
'icon-dribbble-square-fill',
'icon-dropbox-square-fill',
'icon-facebook-fill',
'icon-googleplus-square-f',
'icon-google-square-fill',
'icon-instagram-fill',
'icon-IE-square-fill',
'icon-medium-square-fill',
'icon-linkedin-fill',
'icon-QQ-square-fill',
'icon-reddit-square-fill',
'icon-twitter-square-fill',
'icon-sketch-square-fill',
'icon-slack-square-fill',
'icon-taobao-square-fill',
'icon-weibo-square-fill',
'icon-zhihu-square-fill',
'icon-zoomout',
'icon-apartment',
'icon-audio',
'icon-audio-fill',
'icon-robot',
'icon-zoomin'
]
},
handleCopy(v) {
if (navigator.clipboard) {
/** 如果支持剪切板api */
navigator.clipboard
.writeText(`<svg class="icon-svg aui-navbar__icon-menu" style="height: 24px; width: 24px;" aria-hidden="true"><use xlink:href="#${v}"></use></svg>`)
.then(() => {
this.$message.success('已复制')
})
} else {
this.$message.info('请打开 Console 手动复制.')
console.log(`<svg class="icon-svg aui-navbar__icon-menu" style="height: 24px; width: 24px;" aria-hidden="true"><use xlink:href="#${v}"></use></svg>`)
}
},
close() {
this.visible = false
this.$emit('destory-me')
}
}
}
</script>
<style scoped>
.col-hover:hover {
background: #ddd;
}
</style>