diff --git a/package.json b/package.json
index bd8e864..09c709a 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,6 @@
   },
   "browserslist": [
     "> 1%",
-    "last 2 versions",
-    "not ie <= 8"
+    "last 2 versions"
   ]
 }
diff --git a/.postcssrc.js b/postcss.config.js
similarity index 100%
rename from .postcssrc.js
rename to postcss.config.js
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
index 27da76c..b07ded2 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>