feat[SvgIcon]: support import svg from url

This commit is contained in:
Pan 2019-05-24 16:57:40 +08:00
parent fa7310902a
commit 79eeed7d59
1 changed files with 20 additions and 1 deletions

View File

@ -1,10 +1,14 @@
<template>
<svg :class="svgClass" aria-hidden="true" v-on="$listeners">
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
import { isExternal } from '@/utils/validate'
export default {
name: 'SvgIcon',
props: {
@ -18,6 +22,9 @@ export default {
}
},
computed: {
isExternal() {
return isExternal(this.iconClass)
},
iconName() {
return `#icon-${this.iconClass}`
},
@ -27,6 +34,12 @@ export default {
} else {
return 'svg-icon'
}
},
styleExternalIcon() {
return {
mask: `url(${this.iconClass}) no-repeat 50% 50%`,
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
}
}
}
}
@ -40,4 +53,10 @@ export default {
fill: currentColor;
overflow: hidden;
}
.svg-external-icon {
background-color: currentColor;
mask-size: cover!important;
display: inline-block;
}
</style>