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>