From 73babc4880fe10675fa58c01e3a38bd9387ebcb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= <panfree23@gmail.com>
Date: Mon, 20 May 2019 11:03:29 +0800
Subject: [PATCH] feat[SvgIcon]: support import svg from url (#2052)
---
src/components/SvgIcon/index.vue | 21 ++++++++++++++++++++-
1 file changed, 20 insertions(+), 1 deletion(-)
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
index 27da76cf..b07ded2a 100644
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@@ -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>