docs: update icon doc

components/icon/index.en-US.md

@@ -80,25 +80,21 @@ See [iconfont.cn documents](http://iconfont.cn/help/detail?spm=a313x.7781069.199
 
 ### Custom SVG Icon
 
-You can import SVG icon as an react component by using `webpack` and [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack). `@svgr/webpack`'s `options` [reference](https://github.com/smooth-code/svgr#options).
+You can import SVG icon as an vue component by using `vue cli 3` and [`vue-svg-loader`](https://www.npmjs.com/package/vue-svg-loader). `vue-svg-loader`'s `options` [reference](https://github.com/visualfanatic/vue-svg-loader).
 
 ```js
-// webpack.config.js
-{
-  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-  use: [
-    {
-      loader: 'babel-loader',
-    },
-    {
-      loader: '@svgr/webpack',
-      options: {
-        babel: false,
-        icon: true,
-      },
-    },
-  ],
-}
+// vue.config.js
+module.exports = {
+  chainWebpack: (config) => {
+    const svgRule = config.module.rule('svg');
+
+    svgRule.uses.clear();
+
+    svgRule
+      .use('vue-svg-loader')
+      .loader('vue-svg-loader');
+  },
+};
 ```
 
 ```jsx

components/icon/index.zh-CN.md

@@ -78,25 +78,21 @@ new Vue({
 
 ### 自定义 SVG 图标
 
-如果使用 `webpack`，可以通过配置 [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack) 来将 `svg` 图标作为 `React` 组件导入。`@svgr/webpack` 的 `options` 选项请参阅 [svgr文档](https://github.com/smooth-code/svgr#options)。
+如果使用 `vue cli 3`，可以通过配置 [vue-svg-loader](https://www.npmjs.com/package/vue-svg-loader) 来将 `svg` 图标作为 `Vue` 组件导入。更多`vue-svg-loader` 的使用方式请参阅 [文档](https://github.com/visualfanatic/vue-svg-loader)。
 
 ```js
-// webpack.config.js
-{
-  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-  use: [
-    {
-      loader: 'babel-loader',
-    },
-    {
-      loader: '@svgr/webpack',
-      options: {
-        babel: false,
-        icon: true,
-      },
-    },
-  ],
-}
+// vue.config.js
+module.exports = {
+  chainWebpack: (config) => {
+    const svgRule = config.module.rule('svg');
+
+    svgRule.uses.clear();
+
+    svgRule
+      .use('vue-svg-loader')
+      .loader('vue-svg-loader');
+  },
+};
 ```
 
 ```jsx
@@ -105,8 +101,10 @@ import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.
 new Vue({
   el: '#app',
   template: '<a-icon :component="MessageSvg" />',
-  components: {
-    'my-icon': MyIcon,
+  data() {
+    return {
+      MessageSvg
+    }
   }
 })
 ```

package.json

@@ -106,7 +106,6 @@
     "eslint-plugin-html": "^3.2.2",
     "eslint-plugin-vue": "^3.13.0",
     "eslint-plugin-vue-libs": "^1.2.1",
-    "extract-text-webpack-plugin": "^3.0.2",
     "fetch-jsonp": "^1.1.3",
     "fs-extra": "^7.0.0",
     "glob": "^7.1.2",

site/components/demoBox.vue

@@ -16,12 +16,14 @@
       <a-tooltip :title="codeExpand ? 'Hide Code' : 'Show Code'">
         <span class="code-expand-icon">
           <img
+            width="16"
             alt="expand code"
             src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg"
             :class="codeExpand ? 'code-expand-icon-hide' : 'code-expand-icon-show'"
             @click="handleCodeExpand"
           />
           <img
+            width="16"
             alt="expand code"
             src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg"
             :class="codeExpand ? 'code-expand-icon-show' : 'code-expand-icon-hide'"