懒羊羊
2024-01-31 e57a8990ae56f657a59c435a0613c5f7a8728003
提交 | 用户 | 时间
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>