| 提交 | 用户 | age | ||
| 2a61f6 | 1 | <template> |
| L | 2 | <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" /> |
| 3 | <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"> | |
| 4 | <use :xlink:href="iconName" /> | |
| 5 | </svg> | |
| 6 | </template> | |
| 7 | ||
| 8 | <script> | |
| 9 | // doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage | |
| 10 | import { isExternal } from '@/utils/validate' | |
| 11 | ||
| 12 | export default { | |
| 13 | name: 'SvgIcon', | |
| 14 | props: { | |
| 15 | iconClass: { | |
| 16 | type: String, | |
| 17 | required: true | |
| 18 | }, | |
| 19 | className: { | |
| 20 | type: String, | |
| 21 | default: '' | |
| 22 | } | |
| 23 | }, | |
| 24 | computed: { | |
| 25 | isExternal() { | |
| 26 | return isExternal(this.iconClass) | |
| 27 | }, | |
| 28 | iconName() { | |
| 29 | return `#icon-${this.iconClass}` | |
| 30 | }, | |
| 31 | svgClass() { | |
| 32 | if (this.className) { | |
| 33 | return 'svg-icon ' + this.className | |
| 34 | } else { | |
| 35 | return 'svg-icon' | |
| 36 | } | |
| 37 | }, | |
| 38 | styleExternalIcon() { | |
| 39 | return { | |
| 40 | mask: `url(${this.iconClass}) no-repeat 50% 50%`, | |
| 41 | '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%` | |
| 42 | } | |
| 43 | } | |
| 44 | } | |
| 45 | } | |
| 46 | </script> | |
| 47 | ||
| 48 | <style scoped> | |
| 49 | .svg-icon { | |
| 50 | width: 1em; | |
| 51 | height: 1em; | |
| 52 | vertical-align: -0.15em; | |
| 53 | fill: currentColor; | |
| 54 | overflow: hidden; | |
| 55 | } | |
| 56 | ||
| 57 | .svg-external-icon { | |
| 58 | background-color: currentColor; | |
| 59 | mask-size: cover!important; | |
| 60 | display: inline-block; | |
| 61 | } | |
| 62 | </style> | |
