| 提交 | 用户 | 时间 | ||
| e57a89 | 1 | <template> |
| 懒 | 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 | import { isExternal } from '@/utils/validate' | |
| 10 | ||
| 11 | export default { | |
| 12 | name: 'SvgIcon', | |
| 13 | props: { | |
| 14 | iconClass: { | |
| 15 | type: String, | |
| 16 | required: true | |
| 17 | }, | |
| 18 | className: { | |
| 19 | type: String, | |
| 20 | default: '' | |
| 21 | } | |
| 22 | }, | |
| 23 | computed: { | |
| 24 | isExternal() { | |
| 25 | return isExternal(this.iconClass) | |
| 26 | }, | |
| 27 | iconName() { | |
| 28 | return `#icon-${this.iconClass}` | |
| 29 | }, | |
| 30 | svgClass() { | |
| 31 | if (this.className) { | |
| 32 | return 'svg-icon ' + this.className | |
| 33 | } else { | |
| 34 | return 'svg-icon' | |
| 35 | } | |
| 36 | }, | |
| 37 | styleExternalIcon() { | |
| 38 | return { | |
| 39 | mask: `url(${this.iconClass}) no-repeat 50% 50%`, | |
| 40 | '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%` | |
| 41 | } | |
| 42 | } | |
| 43 | } | |
| 44 | } | |
| 45 | </script> | |
| 46 | ||
| 47 | <style scoped> | |
| 48 | .svg-icon { | |
| 49 | width: 1em; | |
| 50 | height: 1em; | |
| 51 | vertical-align: -0.15em; | |
| 52 | fill: currentColor; | |
| 53 | overflow: hidden; | |
| 54 | } | |
| 55 | ||
| 56 | .svg-external-icon { | |
| 57 | background-color: currentColor; | |
| 58 | mask-size: cover!important; | |
| 59 | display: inline-block; | |
| 60 | } | |
| 61 | </style> | |
