skywalking-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From wush...@apache.org
Subject [skywalking-rocketbot-ui] branch master updated: Build: add git hook for code style (#249)
Date Wed, 15 Jan 2020 09:16:51 GMT
This is an automated email from the ASF dual-hosted git repository.

wusheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-rocketbot-ui.git


The following commit(s) were added to refs/heads/master by this push:
     new 9ad81a0  Build: add git hook for code style (#249)
9ad81a0 is described below

commit 9ad81a05a2f2969420c1f75769c2b4def42819e4
Author: Qiuxia Fan <fine0830@outlook.com>
AuthorDate: Wed Jan 15 17:16:41 2020 +0800

    Build: add git hook for code style (#249)
    
    * build: add hooks for pre commit
    
    * build: add prettier
    
    * style: format
    
    * style: test
    
    * style: fix
    
    * style: fix
    
    * fix: prettier
---
 .prettierrc                                        |   10 +
 package-lock.json                                  | 1113 +++++-
 package.json                                       |   14 +
 src/App.vue                                        |   58 +-
 src/assets/icons/index.ts                          |    3 +-
 src/assets/lang/en.ts                              |    2 +-
 src/assets/styles/grid.scss                        |    2 +-
 src/assets/styles/lib.scss                         |  219 +-
 src/assets/styles/reset.scss                       |  138 +-
 src/assets/styles/style.scss                       |   35 +-
 src/components/icon.html                           | 3654 ++++++++++----------
 src/components/index.ts                            |   31 +-
 src/components/noty/bootstrap-v4.css               |   62 +-
 src/components/noty/noty.css                       |  184 +-
 src/components/rk-back.vue                         |   66 +-
 src/components/rk-button.vue                       |   80 +-
 src/components/rk-date-calendar.vue                | 1017 +++---
 src/components/rk-date.vue                         |  910 ++---
 src/components/rk-dropdown-item.vue                |   75 +-
 src/components/rk-dropdown.vue                     |  130 +-
 src/components/rk-echarts.vue                      |  110 +-
 src/components/rk-footer-time.vue                  |   65 +-
 src/components/rk-footer.vue                       |  176 +-
 src/components/rk-header.vue                       |  259 +-
 src/components/rk-icon.vue                         |   97 +-
 src/components/rk-page.vue                         |  182 +-
 src/components/rk-panel.vue                        |   74 +-
 src/components/rk-popper.vue                       |  606 ++--
 src/components/rk-progress.vue                     |   77 +-
 src/components/rk-select.vue                       |  277 +-
 src/components/rk-sidebox.vue                      |  198 +-
 src/event-bus.ts                                   |   20 +-
 src/graph/fragments/alarm.ts                       |    6 +-
 src/graph/fragments/comparison.ts                  |   18 +-
 src/graph/fragments/option.ts                      |   15 +-
 src/graph/fragments/topology.ts                    |   39 +-
 src/graph/fragments/trace.ts                       |   11 +-
 src/graph/index.ts                                 |   12 +-
 src/graph/query/alarm.ts                           |    3 +-
 src/graph/query/option.ts                          |   23 +-
 src/graph/query/topology.ts                        |   56 +-
 src/graph/query/trace.ts                           |   10 +-
 src/main.ts                                        |   14 +-
 src/router.ts                                      |    2 +-
 src/store/index.ts                                 |   22 +-
 src/store/modules/alarm/index.ts                   |    5 +-
 src/store/modules/comparison/comparison-const.ts   |   66 +-
 src/store/modules/comparison/comparison-store.ts   |  284 +-
 src/store/modules/dashboard/mutation-types.ts      |    1 -
 src/store/modules/global/index.ts                  |   37 +-
 src/store/modules/topology/index.ts                |  318 +-
 src/store/modules/trace/index.ts                   |   15 +-
 src/types/comparison.d.ts                          |    4 +-
 src/types/dashboard.d.ts                           |    2 +-
 src/types/trace.d.ts                               |    2 +-
 src/utils/cancelToken.ts                           |    6 +-
 src/utils/comparison.ts                            |    5 +-
 src/utils/copy.ts                                  |    4 +-
 src/utils/cssHelper.ts                             |   12 +-
 src/utils/localtime.ts                             |   13 +-
 src/utils/queryChartData.ts                        |  562 ++-
 src/utils/tooltip.scss                             |   48 +-
 src/utils/tooltip.ts                               |   24 +-
 src/views/components/alarm/alarm-select.vue        |  216 +-
 src/views/components/alarm/alarm-table.vue         |  154 +-
 src/views/components/alarm/alarm-tool.vue          |   76 +-
 src/views/components/comparison/chart-line.vue     |  168 +-
 .../components/comparison/comparison-charts.vue    |   48 +-
 .../components/comparison/comparison-config.vue    |   56 +-
 src/views/components/dashboard/dashboard-comp.vue  |  252 +-
 src/views/components/dashboard/dashboard-item.vue  |  205 +-
 .../dashboard/tool-bar-endpoint-select-opt.vue     |   63 +-
 .../dashboard/tool-bar-endpoint-select.vue         |  234 +-
 src/views/components/dashboard/tool-bar-select.vue |  222 +-
 src/views/components/dashboard/tool-bar.vue        |  212 +-
 src/views/components/dashboard/tool-group.vue      |  281 +-
 src/views/components/dashboard/tool-nav.vue        |  278 +-
 src/views/components/topology/chart-line.vue       |  156 +-
 .../components/topology/dependency-sankey.vue      |  117 +-
 src/views/components/topology/endpoints-survey.vue |   43 +-
 src/views/components/topology/instances-survey.vue |   43 +-
 src/views/components/topology/radial.vue           |  242 +-
 src/views/components/topology/topo-aside.vue       |  316 +-
 src/views/components/topology/topo-chart.vue       |  171 +-
 .../components/topology/topo-detect-point.vue      |  308 +-
 .../topology/topo-instance-dependency.vue          |  115 +-
 src/views/components/topology/topo-select.vue      |  211 +-
 src/views/components/topology/topo-services.vue    |   45 +-
 src/views/components/topology/topo.vue             | 1233 +++----
 src/views/components/trace/d3-trace-tree.js        |  343 +-
 src/views/components/trace/d3-trace.js             |  128 +-
 .../components/trace/trace-detail-chart-list.vue   |  705 ++--
 .../components/trace/trace-detail-chart-table.vue  |  541 +--
 .../components/trace/trace-detail-chart-tree.vue   |  629 ++--
 src/views/components/trace/trace-detail.vue        |  229 +-
 src/views/components/trace/trace-search.vue        |  538 ++-
 src/views/components/trace/trace-select.vue        |  215 +-
 src/views/components/trace/trace-table.vue         |  357 +-
 src/views/containers/alarm.vue                     |   84 +-
 src/views/containers/comparison.vue                |   35 +-
 src/views/containers/dashboard.vue                 |  194 +-
 src/views/containers/index.vue                     |   65 +-
 src/views/containers/login.vue                     |  315 +-
 src/views/containers/topology/topology.vue         |   96 +-
 src/views/containers/topology/window-alarm.vue     |   48 +-
 src/views/containers/topology/window-endpoint.vue  |  190 +-
 src/views/containers/topology/window-instance.vue  |   76 +-
 src/views/containers/topology/window-trace.vue     |   76 +-
 src/views/containers/trace.vue                     |   72 +-
 109 files changed, 12435 insertions(+), 9549 deletions(-)

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..834b6e9
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,10 @@
+{
+  "trailingComma": "all",
+  "printWidth": 120,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "vueIndentScriptAndStyle": true,
+  "arrowParens": "always"
+}
diff --git a/package-lock.json b/package-lock.json
index 8262f15..b2d662f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -838,12 +838,49 @@
         "glob-to-regexp": "^0.3.0"
       }
     },
+    "@nodelib/fs.scandir": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
+      "integrity": "sha512-eGmwYQn3gxo4r7jdQnkrrN6bY478C3P+a/y72IJukF8LjB6ZHeB3c+Ehacj3sYeSmUXGlnA67/PmbM9CVwL7Dw==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "2.0.3",
+        "run-parallel": "^1.1.9"
+      },
+      "dependencies": {
+        "@nodelib/fs.stat": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz",
+          "integrity": "sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA==",
+          "dev": true
+        }
+      }
+    },
     "@nodelib/fs.stat": {
       "version": "1.1.3",
       "resolved": "http://registry.npm.taobao.org/@nodelib/fs.stat/download/@nodelib/fs.stat-1.1.3.tgz",
       "integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
       "dev": true
     },
+    "@nodelib/fs.walk": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.4.tgz",
+      "integrity": "sha512-1V9XOY4rDW0rehzbrcqAmHnz8e7SKvX27gh8Gt2WgB0+pdzdiLV83p72kZPU+jvMbS1qU5mauP2iOvO8rhmurQ==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.scandir": "2.1.3",
+        "fastq": "^1.6.0"
+      }
+    },
+    "@samverschueren/stream-to-observable": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz",
+      "integrity": "sha512-MI4Xx6LHs4Webyvi6EbspgyAb4D2Q2VtnCQ1blOJcoLS6mVa8lNN2rkIy1CVxfTUpoyIbCTkXES1rLXztFD1lg==",
+      "dev": true,
+      "requires": {
+        "any-observable": "^0.3.0"
+      }
+    },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.7.1",
       "resolved": "http://registry.npm.taobao.org/@soda/friendly-errors-webpack-plugin/download/@soda/friendly-errors-webpack-plugin-1.7.1.tgz",
@@ -897,12 +934,53 @@
         }
       }
     },
+    "@types/color-name": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
+      "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
+      "dev": true
+    },
+    "@types/events": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
+      "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==",
+      "dev": true
+    },
+    "@types/glob": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz",
+      "integrity": "sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w==",
+      "dev": true,
+      "requires": {
+        "@types/events": "*",
+        "@types/minimatch": "*",
+        "@types/node": "*"
+      }
+    },
     "@types/lodash": {
       "version": "4.14.138",
       "resolved": "https://registry.npm.taobao.org/@types/lodash/download/@types/lodash-4.14.138.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Flodash%2Fdownload%2F%40types%2Flodash-4.14.138.tgz",
       "integrity": "sha1-NPUmQNc1gjAwg0TlecFbN42RmJ4=",
       "dev": true
     },
+    "@types/minimatch": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
+      "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==",
+      "dev": true
+    },
+    "@types/node": {
+      "version": "13.1.6",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-13.1.6.tgz",
+      "integrity": "sha512-Jg1F+bmxcpENHP23sVKkNuU3uaxPnsBMW0cLjleiikFKomJQbsn0Cqk2yDvQArqzZN6ABfBkZ0To7pQ8sLdWDg==",
+      "dev": true
+    },
+    "@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
+      "dev": true
+    },
     "@types/q": {
       "version": "1.5.1",
       "resolved": "http://registry.npm.taobao.org/@types/q/download/@types/q-1.5.1.tgz",
@@ -1160,6 +1238,12 @@
             "yallist": "^2.1.2"
           }
         },
+        "prettier": {
+          "version": "1.16.3",
+          "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.16.3.tgz",
+          "integrity": "sha512-kn/GU6SMRYPxUakNXhpP0EedT/KmaPzr0H5lIsDogrykbaxOpOfAFfk5XA7DZrJyMAv1wlMV3CPcZruGXVVUZw==",
+          "dev": true
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "http://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
@@ -1413,6 +1497,24 @@
       "integrity": "sha1-tfUGMfjWzsi9IMljljr7VeBsvOk=",
       "dev": true
     },
+    "aggregate-error": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.0.1.tgz",
+      "integrity": "sha512-quoaXsZ9/BLNae5yiNoUz+Nhkwz83GhWwtYFglcjEQB2NDHCIpApbqXxIFnm4Pq/Nvhrsq5sYJFyohrrxnTGAA==",
+      "dev": true,
+      "requires": {
+        "clean-stack": "^2.0.0",
+        "indent-string": "^4.0.0"
+      },
+      "dependencies": {
+        "indent-string": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+          "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+          "dev": true
+        }
+      }
+    },
     "ajv": {
       "version": "6.9.2",
       "resolved": "http://registry.npm.taobao.org/ajv/download/ajv-6.9.2.tgz",
@@ -1455,6 +1557,12 @@
       "integrity": "sha1-V9NbhoboUeLMBMQD8cACA5dqGBM=",
       "dev": true
     },
+    "ansi-escapes": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz",
+      "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==",
+      "dev": true
+    },
     "ansi-html": {
       "version": "0.0.7",
       "resolved": "http://registry.npm.taobao.org/ansi-html/download/ansi-html-0.0.7.tgz",
@@ -1476,6 +1584,12 @@
         "color-convert": "^1.9.0"
       }
     },
+    "any-observable": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/any-observable/-/any-observable-0.3.0.tgz",
+      "integrity": "sha512-/FQM1EDkTsf63Ub2C6O7GuYFDsSXUwsaZDurV0np41ocwq0jthUAYCmhBX9f+KwlaCgIuWyr/4WlUQUBfKfZog==",
+      "dev": true
+    },
     "anymatch": {
       "version": "2.0.0",
       "resolved": "http://registry.npm.taobao.org/anymatch/download/anymatch-2.0.0.tgz",
@@ -2437,6 +2551,12 @@
         }
       }
     },
+    "clean-stack": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
+      "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
+      "dev": true
+    },
     "cli-cursor": {
       "version": "2.1.0",
       "resolved": "http://registry.npm.taobao.org/cli-cursor/download/cli-cursor-2.1.0.tgz",
@@ -2452,6 +2572,53 @@
       "integrity": "sha1-ACwZkJEtDVlYDJO9NsBW3pnkJZo=",
       "dev": true
     },
+    "cli-truncate": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-0.2.1.tgz",
+      "integrity": "sha1-nxXPuwcFAFNpIWxiasfQWrkN1XQ=",
+      "dev": true,
+      "requires": {
+        "slice-ansi": "0.0.4",
+        "string-width": "^1.0.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "dev": true,
+          "requires": {
+            "number-is-nan": "^1.0.0"
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "dev": true,
+          "requires": {
+            "code-point-at": "^1.0.0",
+            "is-fullwidth-code-point": "^1.0.0",
+            "strip-ansi": "^3.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        }
+      }
+    },
     "clipboardy": {
       "version": "1.2.3",
       "resolved": "http://registry.npm.taobao.org/clipboardy/download/clipboardy-1.2.3.tgz",
@@ -3622,6 +3789,12 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "date-fns": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
+      "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==",
+      "dev": true
+    },
     "date-now": {
       "version": "0.1.4",
       "resolved": "http://registry.npm.taobao.org/date-now/download/date-now-0.1.4.tgz",
@@ -3663,6 +3836,12 @@
       "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
       "dev": true
     },
+    "dedent": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
+      "integrity": "sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=",
+      "dev": true
+    },
     "deep-equal": {
       "version": "1.0.1",
       "resolved": "http://registry.npm.taobao.org/deep-equal/download/deep-equal-1.0.1.tgz",
@@ -4003,6 +4182,12 @@
       "integrity": "sha1-scz2Gd9yla6he8aVHcaJYyYp5Kk=",
       "dev": true
     },
+    "elegant-spinner": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/elegant-spinner/-/elegant-spinner-1.0.1.tgz",
+      "integrity": "sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=",
+      "dev": true
+    },
     "elliptic": {
       "version": "6.4.1",
       "resolved": "http://registry.npm.taobao.org/elliptic/download/elliptic-6.4.1.tgz",
@@ -4450,6 +4635,15 @@
       "integrity": "sha1-kXKMWllC7O2FMSg8eUQe5BIsNak=",
       "dev": true
     },
+    "fastq": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.6.0.tgz",
+      "integrity": "sha512-jmxqQ3Z/nXoeyDmWAzF9kH1aGZSis6e/SbfPmJpUnyZ0ogr6iscHQaml4wsEepEWSdtmpy+eVXmCRIMpxaXqOA==",
+      "dev": true,
+      "requires": {
+        "reusify": "^1.0.0"
+      }
+    },
     "faye-websocket": {
       "version": "0.10.0",
       "resolved": "http://registry.npm.taobao.org/faye-websocket/download/faye-websocket-0.10.0.tgz",
@@ -4465,6 +4659,16 @@
       "integrity": "sha1-hiRwESkBxyeg5JWoB0S9W6odZ5A=",
       "dev": true
     },
+    "figures": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz",
+      "integrity": "sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "^1.0.5",
+        "object-assign": "^4.1.0"
+      }
+    },
     "file-loader": {
       "version": "3.0.1",
       "resolved": "http://registry.npm.taobao.org/file-loader/download/file-loader-3.0.1.tgz",
@@ -4723,7 +4927,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5138,7 +5343,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5194,6 +5400,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5237,12 +5444,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -5332,6 +5541,12 @@
       "integrity": "sha1-+Xj6TJDR3+f/LWvtoqUV5xO9z0o=",
       "dev": true
     },
+    "get-own-enumerable-property-symbols": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
+      "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==",
+      "dev": true
+    },
     "get-stdin": {
       "version": "4.0.1",
       "resolved": "http://registry.npm.taobao.org/get-stdin/download/get-stdin-4.0.1.tgz",
@@ -5813,6 +6028,185 @@
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
       "dev": true
     },
+    "husky": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-4.0.9.tgz",
+      "integrity": "sha512-zaH0INH9MZBH8smr6nPdzv7pjchOZPN/AKdhkuV4zut9SyF0+pUy1ZCBzhz2uPe7Cp75YzD92ewU2ytIZ0GjUQ==",
+      "dev": true,
+      "requires": {
+        "chalk": "^3.0.0",
+        "ci-info": "^2.0.0",
+        "cosmiconfig": "^6.0.0",
+        "opencollective-postinstall": "^2.0.2",
+        "pkg-dir": "^4.2.0",
+        "please-upgrade-node": "^3.2.0",
+        "slash": "^3.0.0",
+        "which-pm-runs": "^1.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "ci-info": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
+          "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
+          "dev": true
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "cosmiconfig": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+          "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+          "dev": true,
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.1.0",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.7.2"
+          }
+        },
+        "find-up": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^5.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "import-fresh": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
+          "integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==",
+          "dev": true,
+          "requires": {
+            "parent-module": "^1.0.0",
+            "resolve-from": "^4.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^4.1.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.2.2",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.2.tgz",
+          "integrity": "sha512-WGR+xHecKTr7EbUEhyLSh5Dube9JtdiG78ufaeLxTgpudf/20KqyMioIUZJAezlTIi6evxuoUs9YXc11cU+yzQ==",
+          "dev": true,
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.2.0"
+          }
+        },
+        "parse-json": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz",
+          "integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.0.0",
+            "error-ex": "^1.3.1",
+            "json-parse-better-errors": "^1.0.1",
+            "lines-and-columns": "^1.1.6"
+          }
+        },
+        "path-exists": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+          "dev": true
+        },
+        "path-type": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+          "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+          "dev": true
+        },
+        "pkg-dir": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+          "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+          "dev": true,
+          "requires": {
+            "find-up": "^4.0.0"
+          }
+        },
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+          "dev": true
+        },
+        "slash": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "iconv-lite": {
       "version": "0.4.23",
       "resolved": "http://registry.npm.taobao.org/iconv-lite/download/iconv-lite-0.4.23.tgz",
@@ -6205,6 +6599,15 @@
       "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=",
       "dev": true
     },
+    "is-observable": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-observable/-/is-observable-1.1.0.tgz",
+      "integrity": "sha512-NqCa4Sa2d+u7BWc6CukaObG3Fh+CU9bvixbpcXYhy2VvYS7vVGIdAgnIS5Ks3A/cqk4rebLJ9s8zBstT2aKnIA==",
+      "dev": true,
+      "requires": {
+        "symbol-observable": "^1.1.0"
+      }
+    },
     "is-path-cwd": {
       "version": "1.0.0",
       "resolved": "http://registry.npm.taobao.org/is-path-cwd/download/is-path-cwd-1.0.0.tgz",
@@ -6244,6 +6647,12 @@
         "isobject": "^3.0.1"
       }
     },
+    "is-promise": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz",
+      "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=",
+      "dev": true
+    },
     "is-regex": {
       "version": "1.0.4",
       "resolved": "http://registry.npm.taobao.org/is-regex/download/is-regex-1.0.4.tgz",
@@ -6253,6 +6662,12 @@
         "has": "^1.0.1"
       }
     },
+    "is-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
+      "integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk=",
+      "dev": true
+    },
     "is-resolvable": {
       "version": "1.1.0",
       "resolved": "http://registry.npm.taobao.org/is-resolvable/download/is-resolvable-1.1.0.tgz",
@@ -6518,21 +6933,507 @@
         "invert-kv": "^2.0.0"
       }
     },
-    "load-json-file": {
-      "version": "1.1.0",
-      "resolved": "http://registry.npm.taobao.org/load-json-file/download/load-json-file-1.1.0.tgz",
-      "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
+    "lines-and-columns": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
+      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
+      "dev": true
+    },
+    "lint-staged": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-9.5.0.tgz",
+      "integrity": "sha512-nawMob9cb/G1J98nb8v3VC/E8rcX1rryUYXVZ69aT9kde6YWX+uvNOEHY5yf2gcWcTJGiD0kqXmCnS3oD75GIA==",
       "dev": true,
       "requires": {
-        "graceful-fs": "^4.1.2",
-        "parse-json": "^2.2.0",
-        "pify": "^2.0.0",
-        "pinkie-promise": "^2.0.0",
-        "strip-bom": "^2.0.0"
+        "chalk": "^2.4.2",
+        "commander": "^2.20.0",
+        "cosmiconfig": "^5.2.1",
+        "debug": "^4.1.1",
+        "dedent": "^0.7.0",
+        "del": "^5.0.0",
+        "execa": "^2.0.3",
+        "listr": "^0.14.3",
+        "log-symbols": "^3.0.0",
+        "micromatch": "^4.0.2",
+        "normalize-path": "^3.0.0",
+        "please-upgrade-node": "^3.1.1",
+        "string-argv": "^0.3.0",
+        "stringify-object": "^3.3.0"
       },
       "dependencies": {
-        "parse-json": {
-          "version": "2.2.0",
+        "@nodelib/fs.stat": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz",
+          "integrity": "sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA==",
+          "dev": true
+        },
+        "array-union": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+          "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+          "dev": true
+        },
+        "braces": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+          "dev": true,
+          "requires": {
+            "fill-range": "^7.0.1"
+          }
+        },
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true
+        },
+        "cosmiconfig": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
+          "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
+          "dev": true,
+          "requires": {
+            "import-fresh": "^2.0.0",
+            "is-directory": "^0.3.1",
+            "js-yaml": "^3.13.1",
+            "parse-json": "^4.0.0"
+          }
+        },
+        "cross-spawn": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.1.tgz",
+          "integrity": "sha512-u7v4o84SwFpD32Z8IIcPZ6z1/ie24O6RU3RbtL5Y316l3KuHVPx9ItBgWQ6VlfAFnRnTtMUrsQ9MUUTuEZjogg==",
+          "dev": true,
+          "requires": {
+            "path-key": "^3.1.0",
+            "shebang-command": "^2.0.0",
+            "which": "^2.0.1"
+          }
+        },
+        "del": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/del/-/del-5.1.0.tgz",
+          "integrity": "sha512-wH9xOVHnczo9jN2IW68BabcecVPxacIA3g/7z6vhSU/4stOKQzeCRK0yD0A24WiAAUJmmVpWqrERcTxnLo3AnA==",
+          "dev": true,
+          "requires": {
+            "globby": "^10.0.1",
+            "graceful-fs": "^4.2.2",
+            "is-glob": "^4.0.1",
+            "is-path-cwd": "^2.2.0",
+            "is-path-inside": "^3.0.1",
+            "p-map": "^3.0.0",
+            "rimraf": "^3.0.0",
+            "slash": "^3.0.0"
+          }
+        },
+        "dir-glob": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+          "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+          "dev": true,
+          "requires": {
+            "path-type": "^4.0.0"
+          }
+        },
+        "execa": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-2.1.0.tgz",
+          "integrity": "sha512-Y/URAVapfbYy2Xp/gb6A0E7iR8xeqOCXsuuaoMn7A5PzrXUK84E1gyiEfq0wQd/GHA6GsoHWwhNq8anb0mleIw==",
+          "dev": true,
+          "requires": {
+            "cross-spawn": "^7.0.0",
+            "get-stream": "^5.0.0",
+            "is-stream": "^2.0.0",
+            "merge-stream": "^2.0.0",
+            "npm-run-path": "^3.0.0",
+            "onetime": "^5.1.0",
+            "p-finally": "^2.0.0",
+            "signal-exit": "^3.0.2",
+            "strip-final-newline": "^2.0.0"
+          }
+        },
+        "fast-glob": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.1.1.tgz",
+          "integrity": "sha512-nTCREpBY8w8r+boyFYAx21iL6faSsQynliPHM4Uf56SbkyohCNxpVPEH9xrF5TXKy+IsjkPUHDKiUkzBVRXn9g==",
+          "dev": true,
+          "requires": {
+            "@nodelib/fs.stat": "^2.0.2",
+            "@nodelib/fs.walk": "^1.2.3",
+            "glob-parent": "^5.1.0",
+            "merge2": "^1.3.0",
+            "micromatch": "^4.0.2"
+          },
+          "dependencies": {
+            "merge2": {
+              "version": "1.3.0",
+              "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.3.0.tgz",
+              "integrity": "sha512-2j4DAdlBOkiSZIsaXk4mTE3sRS02yBHAtfy127xRV3bQUFqXkjHCHLW6Scv7DwNRbIWNHH8zpnz9zMaKXIdvYw==",
+              "dev": true
+            }
+          }
+        },
+        "fill-range": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+          "dev": true,
+          "requires": {
+            "to-regex-range": "^5.0.1"
+          }
+        },
+        "get-stream": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.1.0.tgz",
+          "integrity": "sha512-EXr1FOzrzTfGeL0gQdeFEvOMm2mzMOglyiOXSTpPC+iAjAKftbr3jpCMWynogwYnM+eSj9sHGc6wjIcDvYiygw==",
+          "dev": true,
+          "requires": {
+            "pump": "^3.0.0"
+          }
+        },
+        "glob-parent": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.0.tgz",
+          "integrity": "sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        },
+        "globby": {
+          "version": "10.0.2",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-10.0.2.tgz",
+          "integrity": "sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==",
+          "dev": true,
+          "requires": {
+            "@types/glob": "^7.1.1",
+            "array-union": "^2.1.0",
+            "dir-glob": "^3.0.1",
+            "fast-glob": "^3.0.3",
+            "glob": "^7.1.3",
+            "ignore": "^5.1.1",
+            "merge2": "^1.2.3",
+            "slash": "^3.0.0"
+          }
+        },
+        "graceful-fs": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
+          "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==",
+          "dev": true
+        },
+        "ignore": {
+          "version": "5.1.4",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.4.tgz",
+          "integrity": "sha512-MzbUSahkTW1u7JpKKjY7LCARd1fU5W2rLdxlM4kdkayuCwZImjkpluF9CM1aLewYJguPDqewLam18Y6AU69A8A==",
+          "dev": true
+        },
+        "is-glob": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+          "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+          "dev": true,
+          "requires": {
+            "is-extglob": "^2.1.1"
+          }
+        },
+        "is-number": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+          "dev": true
+        },
+        "is-path-cwd": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
+          "integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==",
+          "dev": true
+        },
+        "is-path-inside": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.2.tgz",
+          "integrity": "sha512-/2UGPSgmtqwo1ktx8NDHjuPwZWmHhO+gj0f93EkhLB5RgW9RZevWYYlIkS6zePc6U2WpOdQYIwHe9YC4DWEBVg==",
+          "dev": true
+        },
+        "is-stream": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
+          "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
+          "dev": true
+        },
+        "js-yaml": {
+          "version": "3.13.1",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
+          "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+          "dev": true,
+          "requires": {
+            "argparse": "^1.0.7",
+            "esprima": "^4.0.0"
+          }
+        },
+        "log-symbols": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-3.0.0.tgz",
+          "integrity": "sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2"
+          }
+        },
+        "micromatch": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
+          "integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
+          "dev": true,
+          "requires": {
+            "braces": "^3.0.1",
+            "picomatch": "^2.0.5"
+          }
+        },
+        "mimic-fn": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+          "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+          "dev": true
+        },
+        "npm-run-path": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-3.1.0.tgz",
+          "integrity": "sha512-Dbl4A/VfiVGLgQv29URL9xshU8XDY1GeLy+fsaZ1AA8JDSfjvr5P5+pzRbWqRSBxk6/DW7MIh8lTM/PaGnP2kg==",
+          "dev": true,
+          "requires": {
+            "path-key": "^3.0.0"
+          }
+        },
+        "onetime": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.0.tgz",
+          "integrity": "sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q==",
+          "dev": true,
+          "requires": {
+            "mimic-fn": "^2.1.0"
+          }
+        },
+        "p-finally": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-2.0.1.tgz",
+          "integrity": "sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==",
+          "dev": true
+        },
+        "p-map": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz",
+          "integrity": "sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==",
+          "dev": true,
+          "requires": {
+            "aggregate-error": "^3.0.0"
+          }
+        },
+        "path-key": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+          "dev": true
+        },
+        "path-type": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+          "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+          "dev": true
+        },
+        "rimraf": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.0.tgz",
+          "integrity": "sha512-NDGVxTsjqfunkds7CqsOiEnxln4Bo7Nddl3XhS4pXg5OzwkLqJ971ZVAAnB+DDLnF76N+VnDEiBHaVV8I06SUg==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        },
+        "shebang-command": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+          "dev": true,
+          "requires": {
+            "shebang-regex": "^3.0.0"
+          }
+        },
+        "shebang-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+          "dev": true
+        },
+        "slash": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+          "dev": true
+        },
+        "to-regex-range": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+          "dev": true,
+          "requires": {
+            "is-number": "^7.0.0"
+          }
+        },
+        "which": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        }
+      }
+    },
+    "listr": {
+      "version": "0.14.3",
+      "resolved": "https://registry.npmjs.org/listr/-/listr-0.14.3.tgz",
+      "integrity": "sha512-RmAl7su35BFd/xoMamRjpIE4j3v+L28o8CT5YhAXQJm1fD+1l9ngXY8JAQRJ+tFK2i5njvi0iRUKV09vPwA0iA==",
+      "dev": true,
+      "requires": {
+        "@samverschueren/stream-to-observable": "^0.3.0",
+        "is-observable": "^1.1.0",
+        "is-promise": "^2.1.0",
+        "is-stream": "^1.1.0",
+        "listr-silent-renderer": "^1.1.1",
+        "listr-update-renderer": "^0.5.0",
+        "listr-verbose-renderer": "^0.5.0",
+        "p-map": "^2.0.0",
+        "rxjs": "^6.3.3"
+      },
+      "dependencies": {
+        "p-map": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
+          "integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==",
+          "dev": true
+        }
+      }
+    },
+    "listr-silent-renderer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz",
+      "integrity": "sha1-kktaN1cVN3C/Go4/v3S4u/P5JC4=",
+      "dev": true
+    },
+    "listr-update-renderer": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/listr-update-renderer/-/listr-update-renderer-0.5.0.tgz",
+      "integrity": "sha512-tKRsZpKz8GSGqoI/+caPmfrypiaq+OQCbd+CovEC24uk1h952lVj5sC7SqyFUm+OaJ5HN/a1YLt5cit2FMNsFA==",
+      "dev": true,
+      "requires": {
+        "chalk": "^1.1.3",
+        "cli-truncate": "^0.2.1",
+        "elegant-spinner": "^1.0.1",
+        "figures": "^1.7.0",
+        "indent-string": "^3.0.0",
+        "log-symbols": "^1.0.2",
+        "log-update": "^2.3.0",
+        "strip-ansi": "^3.0.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "indent-string": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz",
+          "integrity": "sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=",
+          "dev": true
+        },
+        "log-symbols": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-1.0.2.tgz",
+          "integrity": "sha1-N2/3tY6jCGoPCfrMdGF+ylAeGhg=",
+          "dev": true,
+          "requires": {
+            "chalk": "^1.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        }
+      }
+    },
+    "listr-verbose-renderer": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/listr-verbose-renderer/-/listr-verbose-renderer-0.5.0.tgz",
+      "integrity": "sha512-04PDPqSlsqIOaaaGZ+41vq5FejI9auqTInicFRndCBgE3bXG8D6W1I+mWhk+1nqbHmyhla/6BUrd5OSiHwKRXw==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.4.1",
+        "cli-cursor": "^2.1.0",
+        "date-fns": "^1.27.2",
+        "figures": "^2.0.0"
+      },
+      "dependencies": {
+        "figures": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
+          "integrity": "sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=",
+          "dev": true,
+          "requires": {
+            "escape-string-regexp": "^1.0.5"
+          }
+        }
+      }
+    },
+    "load-json-file": {
+      "version": "1.1.0",
+      "resolved": "http://registry.npm.taobao.org/load-json-file/download/load-json-file-1.1.0.tgz",
+      "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "parse-json": "^2.2.0",
+        "pify": "^2.0.0",
+        "pinkie-promise": "^2.0.0",
+        "strip-bom": "^2.0.0"
+      },
+      "dependencies": {
+        "parse-json": {
+          "version": "2.2.0",
           "resolved": "http://registry.npm.taobao.org/parse-json/download/parse-json-2.2.0.tgz",
           "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
           "dev": true,
@@ -6666,6 +7567,44 @@
         "chalk": "^2.0.1"
       }
     },
+    "log-update": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/log-update/-/log-update-2.3.0.tgz",
+      "integrity": "sha1-iDKP19HOeTiykoN0bwsbwSayRwg=",
+      "dev": true,
+      "requires": {
+        "ansi-escapes": "^3.0.0",
+        "cli-cursor": "^2.0.0",
+        "wrap-ansi": "^3.0.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-3.0.1.tgz",
+          "integrity": "sha1-KIoE2H7aXChuBg3+jxNc6NAH+Lo=",
+          "dev": true,
+          "requires": {
+            "string-width": "^2.1.1",
+            "strip-ansi": "^4.0.0"
+          }
+        }
+      }
+    },
     "loglevel": {
       "version": "1.6.1",
       "resolved": "http://registry.npm.taobao.org/loglevel/download/loglevel-1.6.1.tgz",
@@ -6847,6 +7786,12 @@
         }
       }
     },
+    "merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true
+    },
     "merge2": {
       "version": "1.2.3",
       "resolved": "http://registry.npm.taobao.org/merge2/download/merge2-1.2.3.tgz",
@@ -7549,6 +8494,12 @@
         "mimic-fn": "^1.0.0"
       }
     },
+    "opencollective-postinstall": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz",
+      "integrity": "sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw==",
+      "dev": true
+    },
     "opener": {
       "version": "1.5.1",
       "resolved": "http://registry.npm.taobao.org/opener/download/opener-1.5.1.tgz",
@@ -7700,6 +8651,23 @@
         "no-case": "^2.2.0"
       }
     },
+    "parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "requires": {
+        "callsites": "^3.0.0"
+      },
+      "dependencies": {
+        "callsites": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+          "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+          "dev": true
+        }
+      }
+    },
     "parse-asn1": {
       "version": "5.1.4",
       "resolved": "http://registry.npm.taobao.org/parse-asn1/download/parse-asn1-5.1.4.tgz",
@@ -7812,6 +8780,12 @@
       "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
       "dev": true
     },
+    "picomatch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.1.tgz",
+      "integrity": "sha512-ISBaA8xQNmwELC7eOjqFKMESB2VIqt4PPDD0nsS95b/9dZXvVKOlz9keMSnoGGKcOHXfTvDD6WMaRoSc9UuhRA==",
+      "dev": true
+    },
     "pify": {
       "version": "3.0.0",
       "resolved": "http://registry.npm.taobao.org/pify/download/pify-3.0.0.tgz",
@@ -7842,6 +8816,15 @@
         "find-up": "^3.0.0"
       }
     },
+    "please-upgrade-node": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
+      "integrity": "sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==",
+      "dev": true,
+      "requires": {
+        "semver-compare": "^1.0.0"
+      }
+    },
     "popper.js": {
       "version": "1.14.7",
       "resolved": "http://registry.npm.taobao.org/popper.js/download/popper.js-1.14.7.tgz",
@@ -8486,9 +9469,9 @@
       }
     },
     "prettier": {
-      "version": "1.16.3",
-      "resolved": "http://registry.npm.taobao.org/prettier/download/prettier-1.16.3.tgz",
-      "integrity": "sha1-jGIWhFO63vcC80tFtu6JlXSmpl0=",
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
+      "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
       "dev": true
     },
     "pretty-error": {
@@ -9086,6 +10069,12 @@
       "integrity": "sha1-uKSCXVvbH8P29Twrwz+BOIaBx7w=",
       "dev": true
     },
+    "reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true
+    },
     "rgb-regex": {
       "version": "1.0.1",
       "resolved": "http://registry.npm.taobao.org/rgb-regex/download/rgb-regex-1.0.1.tgz",
@@ -9117,6 +10106,12 @@
         "inherits": "^2.0.1"
       }
     },
+    "run-parallel": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.9.tgz",
+      "integrity": "sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q==",
+      "dev": true
+    },
     "run-queue": {
       "version": "1.0.3",
       "resolved": "http://registry.npm.taobao.org/run-queue/download/run-queue-1.0.3.tgz",
@@ -9131,6 +10126,15 @@
       "resolved": "http://registry.npm.taobao.org/rw/download/rw-1.3.3.tgz",
       "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
     },
+    "rxjs": {
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz",
+      "integrity": "sha512-naMQXcgEo3csAEGvw/NydRA0fuS2nDZJiw1YUWFKU7aPPAPGZEsD4Iimit96qwCieH6y614MCLYwdkrWx7z/7Q==",
+      "dev": true,
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "http://registry.npm.taobao.org/safe-buffer/download/safe-buffer-5.1.2.tgz",
@@ -9361,6 +10365,12 @@
       "integrity": "sha1-fnQlb7qknHWqfHogXMInmcrIAAQ=",
       "dev": true
     },
+    "semver-compare": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
+      "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=",
+      "dev": true
+    },
     "send": {
       "version": "0.16.2",
       "resolved": "http://registry.npm.taobao.org/send/download/send-0.16.2.tgz",
@@ -9581,6 +10591,12 @@
       "integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=",
       "dev": true
     },
+    "slice-ansi": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz",
+      "integrity": "sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=",
+      "dev": true
+    },
     "snapdragon": {
       "version": "0.8.2",
       "resolved": "http://registry.npm.taobao.org/snapdragon/download/snapdragon-0.8.2.tgz",
@@ -10008,6 +11024,12 @@
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
       "dev": true
     },
+    "string-argv": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz",
+      "integrity": "sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==",
+      "dev": true
+    },
     "string-width": {
       "version": "2.1.1",
       "resolved": "http://registry.npm.taobao.org/string-width/download/string-width-2.1.1.tgz",
@@ -10066,6 +11088,17 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "stringify-object": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
+      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
+      "dev": true,
+      "requires": {
+        "get-own-enumerable-property-symbols": "^3.0.0",
+        "is-obj": "^1.0.1",
+        "is-regexp": "^1.0.0"
+      }
+    },
     "strip-ansi": {
       "version": "5.0.0",
       "resolved": "http://registry.npm.taobao.org/strip-ansi/download/strip-ansi-5.0.0.tgz",
@@ -10090,6 +11123,12 @@
       "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
       "dev": true
     },
+    "strip-final-newline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "dev": true
+    },
     "strip-indent": {
       "version": "2.0.0",
       "resolved": "http://registry.npm.taobao.org/strip-indent/download/strip-indent-2.0.0.tgz",
@@ -10397,6 +11436,12 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==",
+      "dev": true
+    },
     "tapable": {
       "version": "1.1.1",
       "resolved": "http://registry.npm.taobao.org/tapable/download/tapable-1.1.1.tgz",
@@ -11425,6 +12470,12 @@
       "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
       "dev": true
     },
+    "which-pm-runs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.0.0.tgz",
+      "integrity": "sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=",
+      "dev": true
+    },
     "wide-align": {
       "version": "1.1.3",
       "resolved": "http://registry.npm.taobao.org/wide-align/download/wide-align-1.1.3.tgz",
@@ -11529,6 +12580,32 @@
       "integrity": "sha1-tLBJ4xS+VF486AIjbWzSLNkcPek=",
       "dev": true
     },
+    "yaml": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.7.2.tgz",
+      "integrity": "sha512-qXROVp90sb83XtAoqE8bP9RwAkTTZbugRUTm5YeFCBfNRPEp2YzTeqWiz7m5OORHzEvrA/qcGS8hp/E+MMROYw==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.6.3"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.8.3",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.3.tgz",
+          "integrity": "sha512-fVHx1rzEmwB130VTkLnxR+HmxcTjGzH12LYQcFFoBwakMd3aOMD4OsRN7tGG/UOYE2ektgFrS8uACAoRk1CY0w==",
+          "dev": true,
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==",
+          "dev": true
+        }
+      }
+    },
     "yargs": {
       "version": "12.0.2",
       "resolved": "http://registry.npm.taobao.org/yargs/download/yargs-12.0.2.tgz",
diff --git a/package.json b/package.json
index 7a405f4..86ef869 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,17 @@
     "docker:run": "docker build -t rocketbot . && docker run --name rocketbot -p 8888:80 -d -e SKYWALKING_URL=localhost:1234,127.0.0.1:1235 rocketbot",
     "docker:stop": "docker stop rocketbot && docker rm rocketbot"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,vue,js}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
   "dependencies": {
     "axios": "^0.18.0",
     "d3": "^5.9.1",
@@ -32,7 +43,10 @@
     "@vue/cli-plugin-babel": "^3.4.1",
     "@vue/cli-plugin-typescript": "^3.4.1",
     "@vue/cli-service": "^3.4.1",
+    "husky": "^4.0.9",
+    "lint-staged": "^9.5.0",
     "node-sass": "^4.11.0",
+    "prettier": "^1.19.1",
     "sass-loader": "^7.1.0",
     "svg-sprite-loader": "^4.1.3",
     "typescript": "^3.0.0",
diff --git a/src/App.vue b/src/App.vue
index ac0e195..0c72b91 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,41 +1,35 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
 
 <template>
   <router-view></router-view>
 </template>
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+  import { Component, Vue } from 'vue-property-decorator';
 
-@Component
-export default class App extends Vue {
-}
+  @Component
+  export default class App extends Vue {}
 </script>
 <style>
-@import './assets/styles/reset.scss';
-@import './assets/styles/lib.scss';
-@import './assets/styles/style.scss';
-@import './assets/styles/grid.scss';
-#app,.container{
-  height: 100%;
-}
-#app{
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
+  @import './assets/styles/reset.scss';
+  @import './assets/styles/lib.scss';
+  @import './assets/styles/style.scss';
+  @import './assets/styles/grid.scss';
+  #app,
+  .container {
+    height: 100%;
+  }
+  #app {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
 </style>
diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
index 4bfac1c..353c87c 100755
--- a/src/assets/icons/index.ts
+++ b/src/assets/icons/index.ts
@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 
-const requireAll = (requireContext: any) => requireContext.keys().map(requireContext);
+const requireAll = (requireContext: any) =>
+  requireContext.keys().map(requireContext);
 const req = require.context('./', true, /\.svg$/);
 requireAll(req);
diff --git a/src/assets/lang/en.ts b/src/assets/lang/en.ts
index 96fae7d..7f1a53e 100644
--- a/src/assets/lang/en.ts
+++ b/src/assets/lang/en.ts
@@ -79,7 +79,7 @@ const m = {
   start: 'Start',
   spans: 'Spans',
   spanInfo: 'Span Info',
-  spanType:  'Span Type',
+  spanType: 'Span Type',
   time: 'Time',
   tags: 'Tags',
   logs: 'Logs',
diff --git a/src/assets/styles/grid.scss b/src/assets/styles/grid.scss
index 7a58ed6..e191437 100644
--- a/src/assets/styles/grid.scss
+++ b/src/assets/styles/grid.scss
@@ -406,4 +406,4 @@
   .g-lg-space-1 {
     margin-left: 8.333%;
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/lib.scss b/src/assets/styles/lib.scss
index 8cf895c..8841ccd 100644
--- a/src/assets/styles/lib.scss
+++ b/src/assets/styles/lib.scss
@@ -15,60 +15,169 @@
  * limitations under the License.
  */
 
-.l{float: left}
-.r{float: right}
-.n{font-weight: 400}
-.b{font-weight: 500}
-.long{width: 100%}
-.vm{vertical-align: middle;}
-.vs{vertical-align: sub;}
-.clear:after{display:table; content:''; clear:both}
-.ell{text-overflow:ellipsis; white-space:nowrap; overflow:hidden}
-.tc{text-align: center}
-.tr{text-align: right}
-.cd{cursor: default}
-.cp{cursor: pointer}
-.cm{cursor: move}
-.wba{word-break: break-all;}
-.flex-v{display: flex;flex-direction: column;}
-.flex-h{display: flex;align-items: center;}
-.trans{transition:all .3s;}
-.db{display: block;}
-.dib{display: inline-block;}
-.auto{margin-right: auto;margin-left: auto;}
-.sm{font-size: 12px}
-.green{color:#4caf50}
-.red{color:#E54C17}
-.blue{color:#448dfe}
-.purple{color:#6e40aa}
-.yellow{color:#FBB03B}
-.grey{color: #a7aebb}
-.bg-green{background-color:#4caf50}
-.bg-red{background-color:#E54C17}
-.bg-blue{background-color:#448dfe}
-.bg-purple{background-color:#6e40aa}
-.bg-yellow{background-color:#FBB03B}
-.bg-grey{background-color: #a7aebb}
-.ml-5{margin-left:5px}
-.mr-0{margin-right: 0px}
-.mr-5{margin-right:5px}
-.mr-10{margin-right:10px}
-.mr-15{margin-right: 15px}
-.mr-20{margin-right: 20px}
-.mt-0{margin-top: 0}
-.mt-5{margin-top:5px}
-.mt-10{margin-top:10px}
-.mt-15{margin-top:15px}
-.mb-0{margin-bottom:0px}
-.mb-5{margin-bottom:5px}
-.mb-10{margin-bottom:10px}
-.mb-15{margin-bottom:15px}
-.mb-20{margin-bottom:20px}
-.pt-10{padding-top: 10px}
-.pl-15{padding-left: 15px}
-.link-hover{
-  transition: color .3s;
-}
-.link-hover:hover{
+.l {
+  float: left;
+}
+.r {
+  float: right;
+}
+.n {
+  font-weight: 400;
+}
+.b {
+  font-weight: 500;
+}
+.long {
+  width: 100%;
+}
+.vm {
+  vertical-align: middle;
+}
+.vs {
+  vertical-align: sub;
+}
+.clear:after {
+  display: table;
+  content: '';
+  clear: both;
+}
+.ell {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.tc {
+  text-align: center;
+}
+.tr {
+  text-align: right;
+}
+.cd {
+  cursor: default;
+}
+.cp {
+  cursor: pointer;
+}
+.cm {
+  cursor: move;
+}
+.wba {
+  word-break: break-all;
+}
+.flex-v {
+  display: flex;
+  flex-direction: column;
+}
+.flex-h {
+  display: flex;
+  align-items: center;
+}
+.trans {
+  transition: all 0.3s;
+}
+.db {
+  display: block;
+}
+.dib {
+  display: inline-block;
+}
+.auto {
+  margin-right: auto;
+  margin-left: auto;
+}
+.sm {
+  font-size: 12px;
+}
+.green {
+  color: #4caf50;
+}
+.red {
+  color: #e54c17;
+}
+.blue {
+  color: #448dfe;
+}
+.purple {
+  color: #6e40aa;
+}
+.yellow {
+  color: #fbb03b;
+}
+.grey {
+  color: #a7aebb;
+}
+.bg-green {
+  background-color: #4caf50;
+}
+.bg-red {
+  background-color: #e54c17;
+}
+.bg-blue {
+  background-color: #448dfe;
+}
+.bg-purple {
+  background-color: #6e40aa;
+}
+.bg-yellow {
+  background-color: #fbb03b;
+}
+.bg-grey {
+  background-color: #a7aebb;
+}
+.ml-5 {
+  margin-left: 5px;
+}
+.mr-0 {
+  margin-right: 0px;
+}
+.mr-5 {
+  margin-right: 5px;
+}
+.mr-10 {
+  margin-right: 10px;
+}
+.mr-15 {
+  margin-right: 15px;
+}
+.mr-20 {
+  margin-right: 20px;
+}
+.mt-0 {
+  margin-top: 0;
+}
+.mt-5 {
+  margin-top: 5px;
+}
+.mt-10 {
+  margin-top: 10px;
+}
+.mt-15 {
+  margin-top: 15px;
+}
+.mb-0 {
+  margin-bottom: 0px;
+}
+.mb-5 {
+  margin-bottom: 5px;
+}
+.mb-10 {
+  margin-bottom: 10px;
+}
+.mb-15 {
+  margin-bottom: 15px;
+}
+.mb-20 {
+  margin-bottom: 20px;
+}
+.pt-10 {
+  padding-top: 10px;
+}
+.pl-15 {
+  padding-left: 15px;
+}
+.link-hover {
+  transition: color 0.3s;
+}
+.link-hover:hover {
   color: #448dfe;
 }
diff --git a/src/assets/styles/reset.scss b/src/assets/styles/reset.scss
index 57ff087..96ef249 100644
--- a/src/assets/styles/reset.scss
+++ b/src/assets/styles/reset.scss
@@ -15,49 +15,87 @@
  * limitations under the License.
  */
 
-body{
+body {
   margin: 0;
   line-height: 1.5;
   font-size: 13px;
   color: #3d444f;
-  font-family: "Lato","Source Han Sans CN", "Microsoft YaHei", sans-serif;
+  font-family: 'Lato', 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
   text-rendering: optimizeLegibility;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
 }
-html, body {
+html,
+body {
   height: 100%;
 }
-div,header,footer,nav,article,section,aside,label,input,textarea,select,button,ul,ol,li,h1,h2,h3,h4,h5,a,img{
+div,
+header,
+footer,
+nav,
+article,
+section,
+aside,
+label,
+input,
+textarea,
+select,
+button,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+a,
+img {
   box-sizing: border-box;
 }
-input,textarea,select,button {
+input,
+textarea,
+select,
+button {
   font-size: 100%;
   font-family: inherit;
 }
-h1{font-size: 26px;}
-h2{font-size: 24px;}
-h3{font-size: 21px;}
-h4{font-size: 18px;}
-h5{font-size: 14px;}
-h6{font-size:1em;}
-ul,ol{
-  margin:0;
-  padding-left:0;
-  list-style-type:none;
-}
-a{
-  text-decoration:none;
+h1 {
+  font-size: 26px;
+}
+h2 {
+  font-size: 24px;
+}
+h3 {
+  font-size: 21px;
+}
+h4 {
+  font-size: 18px;
+}
+h5 {
+  font-size: 14px;
+}
+h6 {
+  font-size: 1em;
+}
+ul,
+ol {
+  margin: 0;
+  padding-left: 0;
+  list-style-type: none;
+}
+a {
+  text-decoration: none;
   cursor: pointer;
   color: inherit;
-  -webkit-tap-highlight-color: transparent; 
-  -webkit-appearance: none; 
+  -webkit-tap-highlight-color: transparent;
+  -webkit-appearance: none;
 }
-hr{
+hr {
   border-width: 0;
   border-bottom: 1px solid #e0e0e0;
 }
-blockquote{
+blockquote {
   margin-left: 0;
   margin-right: 0;
   padding-left: 1.2em;
@@ -65,57 +103,57 @@ blockquote{
 }
 
 code,
-pre{
+pre {
   font-family: Consolas, Menlo, Courier, monospace;
 }
 /*webkit内核*/
 .scroll_hide::-webkit-scrollbar {
-  width:0px;
-  height:0px;
+  width: 0px;
+  height: 0px;
 }
-.scroll_hide::-webkit-scrollbar-button    {
-  background-color:rgba(0,0,0,0);
+.scroll_hide::-webkit-scrollbar-button {
+  background-color: rgba(0, 0, 0, 0);
 }
-.scroll_hide::-webkit-scrollbar-track     {
-  background-color:rgba(0,0,0,0);
+.scroll_hide::-webkit-scrollbar-track {
+  background-color: rgba(0, 0, 0, 0);
 }
 .scroll_hide::-webkit-scrollbar-track-piece {
-  background-color:rgba(0,0,0,0);
+  background-color: rgba(0, 0, 0, 0);
 }
-.scroll_hide::-webkit-scrollbar-thumb{
-  background-color:rgba(0,0,0,0);
+.scroll_hide::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0);
 }
 .scroll_hide::-webkit-scrollbar-corner {
-  background-color:rgba(0,0,0,0);
+  background-color: rgba(0, 0, 0, 0);
 }
-.scroll_hide::-webkit-scrollbar-resizer  {
-  background-color:rgba(0,0,0,0);
+.scroll_hide::-webkit-scrollbar-resizer {
+  background-color: rgba(0, 0, 0, 0);
 }
 /*o内核*/
-.scroll_hide .-o-scrollbar{
-  -moz-appearance: none !important;   
-  background: rgba(0,255,0,0) !important;  
+.scroll_hide .-o-scrollbar {
+  -moz-appearance: none !important;
+  background: rgba(0, 255, 0, 0) !important;
 }
-.scroll_hide::-o-scrollbar-button    {
-  background-color:rgba(0,0,0,0);
+.scroll_hide::-o-scrollbar-button {
+  background-color: rgba(0, 0, 0, 0);
 }
-.scroll_hide::-o-scrollbar-track     {
-  background-color:rgba(0,0,0,0);
+.scroll_hide::-o-scrollbar-track {
+  background-color: rgba(0, 0, 0, 0);
 }
 .scroll_hide::-o-scrollbar-track-piece {
-  background-color:rgba(0,0,0,0);
+  background-color: rgba(0, 0, 0, 0);
 }
-.scroll_hide::-o-scrollbar-thumb{
-  background-color:rgba(0,0,0,0);
+.scroll_hide::-o-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0);
 }
 .scroll_hide::-o-scrollbar-corner {
-  background-color:rgba(0,0,0,0);
+  background-color: rgba(0, 0, 0, 0);
 }
-.scroll_hide::-o-scrollbar-resizer  {
-  background-color:rgba(0,0,0,0);
+.scroll_hide::-o-scrollbar-resizer {
+  background-color: rgba(0, 0, 0, 0);
 }
 /*IE10,IE11,IE12*/
-.scroll_hide{
+.scroll_hide {
   -ms-scroll-chaining: chained;
   -ms-overflow-style: none;
   -ms-content-zooming: zoom;
@@ -125,4 +163,4 @@ pre{
   -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
   -ms-overflow-style: none;
   overflow: auto;
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/style.scss b/src/assets/styles/style.scss
index 6b42c03..b17d68a 100644
--- a/src/assets/styles/style.scss
+++ b/src/assets/styles/style.scss
@@ -14,35 +14,39 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.fade-enter-active, .fade-leave-active {
-  transition: opacity .3s ease;
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
 }
-.fade-enter, .fade-leave-to {
+.fade-enter,
+.fade-leave-to {
   opacity: 0;
 }
 
-.d3-tip,.d3-tip-grey {
+.d3-tip,
+.d3-tip-grey {
   line-height: 1;
   padding: 8px;
   color: #eee;
   border-radius: 4px;
   font-size: 12px;
 }
-.d3-tip{
+.d3-tip {
   background: #252a2f;
 }
-.d3-tip-grey{
+.d3-tip-grey {
   background: #252a2fcc;
 }
 
-.d3-tip-grey:after,.d3-tip:after {
+.d3-tip-grey:after,
+.d3-tip:after {
   box-sizing: border-box;
   display: block;
   font-size: 10px;
   width: 100%;
   line-height: 0.8;
   color: #252a2f;
-  content: "\25BC";
+  content: '\25BC';
   position: absolute;
   text-align: center;
 }
@@ -51,25 +55,26 @@
   color: #252a2fcc;
 }
 
-.d3-tip-grey.n:after,.d3-tip.n:after {
+.d3-tip-grey.n:after,
+.d3-tip.n:after {
   margin: -2px 0 0 0;
   top: 100%;
   left: 0;
 }
 @keyframes loading {
   0% {
-      -webkit-transform: rotate(0deg);
-      transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
   }
   to {
-      -webkit-transform: rotate(1turn);
-      transform: rotate(1turn);
+    -webkit-transform: rotate(1turn);
+    transform: rotate(1turn);
   }
 }
 
 .oa {
   overflow: hidden;
 }
-.oa:hover{
+.oa:hover {
   overflow: auto;
-}
\ No newline at end of file
+}
diff --git a/src/components/icon.html b/src/components/icon.html
index d3f99f6..525e323 100644
--- a/src/components/icon.html
+++ b/src/components/icon.html
@@ -13,1851 +13,1913 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 
-<!doctype html>
+<!DOCTYPE html>
 <html>
-
-<head>
+  <head>
     <title>IcoMoon - SVG Icons</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style>
-        .icon {
-            display: inline-block;
-            width: 1em;
-            height: 1em;
-            stroke-width: 0;
-            stroke: currentColor;
-            fill: currentColor;
-        }
+      .icon {
+        display: inline-block;
+        width: 1em;
+        height: 1em;
+        stroke-width: 0;
+        stroke: currentColor;
+        fill: currentColor;
+      }
 
-        body {
-            padding: 0;
-            margin: 0;
-            font-family: sans-serif;
-            font-size: 1em;
-            line-height: 1.5;
-            color: #555;
-            background: #fff;
-        }
+      body {
+        padding: 0;
+        margin: 0;
+        font-family: sans-serif;
+        font-size: 1em;
+        line-height: 1.5;
+        color: #555;
+        background: #fff;
+      }
 
-        h1 {
-            font-size: 1.5em;
-            font-weight: normal;
-            box-shadow: 0 1px #ddd, 0 2px #fff, 0 3px #ddd;
-        }
+      h1 {
+        font-size: 1.5em;
+        font-weight: normal;
+        box-shadow: 0 1px #ddd, 0 2px #fff, 0 3px #ddd;
+      }
 
-        small {
-            font-size: .66666667em;
-        }
+      small {
+        font-size: 0.66666667em;
+      }
 
-        a {
-            color: #e74c3c;
-            text-decoration: none;
-        }
+      a {
+        color: #e74c3c;
+        text-decoration: none;
+      }
 
-        a:hover,
-        a:focus {
-            box-shadow: 0 1px #e74c3c;
-        }
+      a:hover,
+      a:focus {
+        box-shadow: 0 1px #e74c3c;
+      }
 
-        .bshadow0,
-        input {
-            box-shadow: inset 0 -2px #e7e7e7;
-        }
+      .bshadow0,
+      input {
+        box-shadow: inset 0 -2px #e7e7e7;
+      }
 
-        input:hover {
-            box-shadow: inset 0 -2px #ccc;
-        }
+      input:hover {
+        box-shadow: inset 0 -2px #ccc;
+      }
 
-        input,
-        fieldset {
-            font-size: 1em;
-            margin: 0;
-            padding: 0;
-            border: 0;
-        }
+      input,
+      fieldset {
+        font-size: 1em;
+        margin: 0;
+        padding: 0;
+        border: 0;
+      }
 
-        input {
-            color: inherit;
-            line-height: 1.5;
-            height: 1.5em;
-            padding: .25em 0;
-        }
+      input {
+        color: inherit;
+        line-height: 1.5;
+        height: 1.5em;
+        padding: 0.25em 0;
+      }
 
-        input:focus {
-            outline: none;
-            box-shadow: inset 0 -2px #449fdb;
-        }
+      input:focus {
+        outline: none;
+        box-shadow: inset 0 -2px #449fdb;
+      }
 
-        .glyph {
-            font-size: 16px;
-            margin-right: 1.5em;
-            float: left;
-            width: 12em;
-        }
+      .glyph {
+        font-size: 16px;
+        margin-right: 1.5em;
+        float: left;
+        width: 12em;
+      }
 
-        svg {
-            color: #000;
-        }
+      svg {
+        color: #000;
+      }
 
-        .liga {
-            width: 80%;
-            width: calc(100% - 2.5em);
-        }
+      .liga {
+        width: 80%;
+        width: calc(100% - 2.5em);
+      }
 
-        .talign-right {
-            text-align: right;
-        }
+      .talign-right {
+        text-align: right;
+      }
 
-        .talign-center {
-            text-align: center;
-        }
+      .talign-center {
+        text-align: center;
+      }
 
-        .bgc1 {
-            background: #f1f1f1;
-        }
+      .bgc1 {
+        background: #f1f1f1;
+      }
 
-        .fgc0 {
-            color: #000;
-        }
+      .fgc0 {
+        color: #000;
+      }
 
-        .fgc1 {
-            color: #999;
-        }
+      .fgc1 {
+        color: #999;
+      }
 
-        p {
-            margin-top: 1em;
-            margin-bottom: 1em;
-        }
+      p {
+        margin-top: 1em;
+        margin-bottom: 1em;
+      }
 
-        .mvm {
-            margin-top: .75em;
-            margin-bottom: .75em;
-        }
+      .mvm {
+        margin-top: 0.75em;
+        margin-bottom: 0.75em;
+      }
 
-        .mtn {
-            margin-top: 0;
-        }
+      .mtn {
+        margin-top: 0;
+      }
 
-        .mtl,
-        .mal {
-            margin-top: 1.5em;
-        }
+      .mtl,
+      .mal {
+        margin-top: 1.5em;
+      }
 
-        .mbl,
-        .mal {
-            margin-bottom: 1.5em;
-        }
+      .mbl,
+      .mal {
+        margin-bottom: 1.5em;
+      }
 
-        .mal,
-        .mhl {
-            margin-left: 1.5em;
-            margin-right: 1.5em;
-        }
+      .mal,
+      .mhl {
+        margin-left: 1.5em;
+        margin-right: 1.5em;
+      }
 
-        .mhmm {
-            margin-left: 1em;
-            margin-right: 1em;
-        }
+      .mhmm {
+        margin-left: 1em;
+        margin-right: 1em;
+      }
 
-        .ptl {
-            padding-top: 1.5em;
-        }
+      .ptl {
+        padding-top: 1.5em;
+      }
 
-        .pbs,
-        .pvs {
-            padding-bottom: .25em;
-        }
+      .pbs,
+      .pvs {
+        padding-bottom: 0.25em;
+      }
 
-        .pvs,
-        .pts {
-            padding-top: .25em;
-        }
+      .pvs,
+      .pts {
+        padding-top: 0.25em;
+      }
 
-        .unit {
-            float: left;
-        }
+      .unit {
+        float: left;
+      }
 
-        .unitRight {
-            float: right;
-        }
+      .unitRight {
+        float: right;
+      }
 
-        .size1of2 {
-            width: 50%;
-        }
+      .size1of2 {
+        width: 50%;
+      }
 
-        .size1of1 {
-            width: 100%;
-        }
+      .size1of1 {
+        width: 100%;
+      }
 
-        .clearfix:before,
-        .clearfix:after {
-            content: " ";
-            display: table;
-        }
+      .clearfix:before,
+      .clearfix:after {
+        content: ' ';
+        display: table;
+      }
 
-        .clearfix:after {
-            clear: both;
-        }
+      .clearfix:after {
+        clear: both;
+      }
 
-        .hidden-true {
-            display: none;
-        }
+      .hidden-true {
+        display: none;
+      }
 
-        .textbox0 {
-            width: 3em;
-            background: #f1f1f1;
-            padding: .25em .5em;
-            line-height: 1.5;
-            height: 1.5em;
-        }
+      .textbox0 {
+        width: 3em;
+        background: #f1f1f1;
+        padding: 0.25em 0.5em;
+        line-height: 1.5;
+        height: 1.5em;
+      }
 
-        .fs0 {
-            font-size: 16px;
-        }
+      .fs0 {
+        font-size: 16px;
+      }
 
-        .fs1 {
-            font-size: 24px;
-        }
+      .fs1 {
+        font-size: 24px;
+      }
 
-        .name {
-            font-size: 0.5em;
-            margin-left: 1em;
-        }
+      .name {
+        font-size: 0.5em;
+        margin-left: 1em;
+      }
     </style>
-</head>
+  </head>
 
-<body>
-    <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1"
-        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <defs>
-            <symbol id="icon-error" viewBox="0 0 24 24">
-                <title>error</title>
-                <path
-                    d="M12.984 12.984v-6h-1.969v6h1.969zM12.984 17.016v-2.016h-1.969v2.016h1.969zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z">
-                </path>
-            </symbol>
-            <symbol id="icon-error_outline" viewBox="0 0 24 24">
-                <title>error_outline</title>
-                <path
-                    d="M12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93zM11.016 6.984h1.969v6h-1.969v-6zM11.016 15h1.969v2.016h-1.969v-2.016z">
-                </path>
-            </symbol>
-            <symbol id="icon-warningreport_problem" viewBox="0 0 24 24">
-                <title>warningreport_problem</title>
-                <path
-                    d="M12.984 14.016v-4.031h-1.969v4.031h1.969zM12.984 18v-2.016h-1.969v2.016h1.969zM0.984 21l11.016-18.984 11.016 18.984h-22.031z">
-                </path>
-            </symbol>
-            <symbol id="icon-notification_important" viewBox="0 0 24 24">
-                <title>notification_important</title>
-                <path
-                    d="M12 21.984q-0.844 0-1.43-0.563t-0.586-1.406h4.031q0 0.797-0.609 1.383t-1.406 0.586zM12.984 12v-3.984h-1.969v3.984h1.969zM12.984 15.984v-1.969h-1.969v1.969h1.969zM18 15.984l2.016 2.016v0.984h-16.031v-0.984l2.016-2.016v-4.969q0-2.344 1.195-4.078t3.305-2.25v-0.703q0-0.609 0.422-1.055t1.078-0.445 1.078 0.445 0.422 1.055v0.703q2.109 0.516 3.305 2.25t1.195 4.078v4.969z">
-                </path>
-            </symbol>
-            <symbol id="icon-av_timer" viewBox="0 0 24 24">
-                <title>av_timer</title>
-                <path
-                    d="M6 12q0-0.422 0.281-0.703t0.703-0.281 0.727 0.281 0.305 0.703-0.305 0.703-0.727 0.281-0.703-0.281-0.281-0.703zM18 12q0 0.422-0.281 0.703t-0.703 0.281-0.727-0.281-0.305-0.703 0.305-0.703 0.727-0.281 0.703 0.281 0.281 0.703zM11.016 3h0.984q3.75 0 6.375 2.625t2.625 6.375-2.625 6.375-6.375 2.625-6.375-2.625-2.625-6.375q0-4.5 3.609-7.172v-0.047l6.797 6.797-1.406 1.406-5.438-5.391q-1.547 1.922-1.547 4.406 0 2.906 2.039 4.945t4.945 2.039 4.945-2.039 2.039-4.945q0-2.625-1. [...]
-                </path>
-            </symbol>
-            <symbol id="icon-equalizer" viewBox="0 0 24 24">
-                <title>equalizer</title>
-                <path
-                    d="M15.984 9h4.031v11.016h-4.031v-11.016zM3.984 20.016v-8.016h4.031v8.016h-4.031zM9.984 20.016v-16.031h4.031v16.031h-4.031z">
-                </path>
-            </symbol>
-            <symbol id="icon-loopsync" viewBox="0 0 24 24">
-                <title>loopsync</title>
-                <path
-                    d="M12 18v-3l3.984 3.984-3.984 4.031v-3q-3.281 0-5.648-2.367t-2.367-5.648q0-2.344 1.266-4.266l1.453 1.453q-0.703 1.266-0.703 2.813 0 2.484 1.758 4.242t4.242 1.758zM12 3.984q3.281 0 5.648 2.367t2.367 5.648q0 2.344-1.266 4.266l-1.453-1.453q0.703-1.266 0.703-2.813 0-2.484-1.758-4.242t-4.242-1.758v3l-3.984-3.984 3.984-4.031v3z">
-                </path>
-            </symbol>
-            <symbol id="icon-library_addqueueadd_to_photos" viewBox="0 0 24 24">
-                <title>library_addqueueadd_to_photos</title>
-                <path
-                    d="M18.984 11.016v-2.016h-3.984v-3.984h-2.016v3.984h-3.984v2.016h3.984v3.984h2.016v-3.984h3.984zM20.016 2.016q0.797 0 1.383 0.586t0.586 1.383v12q0 0.797-0.586 1.406t-1.383 0.609h-12q-0.797 0-1.406-0.609t-0.609-1.406v-12q0-0.797 0.609-1.383t1.406-0.586h12zM3.984 6v14.016h14.016v1.969h-14.016q-0.797 0-1.383-0.586t-0.586-1.383v-14.016h1.969z">
-                </path>
-            </symbol>
-            <symbol id="icon-library_books" viewBox="0 0 24 24">
-                <title>library_books</title>
-                <path
-                    d="M18.984 6.984v-1.969h-9.984v1.969h9.984zM15 15v-2.016h-6v2.016h6zM18.984 11.016v-2.016h-9.984v2.016h9.984zM20.016 2.016q0.797 0 1.383 0.586t0.586 1.383v12q0 0.797-0.586 1.406t-1.383 0.609h-12q-0.797 0-1.406-0.609t-0.609-1.406v-12q0-0.797 0.609-1.383t1.406-0.586h12zM3.984 6v14.016h14.016v1.969h-14.016q-0.797 0-1.383-0.586t-0.586-1.383v-14.016h1.969z">
-                </path>
-            </symbol>
-            <symbol id="icon-not_interesteddo_not_disturb" viewBox="0 0 24 24">
-                <title>not_interesteddo_not_disturb</title>
-                <path
-                    d="M18.328 16.922q1.688-2.109 1.688-4.922 0-3.281-2.367-5.648t-5.648-2.367q-1.125 0-2.578 0.492t-2.344 1.195zM12 20.016q1.125 0 2.578-0.492t2.344-1.195l-11.25-11.25q-1.688 2.109-1.688 4.922 0 3.281 2.367 5.648t5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z">
-                </path>
-            </symbol>
-            <symbol id="icon-playlist_add" viewBox="0 0 24 24">
-                <title>playlist_add</title>
-                <path
-                    d="M2.016 15.984v-1.969h7.969v1.969h-7.969zM18 14.016h3.984v1.969h-3.984v4.031h-2.016v-4.031h-3.984v-1.969h3.984v-4.031h2.016v4.031zM14.016 6v2.016h-12v-2.016h12zM14.016 9.984v2.016h-12v-2.016h12z">
-                </path>
-            </symbol>
-            <symbol id="icon-repeat" viewBox="0 0 24 24">
-                <title>repeat</title>
-                <path
-                    d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031h-1.969v-6h12v-3l3.984 3.984-3.984 3.984v-3h-10.031z">
-                </path>
-            </symbol>
-            <symbol id="icon-replay" viewBox="0 0 24 24">
-                <title>replay</title>
-                <path
-                    d="M12 5.016q3.328 0 5.672 2.344t2.344 5.625q0 3.328-2.367 5.672t-5.648 2.344-5.648-2.344-2.367-5.672h2.016q0 2.484 1.758 4.242t4.242 1.758 4.242-1.758 1.758-4.242-1.758-4.242-4.242-1.758v4.031l-5.016-5.016 5.016-5.016v4.031z">
-                </path>
-            </symbol>
-            <symbol id="icon-slow_motion_video" viewBox="0 0 24 24">
-                <title>slow_motion_video</title>
-                <path
-                    d="M21.984 12q0 3.844-2.578 6.703t-6.375 3.234v-2.016q2.953-0.375 4.969-2.648t2.016-5.273-2.016-5.273-4.969-2.648v-2.016q3.797 0.375 6.375 3.234t2.578 6.703zM5.672 19.734l1.406-1.406q1.688 1.313 3.938 1.594v2.016q-1.266-0.141-2.836-0.797t-2.508-1.406zM4.078 12.984q0.234 2.203 1.594 3.891l-1.406 1.453q-1.922-2.391-2.203-5.344h2.016zM5.672 7.078q-1.313 1.734-1.594 3.938h-2.016q0.141-1.266 0.797-2.836t1.406-2.508zM11.016 4.078q-2.25 0.281-3.938 1.594l-1.406-1.406q2.391-1 [...]
-                </path>
-            </symbol>
-            <symbol id="icon-import_export" viewBox="0 0 24 24">
-                <title>import_export</title>
-                <path
-                    d="M15.984 17.016h3l-3.984 3.984-3.984-3.984h3v-7.031h1.969v7.031zM9 3l3.984 3.984h-3v7.031h-1.969v-7.031h-3z">
-                </path>
-            </symbol>
-            <symbol id="icon-location_onplaceroom" viewBox="0 0 24 24">
-                <title>location_onplaceroom</title>
-                <path
-                    d="M12 11.484q1.031 0 1.758-0.727t0.727-1.758-0.727-1.758-1.758-0.727-1.758 0.727-0.727 1.758 0.727 1.758 1.758 0.727zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z">
-                </path>
-            </symbol>
-            <symbol id="icon-vpn_key" viewBox="0 0 24 24">
-                <title>vpn_key</title>
-                <path
-                    d="M6.984 14.016q0.797 0 1.406-0.609t0.609-1.406-0.609-1.406-1.406-0.609-1.383 0.609-0.586 1.406 0.586 1.406 1.383 0.609zM12.656 9.984h10.359v4.031h-2.016v3.984h-3.984v-3.984h-4.359q-0.609 1.641-2.273 2.813t-3.398 1.172q-2.484 0-4.242-1.758t-1.758-4.242 1.758-4.242 4.242-1.758q1.734 0 3.398 1.172t2.273 2.813z">
-                </path>
-            </symbol>
-            <symbol id="icon-import_contacts" viewBox="0 0 24 24">
-                <title>import_contacts</title>
-                <path
-                    d="M21 18.516v-11.531q-1.547-0.469-3.516-0.469-3.047 0-5.484 1.5v11.484q2.438-1.5 5.484-1.5 1.828 0 3.516 0.516zM17.484 4.5q3.563 0 5.531 1.5v14.578q0 0.188-0.164 0.352t-0.352 0.164q-0.141 0-0.234-0.047-1.922-1.031-4.781-1.031-3.047 0-5.484 1.5-2.016-1.5-5.484-1.5-2.531 0-4.781 1.078-0.047 0-0.117 0.023t-0.117 0.023q-0.188 0-0.352-0.141t-0.164-0.328v-14.672q2.016-1.5 5.531-1.5 3.469 0 5.484 1.5 2.016-1.5 5.484-1.5z">
-                </path>
-            </symbol>
-            <symbol id="icon-mail_outline" viewBox="0 0 24 24">
-                <title>mail_outline</title>
-                <path
-                    d="M12 11.016l8.016-5.016h-16.031zM20.016 18v-9.984l-8.016 4.969-8.016-4.969v9.984h16.031zM20.016 3.984q0.797 0 1.383 0.609t0.586 1.406v12q0 0.797-0.586 1.406t-1.383 0.609h-16.031q-0.797 0-1.383-0.609t-0.586-1.406v-12q0-0.797 0.586-1.406t1.383-0.609h16.031z">
-                </path>
-            </symbol>
-            <symbol id="icon-sentiment_satisfied_alt" viewBox="0 0 24 24">
-                <title>sentiment_satisfied_alt</title>
-                <path
-                    d="M12 17.484q-1.734 0-3.117-0.961t-1.992-2.508h1.641q1.172 1.969 3.469 1.969t3.469-1.969h1.641q-0.609 1.547-1.992 2.508t-3.117 0.961zM12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93zM8.484 11.016q-0.609 0-1.055-0.445t-0.445-1.055 0.445-1.055 1.055-0.445 1.055 0.445 0.445 1.055-0.445 1.055-1.055 0.4 [...]
-                </path>
-            </symbol>
-            <symbol id="icon-lightbulb" viewBox="0 0 24 24">
-                <title>lightbulb</title>
-                <path
-                    d="M12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 3.516-3 5.719v2.297q0 0.422-0.281 0.703t-0.703 0.281h-6q-0.422 0-0.703-0.281t-0.281-0.703v-2.297q-3-2.063-3-5.719 0-2.906 2.039-4.945t4.945-2.039zM9 21v-0.984h6v0.984q0 0.422-0.281 0.703t-0.703 0.281h-4.031q-0.422 0-0.703-0.281t-0.281-0.703z">
-                </path>
-            </symbol>
-            <symbol id="icon-add" viewBox="0 0 24 24">
-                <title>add</title>
-                <path d="M18.984 12.984h-6v6h-1.969v-6h-6v-1.969h6v-6h1.969v6h6v1.969z"></path>
-            </symbol>
-            <symbol id="icon-add_box" viewBox="0 0 24 24">
-                <title>add_box</title>
-                <path
-                    d="M17.016 12.984v-1.969h-4.031v-4.031h-1.969v4.031h-4.031v1.969h4.031v4.031h1.969v-4.031h4.031zM18.984 3q0.797 0 1.406 0.609t0.609 1.406v13.969q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.844 0-1.43-0.586t-0.586-1.43v-13.969q0-0.844 0.586-1.43t1.43-0.586h13.969z">
-                </path>
-            </symbol>
-            <symbol id="icon-add_circle" viewBox="0 0 24 24">
-                <title>add_circle</title>
-                <path
-                    d="M17.016 12.984v-1.969h-4.031v-4.031h-1.969v4.031h-4.031v1.969h4.031v4.031h1.969v-4.031h4.031zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z">
-                </path>
-            </symbol>
-            <symbol id="icon-add_circle_outlinecontrol_point" viewBox="0 0 24 24">
-                <title>add_circle_outlinecontrol_point</title>
-                <path
-                    d="M12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93zM12.984 6.984v4.031h4.031v1.969h-4.031v4.031h-1.969v-4.031h-4.031v-1.969h4.031v-4.031h1.969z">
-                </path>
-            </symbol>
-            <symbol id="icon-backspace" viewBox="0 0 24 24">
-                <title>backspace</title>
-                <path
-                    d="M18.984 15.609l-3.563-3.609 3.563-3.609-1.406-1.406-3.563 3.609-3.609-3.609-1.406 1.406 3.609 3.609-3.609 3.609 1.406 1.406 3.609-3.609 3.563 3.609zM21.984 3q0.797 0 1.406 0.609t0.609 1.406v13.969q0 0.797-0.609 1.406t-1.406 0.609h-15q-0.938 0-1.594-0.891l-5.391-8.109 5.391-8.109q0.656-0.891 1.594-0.891h15z">
-                </path>
-            </symbol>
-            <symbol id="icon-clearclose" viewBox="0 0 24 24">
-                <title>clearclose</title>
-                <path
-                    d="M18.984 6.422l-5.578 5.578 5.578 5.578-1.406 1.406-5.578-5.578-5.578 5.578-1.406-1.406 5.578-5.578-5.578-5.578 1.406-1.406 5.578 5.578 5.578-5.578z">
-                </path>
-            </symbol>
-            <symbol id="icon-content_copy" viewBox="0 0 24 24">
-                <title>content_copy</title>
-                <path
-                    d="M18.984 21v-14.016h-10.969v14.016h10.969zM18.984 5.016q0.797 0 1.406 0.586t0.609 1.383v14.016q0 0.797-0.609 1.406t-1.406 0.609h-10.969q-0.797 0-1.406-0.609t-0.609-1.406v-14.016q0-0.797 0.609-1.383t1.406-0.586h10.969zM15.984 0.984v2.016h-12v14.016h-1.969v-14.016q0-0.797 0.586-1.406t1.383-0.609h12z">
-                </path>
-            </symbol>
-            <symbol id="icon-content_cut" viewBox="0 0 24 24">
-                <title>content_cut</title>
-                <path
-                    d="M18.984 3h3v0.984l-6.984 7.031-2.016-2.016zM12 12.516q0.516 0 0.516-0.516t-0.516-0.516-0.516 0.516 0.516 0.516zM6 20.016q0.797 0 1.406-0.586t0.609-1.43-0.609-1.43-1.406-0.586-1.406 0.586-0.609 1.43 0.609 1.43 1.406 0.586zM6 8.016q0.797 0 1.406-0.586t0.609-1.43-0.609-1.43-1.406-0.586-1.406 0.586-0.609 1.43 0.609 1.43 1.406 0.586zM9.656 7.641l12.328 12.375v0.984h-3l-6.984-6.984-2.344 2.344q0.328 0.703 0.328 1.641 0 1.641-1.172 2.813t-2.813 1.172-2.813-1.172-1.172-2.8 [...]
-                </path>
-            </symbol>
-            <symbol id="icon-content_paste" viewBox="0 0 24 24">
-                <title>content_paste</title>
-                <path
-                    d="M18.984 20.016v-16.031h-1.969v3h-10.031v-3h-1.969v16.031h13.969zM12 2.016q-0.422 0-0.703 0.281t-0.281 0.703 0.281 0.703 0.703 0.281 0.703-0.281 0.281-0.703-0.281-0.703-0.703-0.281zM18.984 2.016q0.797 0 1.406 0.586t0.609 1.383v16.031q0 0.797-0.609 1.383t-1.406 0.586h-13.969q-0.797 0-1.406-0.586t-0.609-1.383v-16.031q0-0.797 0.609-1.383t1.406-0.586h4.172q0.328-0.891 1.078-1.453t1.734-0.563 1.734 0.563 1.078 1.453h4.172z">
-                </path>
-            </symbol>
-            <symbol id="icon-createmode_editedit" viewBox="0 0 24 24">
-                <title>createmode_editedit</title>
-                <path
-                    d="M20.719 7.031l-1.828 1.828-3.75-3.75 1.828-1.828q0.281-0.281 0.703-0.281t0.703 0.281l2.344 2.344q0.281 0.281 0.281 0.703t-0.281 0.703zM3 17.25l11.063-11.063 3.75 3.75-11.063 11.063h-3.75v-3.75z">
-                </path>
-            </symbol>
-            <symbol id="icon-inbox" viewBox="0 0 24 24">
-                <title>inbox</title>
-                <path
-                    d="M18.984 15v-9.984h-14.016v9.984h4.031q0 1.219 0.891 2.109t2.109 0.891 2.109-0.891 0.891-2.109h3.984zM18.984 3q0.844 0 1.43 0.586t0.586 1.43v13.969q0 0.797-0.609 1.406t-1.406 0.609h-14.016q-0.844 0-1.406-0.586t-0.563-1.43v-13.969q0-0.844 0.563-1.43t1.406-0.586h14.016z">
-                </path>
-            </symbol>
-            <symbol id="icon-linkinsert_link" viewBox="0 0 24 24">
-                <title>linkinsert_link</title>
-                <path
-                    d="M17.016 6.984q2.063 0 3.516 1.477t1.453 3.539-1.453 3.539-3.516 1.477h-4.031v-1.922h4.031q1.266 0 2.18-0.914t0.914-2.18-0.914-2.18-2.18-0.914h-4.031v-1.922h4.031zM8.016 12.984v-1.969h7.969v1.969h-7.969zM3.891 12q0 1.266 0.914 2.18t2.18 0.914h4.031v1.922h-4.031q-2.063 0-3.516-1.477t-1.453-3.539 1.453-3.539 3.516-1.477h4.031v1.922h-4.031q-1.266 0-2.18 0.914t-0.914 2.18z">
-                </path>
-            </symbol>
-            <symbol id="icon-redo" viewBox="0 0 24 24">
-                <title>redo</title>
-                <path
-                    d="M18.422 10.594l3.563-3.609v9h-9l3.656-3.609q-2.25-1.875-5.156-1.875-2.391 0-4.617 1.594t-2.977 3.891l-2.344-0.75q1.031-3.188 3.773-5.203t6.164-2.016q3.984 0 6.938 2.578z">
-                </path>
-            </symbol>
-            <symbol id="icon-remove" viewBox="0 0 24 24">
-                <title>remove</title>
-                <path d="M18.984 12.984h-13.969v-1.969h13.969v1.969z"></path>
-            </symbol>
-            <symbol id="icon-remove_circledo_not_disturb_on" viewBox="0 0 24 24">
-                <title>remove_circledo_not_disturb_on</title>
-                <path
-                    d="M17.016 12.984v-1.969h-10.031v1.969h10.031zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z">
-                </path>
-            </symbol>
-            <symbol id="icon-remove_circle_outline" viewBox="0 0 24 24">
-                <title>remove_circle_outline</title>
-                <path
-                    d="M12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93zM6.984 11.016h10.031v1.969h-10.031v-1.969z">
-                </path>
-            </symbol>
-            <symbol id="icon-reply" viewBox="0 0 24 24">
-                <title>reply</title>
-                <path
-                    d="M9.984 9q4.875 0.703 7.523 3.727t3.492 7.289q-3.609-5.109-11.016-5.109v4.078l-6.984-6.984 6.984-6.984v3.984z">
-                </path>
-            </symbol>
-            <symbol id="icon-reply_all" viewBox="0 0 24 24">
-                <title>reply_all</title>
-                <path
-                    d="M12.984 9q4.875 0.703 7.523 3.727t3.492 7.289q-3.609-5.109-11.016-5.109v4.078l-6.984-6.984 6.984-6.984v3.984zM6.984 8.016l-3.984 3.984 3.984 3.984v3l-6.984-6.984 6.984-6.984v3z">
-                </path>
-            </symbol>
-            <symbol id="icon-report" viewBox="0 0 24 24">
-                <title>report</title>
-                <path
-                    d="M12.984 12.984v-6h-1.969v6h1.969zM12 17.297q0.516 0 0.914-0.398t0.398-0.914-0.398-0.891-0.914-0.375-0.914 0.375-0.398 0.891 0.398 0.914 0.914 0.398zM15.75 3l5.25 5.25v7.5l-5.25 5.25h-7.5l-5.25-5.25v-7.5l5.25-5.25h7.5z">
-                </path>
-            </symbol>
-            <symbol id="icon-save" viewBox="0 0 24 24">
-                <title>save</title>
-                <path
-                    d="M15 9v-3.984h-9.984v3.984h9.984zM12 18.984q1.219 0 2.109-0.891t0.891-2.109-0.891-2.109-2.109-0.891-2.109 0.891-0.891 2.109 0.891 2.109 2.109 0.891zM17.016 3l3.984 3.984v12q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.844 0-1.43-0.586t-0.586-1.43v-13.969q0-0.844 0.586-1.43t1.43-0.586h12z">
-                </path>
-            </symbol>
-            <symbol id="icon-link_off" viewBox="0 0 24 24">
-                <title>link_off</title>
-                <path
-                    d="M2.016 4.266l1.266-1.266 16.734 16.734-1.266 1.266-4.031-3.984h-1.734v-1.734l-2.25-2.297h-2.719v-1.969h0.703l-2.063-2.063q-1.172 0.141-1.969 1.008t-0.797 2.039q0 1.266 0.914 2.18t2.18 0.914h4.031v1.922h-4.031q-2.063 0-3.516-1.477t-1.453-3.539q0-1.406 0.891-2.766t2.203-1.875zM15.984 11.016v1.969h-0.188l-1.969-1.969h2.156zM17.016 6.984q2.063 0 3.516 1.477t1.453 3.539q0 3.047-2.719 4.453l-1.453-1.453q0.984-0.234 1.641-1.078t0.656-1.922q0-1.266-0.914-2.18t-2.18-0.914h- [...]
-                </path>
-            </symbol>
-            <symbol id="icon-save_alt" viewBox="0 0 24 24">
-                <title>save_alt</title>
-                <path
-                    d="M12.984 12.656l2.625-2.578 1.406 1.406-5.016 5.016-5.016-5.016 1.406-1.406 2.625 2.578v-9.656h1.969v9.656zM18.984 12h2.016v6.984q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-6.984h2.016v6.984h13.969v-6.984z">
-                </path>
-            </symbol>
-            <symbol id="icon-add_link" viewBox="0 0 24 24">
-                <title>add_link</title>
-                <path
-                    d="M18.984 12v3h3v2.016h-3v3h-1.969v-3h-3v-2.016h3v-3h1.969zM3.891 12q0 1.266 0.914 2.18t2.18 0.914h4.031v1.922h-4.031q-2.063 0-3.516-1.477t-1.453-3.539 1.453-3.539 3.516-1.477h4.031v1.922h-4.031q-1.266 0-2.18 0.914t-0.914 2.18zM20.109 12q0-1.266-0.914-2.18t-2.18-0.914h-4.031v-1.922h4.031q2.063 0 3.516 1.477t1.453 3.539h-1.875zM8.016 11.016h7.969v1.969h-7.969v-1.969z">
-                </path>
-            </symbol>
-            <symbol id="icon-access_timequery_builderschedule" viewBox="0 0 24 24">
-                <title>access_timequery_builderschedule</title>
-                <path
-                    d="M12.516 6.984v5.25l4.5 2.672-0.75 1.266-5.25-3.188v-6h1.5zM12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z">
-                </path>
-            </symbol>
-            <symbol id="icon-data_usage" viewBox="0 0 24 24">
-                <title>data_usage</title>
-                <path
-                    d="M12 18.984q1.359 0 2.953-0.773t2.484-1.852l2.625 1.547q-3 4.078-8.063 4.078-4.125 0-7.055-2.93t-2.93-7.055q0-3.891 2.602-6.727t6.398-3.211v3q-2.531 0.375-4.266 2.344t-1.734 4.594q0 2.906 2.039 4.945t4.945 2.039zM12.984 2.063q3.797 0.375 6.398 3.211t2.602 6.727q0 2.25-0.844 4.078l-2.625-1.547q0.469-1.313 0.469-2.531 0-2.625-1.734-4.594t-4.266-2.344v-3z">
-                </path>
-            </symbol>
-            <symbol id="icon-storage" viewBox="0 0 24 24">
-                <title>storage</title>
-                <path
-                    d="M3.984 11.016v1.969h2.016v-1.969h-2.016zM2.016 14.016v-4.031h19.969v4.031h-19.969zM6 6.984v-1.969h-2.016v1.969h2.016zM2.016 3.984h19.969v4.031h-19.969v-4.031zM3.984 17.016v1.969h2.016v-1.969h-2.016zM2.016 20.016v-4.031h19.969v4.031h-19.969z">
-                </path>
-            </symbol>
-            <symbol id="icon-signal_cellular_alt" viewBox="0 0 24 24">
-                <title>signal_cellular_alt</title>
-                <path d="M11.016 9h3v11.016h-3v-11.016zM5.016 14.016h3v6h-3v-6zM17.016 3.984h3v16.031h-3v-16.031z">
-                </path>
-            </symbol>
-            <symbol id="icon-border_color" viewBox="0 0 24 24">
-                <title>border_color</title>
-                <path
-                    d="M0 20.016h24v3.984h-24v-3.984zM20.719 4.031l-1.969 1.969-3.75-3.75 1.969-1.969q0.281-0.281 0.703-0.281t0.703 0.281l2.344 2.344q0.281 0.281 0.281 0.703t-0.281 0.703zM17.766 6.984l-10.031 10.031h-3.75v-3.75l10.031-10.031z">
-                </path>
-            </symbol>
-            <symbol id="icon-format_indent_decrease" viewBox="0 0 24 24">
-                <title>format_indent_decrease</title>
-                <path
-                    d="M11.016 12.984v-1.969h9.984v1.969h-9.984zM11.016 9v-2.016h9.984v2.016h-9.984zM3 3h18v2.016h-18v-2.016zM3 21v-2.016h18v2.016h-18zM3 12l3.984-3.984v7.969zM11.016 17.016v-2.016h9.984v2.016h-9.984z">
-                </path>
-            </symbol>
-            <symbol id="icon-format_indent_increase" viewBox="0 0 24 24">
-                <title>format_indent_increase</title>
-                <path
-                    d="M11.016 12.984v-1.969h9.984v1.969h-9.984zM11.016 9v-2.016h9.984v2.016h-9.984zM3 3h18v2.016h-18v-2.016zM11.016 17.016v-2.016h9.984v2.016h-9.984zM3 8.016l3.984 3.984-3.984 3.984v-7.969zM3 21v-2.016h18v2.016h-18z">
-                </path>
-            </symbol>
-            <symbol id="icon-insert_chartpollassessment" viewBox="0 0 24 24">
-                <title>insert_chartpollassessment</title>
-                <path
-                    d="M17.016 17.016v-4.031h-2.016v4.031h2.016zM12.984 17.016v-10.031h-1.969v10.031h1.969zM9 17.016v-7.031h-2.016v7.031h2.016zM18.984 3q0.797 0 1.406 0.609t0.609 1.406v13.969q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-13.969q0-0.797 0.609-1.406t1.406-0.609h13.969z">
-                </path>
-            </symbol>
-            <symbol id="icon-insert_drive_file" viewBox="0 0 24 24">
-                <title>insert_drive_file</title>
-                <path
-                    d="M12.984 9h5.531l-5.531-5.484v5.484zM6 2.016h8.016l6 6v12q0 0.797-0.609 1.383t-1.406 0.586h-12q-0.797 0-1.406-0.586t-0.609-1.383l0.047-16.031q0-0.797 0.586-1.383t1.383-0.586z">
-                </path>
-            </symbol>
-            <symbol id="icon-insert_photoimagephoto" viewBox="0 0 24 24">
-                <title>insert_photoimagephoto</title>
-                <path
-                    d="M8.484 13.5l-3.469 4.5h13.969l-4.5-6-3.469 4.5zM21 18.984q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-13.969q0-0.797 0.609-1.406t1.406-0.609h13.969q0.797 0 1.406 0.609t0.609 1.406v13.969z">
-                </path>
-            </symbol>
-            <symbol id="icon-publish" viewBox="0 0 24 24">
-                <title>publish</title>
-                <path
-                    d="M5.016 14.016l6.984-7.031 6.984 7.031h-3.984v6h-6v-6h-3.984zM5.016 3.984h13.969v2.016h-13.969v-2.016z">
-                </path>
-            </symbol>
-            <symbol id="icon-linear_scale" viewBox="0 0 24 24">
-                <title>linear_scale</title>
-                <path
-                    d="M19.5 9.516q1.031 0 1.758 0.727t0.727 1.758-0.727 1.758-1.758 0.727q-1.688 0-2.297-1.5h-2.906q-0.609 1.5-2.297 1.5t-2.297-1.5h-2.906q-0.609 1.5-2.297 1.5-1.031 0-1.758-0.727t-0.727-1.758 0.727-1.758 1.758-0.727q1.688 0 2.297 1.5h2.906q0.609-1.5 2.297-1.5t2.297 1.5h2.906q0.609-1.5 2.297-1.5z">
-                </path>
-            </symbol>
-            <symbol id="icon-scatter_plot" viewBox="0 0 24 24">
-                <title>scatter_plot</title>
-                <path
-                    d="M13.594 17.578q0-1.219 0.891-2.109t2.109-0.891 2.109 0.891 0.891 2.109-0.891 2.109-2.109 0.891-2.109-0.891-0.891-2.109zM8.016 6q0-1.219 0.891-2.109t2.109-0.891 2.109 0.891 0.891 2.109-0.891 2.109-2.109 0.891-2.109-0.891-0.891-2.109zM3.984 14.016q0-1.219 0.891-2.109t2.109-0.891 2.109 0.891 0.891 2.109-0.891 2.109-2.109 0.891-2.109-0.891-0.891-2.109z">
-                </path>
-            </symbol>
-            <symbol id="icon-bar_chart" viewBox="0 0 24 24">
-                <title>bar_chart</title>
-                <path
-                    d="M16.219 12.984h2.766v6h-2.766v-6zM10.594 5.016h2.813v13.969h-2.813v-13.969zM5.016 9.188h3v9.797h-3v-9.797z">
-                </path>
-            </symbol>
-            <symbol id="icon-cloud_queue" viewBox="0 0 24 24">
-                <title>cloud_queue</title>
-                <path
-                    d="M18.984 18q1.219 0 2.109-0.891t0.891-2.109-0.891-2.109-2.109-0.891h-1.5v-0.516q0-2.297-1.594-3.891t-3.891-1.594q-1.875 0-3.328 1.125t-1.969 2.859h-0.703q-1.641 0-2.813 1.195t-1.172 2.836 1.172 2.813 2.813 1.172h12.984zM19.359 10.031q1.922 0.141 3.281 1.57t1.359 3.398q0 2.063-1.477 3.539t-3.539 1.477h-12.984q-2.484 0-4.242-1.758t-1.758-4.242q0-2.203 1.57-3.961t3.773-1.992q0.984-1.828 2.766-2.953t3.891-1.125q2.531 0 4.711 1.781t2.648 4.266z">
-                </path>
-            </symbol>
-            <symbol id="icon-file_downloadget_app" viewBox="0 0 24 24">
-                <title>file_downloadget_app</title>
-                <path d="M5.016 18h13.969v2.016h-13.969v-2.016zM18.984 9l-6.984 6.984-6.984-6.984h3.984v-6h6v6h3.984z">
-                </path>
-            </symbol>
-            <symbol id="icon-file_upload" viewBox="0 0 24 24">
-                <title>file_upload</title>
-                <path
-                    d="M5.016 18h13.969v2.016h-13.969v-2.016zM9 15.984v-6h-3.984l6.984-6.984 6.984 6.984h-3.984v6h-6z">
-                </path>
-            </symbol>
-            <symbol id="icon-folder" viewBox="0 0 24 24">
-                <title>folder</title>
-                <path
-                    d="M9.984 3.984l2.016 2.016h8.016q0.797 0 1.383 0.609t0.586 1.406v9.984q0 0.797-0.586 1.406t-1.383 0.609h-16.031q-0.797 0-1.383-0.609t-0.586-1.406v-12q0-0.797 0.586-1.406t1.383-0.609h6z">
-                </path>
-            </symbol>
-            <symbol id="icon-folder_open" viewBox="0 0 24 24">
-                <title>folder_open</title>
-                <path
-                    d="M20.016 18v-9.984h-16.031v9.984h16.031zM20.016 6q0.797 0 1.383 0.609t0.586 1.406v9.984q0 0.797-0.586 1.406t-1.383 0.609h-16.031q-0.797 0-1.383-0.609t-0.586-1.406v-12q0-0.797 0.586-1.406t1.383-0.609h6l2.016 2.016h8.016z">
-                </path>
-            </symbol>
-            <symbol id="icon-create_new_folder" viewBox="0 0 24 24">
-                <title>create_new_folder</title>
-                <path
-                    d="M18.984 14.016v-2.016h-3v-3h-1.969v3h-3v2.016h3v3h1.969v-3h3zM20.016 6q0.844 0 1.406 0.586t0.563 1.43v9.984q0 0.844-0.563 1.43t-1.406 0.586h-16.031q-0.844 0-1.406-0.586t-0.563-1.43v-12q0-0.844 0.563-1.43t1.406-0.586h6l2.016 2.016h8.016z">
-                </path>
-            </symbol>
-            <symbol id="icon-keyboard_arrow_down" viewBox="0 0 24 24">
-                <title>keyboard_arrow_down</title>
-                <path d="M7.406 8.578l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z"></path>
-            </symbol>
-            <symbol id="icon-keyboard_arrow_left" viewBox="0 0 24 24">
-                <title>keyboard_arrow_left</title>
-                <path d="M15.422 16.594l-1.406 1.406-6-6 6-6 1.406 1.406-4.594 4.594z"></path>
-            </symbol>
-            <symbol id="icon-keyboard_arrow_right" viewBox="0 0 24 24">
-                <title>keyboard_arrow_right</title>
-                <path d="M8.578 16.594l4.594-4.594-4.594-4.594 1.406-1.406 6 6-6 6z"></path>
-            </symbol>
-            <symbol id="icon-keyboard_arrow_up" viewBox="0 0 24 24">
-                <title>keyboard_arrow_up</title>
-                <path d="M7.406 15.422l-1.406-1.406 6-6 6 6-1.406 1.406-4.594-4.594z"></path>
-            </symbol>
-            <symbol id="icon-keyboard_backspace" viewBox="0 0 24 24">
-                <title>keyboard_backspace</title>
-                <path d="M21 11.016v1.969h-14.156l3.563 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.563 3.609h14.156z">
-                </path>
-            </symbol>
-            <symbol id="icon-keyboard_return" viewBox="0 0 24 24">
-                <title>keyboard_return</title>
-                <path
-                    d="M18.984 6.984h2.016v6h-15.188l3.609 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.609 3.609h13.172v-4.031z">
-                </path>
-            </symbol>
-            <symbol id="icon-keyboard_tab" viewBox="0 0 24 24">
-                <title>keyboard_tab</title>
-                <path
-                    d="M20.016 6h1.969v12h-1.969v-12zM11.578 7.406l1.406-1.406 6 6-6 6-1.406-1.406 3.609-3.609h-14.203v-1.969h14.203z">
-                </path>
-            </symbol>
-            <symbol id="icon-device_hub" viewBox="0 0 24 24">
-                <title>device_hub</title>
-                <path
-                    d="M17.016 15.984h3.984v5.016h-5.016v-3.047l-3.984-4.219-3.984 4.219v3.047h-5.016v-5.016h3.984l4.031-3.984v-3.188q-0.891-0.328-1.453-1.078t-0.563-1.734q0-1.219 0.891-2.109t2.109-0.891 2.109 0.891 0.891 2.109q0 0.984-0.563 1.734t-1.453 1.078v3.188z">
-                </path>
-            </symbol>
-            <symbol id="icon-arrow_drop_down" viewBox="0 0 24 24">
-                <title>arrow_drop_down</title>
-                <path d="M6.984 9.984h10.031l-5.016 5.016z"></path>
-            </symbol>
-            <symbol id="icon-arrow_drop_up" viewBox="0 0 24 24">
-                <title>arrow_drop_up</title>
-                <path d="M6.984 14.016l5.016-5.016 5.016 5.016h-10.031z"></path>
-            </symbol>
-            <symbol id="icon-cancel" viewBox="0 0 24 24">
-                <title>cancel</title>
-                <path
-                    d="M17.016 15.609l-3.609-3.609 3.609-3.609-1.406-1.406-3.609 3.609-3.609-3.609-1.406 1.406 3.609 3.609-3.609 3.609 1.406 1.406 3.609-3.609 3.609 3.609zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z">
-                </path>
-            </symbol>
-            <symbol id="icon-keyboard_control" viewBox="0 0 24 24">
-                <title>keyboard_control</title>
-                <path
-                    d="M12 9.984q0.797 0 1.406 0.609t0.609 1.406-0.609 1.406-1.406 0.609-1.406-0.609-0.609-1.406 0.609-1.406 1.406-0.609zM18 9.984q0.797 0 1.406 0.609t0.609 1.406-0.609 1.406-1.406 0.609-1.406-0.609-0.609-1.406 0.609-1.406 1.406-0.609zM6 9.984q0.797 0 1.406 0.609t0.609 1.406-0.609 1.406-1.406 0.609-1.406-0.609-0.609-1.406 0.609-1.406 1.406-0.609z">
-                </path>
-            </symbol>
-            <symbol id="icon-refresh" viewBox="0 0 24 24">
-                <title>refresh</title>
-                <path
-                    d="M17.672 6.328l2.344-2.344v7.031h-7.031l3.234-3.234q-1.781-1.781-4.219-1.781-2.484 0-4.242 1.758t-1.758 4.242 1.758 4.242 4.242 1.758q1.734 0 3.398-1.172t2.273-2.813h2.063q-0.656 2.625-2.813 4.313t-4.922 1.688q-3.281 0-5.625-2.344t-2.344-5.672 2.344-5.672 5.625-2.344q1.406 0 3.070 0.68t2.602 1.664z">
-                </path>
-            </symbol>
-            <symbol id="icon-unfold_more" viewBox="0 0 24 24">
-                <title>unfold_more</title>
-                <path
-                    d="M12 18.188l3.188-3.188 1.406 1.406-4.594 4.594-4.594-4.594 1.406-1.406zM12 5.813l-3.188 3.188-1.406-1.406 4.594-4.594 4.594 4.594-1.406 1.406z">
-                </path>
-            </symbol>
-            <symbol id="icon-arrow_left" viewBox="0 0 24 24">
-                <title>arrow_left</title>
-                <path d="M14.016 6.984v10.031l-5.016-5.016z"></path>
-            </symbol>
-            <symbol id="icon-arrow_right" viewBox="0 0 24 24">
-                <title>arrow_right</title>
-                <path d="M9.984 17.016v-10.031l5.016 5.016z"></path>
-            </symbol>
-            <symbol id="icon-arrow_back_ios" viewBox="0 0 24 24">
-                <title>arrow_back_ios</title>
-                <path d="M11.672 3.891l-8.109 8.109 8.109 8.109-1.781 1.781-9.891-9.891 9.891-9.891z"></path>
-            </symbol>
-            <symbol id="icon-arrow_forward_ios" viewBox="0 0 24 24">
-                <title>arrow_forward_ios</title>
-                <path d="M5.859 4.125l2.156-2.109 9.984 9.984-9.984 9.984-2.156-2.109 7.922-7.875z"></path>
-            </symbol>
-            <symbol id="icon-notifications" viewBox="0 0 24 24">
-                <title>notifications</title>
-                <path
-                    d="M18 15.984l2.016 2.016v0.984h-16.031v-0.984l2.016-2.016v-4.969q0-2.344 1.195-4.078t3.305-2.25v-0.703q0-0.609 0.422-1.055t1.078-0.445 1.078 0.445 0.422 1.055v0.703q2.109 0.516 3.305 2.25t1.195 4.078v4.969zM12 21.984q-0.844 0-1.43-0.563t-0.586-1.406h4.031q0 0.797-0.609 1.383t-1.406 0.586z">
-                </path>
-            </symbol>
-            <symbol id="icon-notifications_none" viewBox="0 0 24 24">
-                <title>notifications_none</title>
-                <path
-                    d="M15.984 17.016v-6q0-1.922-1.078-3.211t-2.906-1.289-2.906 1.289-1.078 3.211v6h7.969zM18 15.984l2.016 2.016v0.984h-16.031v-0.984l2.016-2.016v-4.969q0-2.344 1.195-4.078t3.305-2.25v-0.703q0-0.609 0.422-1.055t1.078-0.445 1.078 0.445 0.422 1.055v0.703q2.109 0.516 3.305 2.25t1.195 4.078v4.969zM12 21.984q-0.797 0-1.406-0.586t-0.609-1.383h4.031q0 0.797-0.609 1.383t-1.406 0.586z">
-                </path>
-            </symbol>
-            <symbol id="icon-notifications_off" viewBox="0 0 24 24">
-                <title>notifications_off</title>
-                <path
-                    d="M18 14.672l-8.953-9.422q0.141-0.047 0.375-0.164l0.328-0.164h0.047l0.281-0.141q0.047 0 0.188-0.047t0.234-0.047v-0.703q0-0.609 0.422-1.055t1.078-0.445 1.078 0.445 0.422 1.055v0.703q2.109 0.516 3.305 2.25t1.195 4.078v3.656zM12 21.984q-0.844 0-1.43-0.563t-0.586-1.406h4.031q0 0.844-0.586 1.406t-1.43 0.563zM7.828 6.141q1.125 1.172 5.883 6.047t7.289 7.547l-1.266 1.266-2.016-2.016h-13.734v-0.984l2.016-2.016v-5.016q0-1.922 0.797-3.422l-2.813-2.766 1.266-1.313z">
-                </path>
-            </symbol>
-            <symbol id="icon-check_box" viewBox="0 0 24 24">
-                <title>check_box</title>
-                <path
-                    d="M9.984 17.016l9-9-1.406-1.453-7.594 7.594-3.563-3.563-1.406 1.406zM18.984 3q0.844 0 1.43 0.586t0.586 1.43v13.969q0 0.844-0.586 1.43t-1.43 0.586h-13.969q-0.844 0-1.43-0.586t-0.586-1.43v-13.969q0-0.844 0.586-1.43t1.43-0.586h13.969z">
-                </path>
-            </symbol>
-            <symbol id="icon-check_box_outline_blank" viewBox="0 0 24 24">
-                <title>check_box_outline_blank</title>
-                <path
-                    d="M18.984 3q0.797 0 1.406 0.609t0.609 1.406v13.969q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-13.969q0-0.797 0.609-1.406t1.406-0.609h13.969zM18.984 5.016h-13.969v13.969h13.969v-13.969z">
-                </path>
-            </symbol>
-            <symbol id="icon-assignment" viewBox="0 0 24 24">
-                <title>assignment</title>
-                <path
-                    d="M17.016 9v-2.016h-10.031v2.016h10.031zM17.016 12.984v-1.969h-10.031v1.969h10.031zM14.016 17.016v-2.016h-7.031v2.016h7.031zM12 3q-0.422 0-0.703 0.281t-0.281 0.703 0.281 0.727 0.703 0.305 0.703-0.305 0.281-0.727-0.281-0.703-0.703-0.281zM18.984 3q0.797 0 1.406 0.609t0.609 1.406v13.969q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-13.969q0-0.797 0.609-1.406t1.406-0.609h4.172q0.328-0.891 1.078-1.453t1.734-0.563 1.734 0.563 1.078 1.453h4.172z">
-                </path>
-            </symbol>
-            <symbol id="icon-cached" viewBox="0 0 24 24">
-                <title>cached</title>
-                <path
-                    d="M6 12h3l-3.984 3.984-4.031-3.984h3q0-3.281 2.367-5.648t5.648-2.367q2.344 0 4.266 1.266l-1.453 1.453q-1.266-0.703-2.813-0.703-2.484 0-4.242 1.758t-1.758 4.242zM18.984 8.016l4.031 3.984h-3q0 3.281-2.367 5.648t-5.648 2.367q-2.344 0-4.266-1.266l1.453-1.453q1.313 0.703 2.813 0.703 2.484 0 4.242-1.758t1.758-4.242h-3z">
-                </path>
-            </symbol>
-            <symbol id="icon-code" viewBox="0 0 24 24">
-                <title>code</title>
-                <path
-                    d="M14.578 16.594l4.641-4.594-4.641-4.594 1.406-1.406 6 6-6 6zM9.422 16.594l-1.406 1.406-6-6 6-6 1.406 1.406-4.641 4.594z">
-                </path>
-            </symbol>
-            <symbol id="icon-description" viewBox="0 0 24 24">
-                <title>description</title>
-                <path
-                    d="M12.984 9h5.531l-5.531-5.484v5.484zM15.984 14.016v-2.016h-7.969v2.016h7.969zM15.984 18v-2.016h-7.969v2.016h7.969zM14.016 2.016l6 6v12q0 0.797-0.609 1.383t-1.406 0.586h-12q-0.797 0-1.406-0.586t-0.609-1.383l0.047-16.031q0-0.797 0.586-1.383t1.383-0.586h8.016z">
-                </path>
-            </symbol>
-            <symbol id="icon-dns" viewBox="0 0 24 24">
-                <title>dns</title>
-                <path
-                    d="M6.984 9q0.797 0 1.406-0.609t0.609-1.406-0.609-1.383-1.406-0.586-1.383 0.586-0.586 1.383 0.586 1.406 1.383 0.609zM20.016 3q0.422 0 0.703 0.281t0.281 0.703v6q0 0.422-0.281 0.727t-0.703 0.305h-16.031q-0.422 0-0.703-0.305t-0.281-0.727v-6q0-0.422 0.281-0.703t0.703-0.281h16.031zM6.984 18.984q0.797 0 1.406-0.586t0.609-1.383-0.609-1.406-1.406-0.609-1.383 0.609-0.586 1.406 0.586 1.383 1.383 0.586zM20.016 12.984q0.422 0 0.703 0.305t0.281 0.727v6q0 0.422-0.281 0.703t-0.703 0 [...]
-                </path>
-            </symbol>
-            <symbol id="icon-help" viewBox="0 0 24 24">
-                <title>help</title>
-                <path
-                    d="M15.047 11.25q0.938-0.938 0.938-2.25 0-1.641-1.172-2.813t-2.813-1.172-2.813 1.172-1.172 2.813h1.969q0-0.797 0.609-1.406t1.406-0.609 1.406 0.609 0.609 1.406-0.609 1.406l-1.219 1.266q-1.172 1.266-1.172 2.813v0.516h1.969q0-1.547 1.172-2.813zM12.984 18.984v-1.969h-1.969v1.969h1.969zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z">
-                </path>
-            </symbol>
-            <symbol id="icon-highlight_remove" viewBox="0 0 24 24">
-                <title>highlight_remove</title>
-                <path
-                    d="M12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93zM14.578 8.016l1.406 1.406-2.578 2.578 2.578 2.578-1.406 1.406-2.578-2.578-2.578 2.578-1.406-1.406 2.578-2.578-2.578-2.578 1.406-1.406 2.578 2.578z">
-                </path>
-            </symbol>
-            <symbol id="icon-info" viewBox="0 0 24 24">
-                <title>info</title>
-                <path
-                    d="M12.984 9v-2.016h-1.969v2.016h1.969zM12.984 17.016v-6h-1.969v6h1.969zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z">
-                </path>
-            </symbol>
-            <symbol id="icon-info_outline" viewBox="0 0 24 24">
-                <title>info_outline</title>
-                <path
-                    d="M11.016 9v-2.016h1.969v2.016h-1.969zM12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93zM11.016 17.016v-6h1.969v6h-1.969z">
-                </path>
-            </symbol>
-            <symbol id="icon-language" viewBox="0 0 24 24">
-                <title>language</title>
-                <path
-                    d="M16.359 14.016h3.375q0.281-1.313 0.281-2.016t-0.281-2.016h-3.375q0.141 0.984 0.141 2.016t-0.141 2.016zM14.578 19.547q1.172-0.375 2.438-1.43t1.922-2.133h-2.953q-0.469 1.875-1.406 3.563zM14.344 14.016q0.141-0.984 0.141-2.016t-0.141-2.016h-4.688q-0.141 0.984-0.141 2.016t0.141 2.016h4.688zM12 19.969q1.313-1.922 1.922-3.984h-3.844q0.609 2.063 1.922 3.984zM8.016 8.016q0.563-2.016 1.406-3.563-1.172 0.375-2.461 1.43t-1.898 2.133h2.953zM5.063 15.984q0.609 1.078 1.898 2.133t [...]
-                </path>
-            </symbol>
-            <symbol id="icon-lock_open" viewBox="0 0 24 24">
-                <title>lock_open</title>
-                <path
-                    d="M18 20.016v-10.031h-12v10.031h12zM18 8.016q0.797 0 1.406 0.586t0.609 1.383v10.031q0 0.797-0.609 1.383t-1.406 0.586h-12q-0.797 0-1.406-0.586t-0.609-1.383v-10.031q0-0.797 0.609-1.383t1.406-0.586h9.094v-2.016q0-1.266-0.914-2.18t-2.18-0.914-2.18 0.914-0.914 2.18h-1.922q0-2.063 1.477-3.539t3.539-1.477 3.539 1.477 1.477 3.539v2.016h0.984zM12 17.016q-0.797 0-1.406-0.609t-0.609-1.406 0.609-1.406 1.406-0.609 1.406 0.609 0.609 1.406-0.609 1.406-1.406 0.609z">
-                </path>
-            </symbol>
-            <symbol id="icon-lock_outline" viewBox="0 0 24 24">
-                <title>lock_outline</title>
-                <path
-                    d="M18 20.016v-10.031h-12v10.031h12zM8.906 6v2.016h6.188v-2.016q0-1.266-0.914-2.18t-2.18-0.914-2.18 0.914-0.914 2.18zM18 8.016q0.797 0 1.406 0.586t0.609 1.383v10.031q0 0.797-0.609 1.383t-1.406 0.586h-12q-0.797 0-1.406-0.586t-0.609-1.383v-10.031q0-0.797 0.609-1.383t1.406-0.586h0.984v-2.016q0-2.063 1.477-3.539t3.539-1.477 3.539 1.477 1.477 3.539v2.016h0.984zM12 17.016q-0.797 0-1.406-0.609t-0.609-1.406 0.609-1.406 1.406-0.609 1.406 0.609 0.609 1.406-0.609 1.406-1.406 0.609z">
-                </path>
-            </symbol>
-            <symbol id="icon-search" viewBox="0 0 24 24">
-                <title>search</title>
-                <path
-                    d="M9.516 14.016q1.875 0 3.188-1.313t1.313-3.188-1.313-3.188-3.188-1.313-3.188 1.313-1.313 3.188 1.313 3.188 3.188 1.313zM15.516 14.016l4.969 4.969-1.5 1.5-4.969-4.969v-0.797l-0.281-0.281q-1.781 1.547-4.219 1.547-2.719 0-4.617-1.875t-1.898-4.594 1.898-4.617 4.617-1.898 4.594 1.898 1.875 4.617q0 0.984-0.469 2.227t-1.078 1.992l0.281 0.281h0.797z">
-                </path>
-            </symbol>
-            <symbol id="icon-settings" viewBox="0 0 24 24">
-                <title>settings</title>
-                <path
-                    d="M12 15.516q1.453 0 2.484-1.031t1.031-2.484-1.031-2.484-2.484-1.031-2.484 1.031-1.031 2.484 1.031 2.484 2.484 1.031zM19.453 12.984l2.109 1.641q0.328 0.234 0.094 0.656l-2.016 3.469q-0.188 0.328-0.609 0.188l-2.484-0.984q-0.984 0.703-1.688 0.984l-0.375 2.625q-0.094 0.422-0.469 0.422h-4.031q-0.375 0-0.469-0.422l-0.375-2.625q-0.891-0.375-1.688-0.984l-2.484 0.984q-0.422 0.141-0.609-0.188l-2.016-3.469q-0.234-0.422 0.094-0.656l2.109-1.641q-0.047-0.328-0.047-0.984t0.047-0.98 [...]
-                </path>
-            </symbol>
-            <symbol id="icon-settings_ethernet" viewBox="0 0 24 24">
-                <title>settings_ethernet</title>
-                <path
-                    d="M17.766 5.484l5.438 6.516-5.438 6.516-1.547-1.266 4.359-5.25-4.359-5.25zM11.016 12.984v-1.969h1.969v1.969h-1.969zM17.016 11.016v1.969h-2.016v-1.969h2.016zM6.984 12.984v-1.969h2.016v1.969h-2.016zM7.781 6.75l-4.359 5.25 4.359 5.25-1.547 1.266-5.438-6.516 5.438-6.516z">
-                </path>
-            </symbol>
-            <symbol id="icon-donut_small" viewBox="0 0 24 24">
-                <title>donut_small</title>
-                <path
-                    d="M12.984 14.859q1.266-0.375 1.875-1.875h7.125q-0.375 3.609-2.836 6.141t-6.164 2.859v-7.125zM14.859 11.016q-0.563-1.5-1.875-1.875v-7.125q3.703 0.328 6.164 2.859t2.836 6.141h-7.125zM11.016 9.141q-0.797 0.328-1.406 1.125t-0.609 1.734 0.609 1.734 1.406 1.125v7.125q-3.797-0.375-6.398-3.234t-2.602-6.75 2.602-6.75 6.398-3.234v7.125z">
-                </path>
-            </symbol>
-            <symbol id="icon-timeline" viewBox="0 0 24 24">
-                <title>timeline</title>
-                <path
-                    d="M23.016 8.016q0 0.797-0.609 1.383t-1.406 0.586h-0.047q-0.328 0-0.469-0.047l-3.563 3.563q0.094 0.281 0.094 0.516 0 0.797-0.609 1.383t-1.406 0.586-1.406-0.586-0.609-1.383q0-0.234 0.094-0.516l-2.578-2.578q-0.281 0.094-0.516 0.094t-0.516-0.094l-4.547 4.547q0.094 0.281 0.094 0.516 0 0.797-0.609 1.406t-1.406 0.609-1.406-0.609-0.609-1.406 0.609-1.383 1.406-0.586q0.375 0 0.516 0.047l4.547-4.547q-0.047-0.141-0.047-0.516 0-0.797 0.586-1.406t1.383-0.609 1.406 0.609 0.609 1.40 [...]
-                </path>
-            </symbol>
-            <symbol id="icon-account_tree" viewBox="0 0 24 24">
-                <title>account_tree</title>
-                <path
-                    d="M21.984 11.016h-6.984v-3h-2.016v7.969h2.016v-3h6.984v8.016h-6.984v-3h-3.984v-9.984h-2.016v3h-6.984v-8.016h6.984v3h6v-3h6.984v8.016z">
-                </path>
-            </symbol>
-            <symbol id="icon-all_inbox" viewBox="0 0 24 24">
-                <title>all_inbox</title>
-                <path
-                    d="M15 15.984h6v3q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-3h6q0 1.219 0.891 2.109t2.109 0.891 2.109-0.891 0.891-2.109zM18.984 9v-3.984h-13.969v3.984h3.984q0 1.219 0.891 2.109t2.109 0.891 2.109-0.891 0.891-2.109h3.984zM18.984 3q0.797 0 1.406 0.609t0.609 1.406v6.984q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-6.984q0-0.797 0.609-1.406t1.406-0.609h13.969z">
-                </path>
-            </symbol>
-            <symbol id="icon-dashboard_customize" viewBox="0 0 24 24">
-                <title>dashboard_customize</title>
-                <path
-                    d="M18 12.984v3h3v2.016h-3v3h-2.016v-3h-3v-2.016h3v-3h2.016zM3 12.984h8.016v8.016h-8.016v-8.016zM12.984 3h8.016v8.016h-8.016v-8.016zM3 3h8.016v8.016h-8.016v-8.016z">
-                </path>
-            </symbol>
-            <symbol id="icon-speed" viewBox="0 0 24 24">
-                <title>speed</title>
-                <path
-                    d="M12 15.984q-0.797 0-1.406-0.586t-0.609-1.383q0-0.844 0.609-1.453l8.484-5.625-5.672 8.484q-0.563 0.563-1.406 0.563zM20.391 8.578q0.656 1.031 1.125 2.625t0.469 2.813q0 2.766-1.313 4.969-0.609 1.031-1.734 1.031h-13.875q-1.125 0-1.734-1.031-1.313-2.203-1.313-4.969 0-4.125 2.93-7.055t7.102-2.93q1.219 0 2.789 0.469t2.602 1.125l-1.875 1.219q-1.688-0.844-3.563-0.844-3.281 0-5.648 2.344t-2.367 5.672q0 2.156 1.078 3.984h13.875q1.078-1.828 1.078-3.984 0-1.922-0.844-3.609z">
-                </path>
-            </symbol>
-            <symbol id="icon-sync_alt" viewBox="0 0 24 24">
-                <title>sync_alt</title>
-                <path d="M2.016 15.984l3.984-3.984v3h15v2.016h-15v3zM21.984 8.016l-3.984 3.984v-3h-15v-2.016h15v-3z">
-                </path>
-            </symbol>
-        </defs>
+  <body>
+    <svg
+      aria-hidden="true"
+      style="position: absolute; width: 0; height: 0; overflow: hidden;"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <defs>
+        <symbol id="icon-error" viewBox="0 0 24 24">
+          <title>error</title>
+          <path
+            d="M12.984 12.984v-6h-1.969v6h1.969zM12.984 17.016v-2.016h-1.969v2.016h1.969zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"
+          ></path>
+        </symbol>
+        <symbol id="icon-error_outline" viewBox="0 0 24 24">
+          <title>error_outline</title>
+          <path
+            d="M12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93zM11.016 6.984h1.969v6h-1.969v-6zM11.016 15h1.969v2.016h-1.969v-2.016z"
+          ></path>
+        </symbol>
+        <symbol id="icon-warningreport_problem" viewBox="0 0 24 24">
+          <title>warningreport_problem</title>
+          <path
+            d="M12.984 14.016v-4.031h-1.969v4.031h1.969zM12.984 18v-2.016h-1.969v2.016h1.969zM0.984 21l11.016-18.984 11.016 18.984h-22.031z"
+          ></path>
+        </symbol>
+        <symbol id="icon-notification_important" viewBox="0 0 24 24">
+          <title>notification_important</title>
+          <path
+            d="M12 21.984q-0.844 0-1.43-0.563t-0.586-1.406h4.031q0 0.797-0.609 1.383t-1.406 0.586zM12.984 12v-3.984h-1.969v3.984h1.969zM12.984 15.984v-1.969h-1.969v1.969h1.969zM18 15.984l2.016 2.016v0.984h-16.031v-0.984l2.016-2.016v-4.969q0-2.344 1.195-4.078t3.305-2.25v-0.703q0-0.609 0.422-1.055t1.078-0.445 1.078 0.445 0.422 1.055v0.703q2.109 0.516 3.305 2.25t1.195 4.078v4.969z"
+          ></path>
+        </symbol>
+        <symbol id="icon-av_timer" viewBox="0 0 24 24">
+          <title>av_timer</title>
+          <path
+            d="M6 12q0-0.422 0.281-0.703t0.703-0.281 0.727 0.281 0.305 0.703-0.305 0.703-0.727 0.281-0.703-0.281-0.281-0.703zM18 12q0 0.422-0.281 0.703t-0.703 0.281-0.727-0.281-0.305-0.703 0.305-0.703 0.727-0.281 0.703 0.281 0.281 0.703zM11.016 3h0.984q3.75 0 6.375 2.625t2.625 6.375-2.625 6.375-6.375 2.625-6.375-2.625-2.625-6.375q0-4.5 3.609-7.172v-0.047l6.797 6.797-1.406 1.406-5.438-5.391q-1.547 1.922-1.547 4.406 0 2.906 2.039 4.945t4.945 2.039 4.945-2.039 2.039-4.945q0-2.625-1.734-4.59 [...]
+          ></path>
+        </symbol>
+        <symbol id="icon-equalizer" viewBox="0 0 24 24">
+          <title>equalizer</title>
+          <path
+            d="M15.984 9h4.031v11.016h-4.031v-11.016zM3.984 20.016v-8.016h4.031v8.016h-4.031zM9.984 20.016v-16.031h4.031v16.031h-4.031z"
+          ></path>
+        </symbol>
+        <symbol id="icon-loopsync" viewBox="0 0 24 24">
+          <title>loopsync</title>
+          <path
+            d="M12 18v-3l3.984 3.984-3.984 4.031v-3q-3.281 0-5.648-2.367t-2.367-5.648q0-2.344 1.266-4.266l1.453 1.453q-0.703 1.266-0.703 2.813 0 2.484 1.758 4.242t4.242 1.758zM12 3.984q3.281 0 5.648 2.367t2.367 5.648q0 2.344-1.266 4.266l-1.453-1.453q0.703-1.266 0.703-2.813 0-2.484-1.758-4.242t-4.242-1.758v3l-3.984-3.984 3.984-4.031v3z"
+          ></path>
+        </symbol>
+        <symbol id="icon-library_addqueueadd_to_photos" viewBox="0 0 24 24">
+          <title>library_addqueueadd_to_photos</title>
+          <path
+            d="M18.984 11.016v-2.016h-3.984v-3.984h-2.016v3.984h-3.984v2.016h3.984v3.984h2.016v-3.984h3.984zM20.016 2.016q0.797 0 1.383 0.586t0.586 1.383v12q0 0.797-0.586 1.406t-1.383 0.609h-12q-0.797 0-1.406-0.609t-0.609-1.406v-12q0-0.797 0.609-1.383t1.406-0.586h12zM3.984 6v14.016h14.016v1.969h-14.016q-0.797 0-1.383-0.586t-0.586-1.383v-14.016h1.969z"
+          ></path>
+        </symbol>
+        <symbol id="icon-library_books" viewBox="0 0 24 24">
+          <title>library_books</title>
+          <path
+            d="M18.984 6.984v-1.969h-9.984v1.969h9.984zM15 15v-2.016h-6v2.016h6zM18.984 11.016v-2.016h-9.984v2.016h9.984zM20.016 2.016q0.797 0 1.383 0.586t0.586 1.383v12q0 0.797-0.586 1.406t-1.383 0.609h-12q-0.797 0-1.406-0.609t-0.609-1.406v-12q0-0.797 0.609-1.383t1.406-0.586h12zM3.984 6v14.016h14.016v1.969h-14.016q-0.797 0-1.383-0.586t-0.586-1.383v-14.016h1.969z"
+          ></path>
+        </symbol>
+        <symbol id="icon-not_interesteddo_not_disturb" viewBox="0 0 24 24">
+          <title>not_interesteddo_not_disturb</title>
+          <path
+            d="M18.328 16.922q1.688-2.109 1.688-4.922 0-3.281-2.367-5.648t-5.648-2.367q-1.125 0-2.578 0.492t-2.344 1.195zM12 20.016q1.125 0 2.578-0.492t2.344-1.195l-11.25-11.25q-1.688 2.109-1.688 4.922 0 3.281 2.367 5.648t5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"
+          ></path>
+        </symbol>
+        <symbol id="icon-playlist_add" viewBox="0 0 24 24">
+          <title>playlist_add</title>
+          <path
+            d="M2.016 15.984v-1.969h7.969v1.969h-7.969zM18 14.016h3.984v1.969h-3.984v4.031h-2.016v-4.031h-3.984v-1.969h3.984v-4.031h2.016v4.031zM14.016 6v2.016h-12v-2.016h12zM14.016 9.984v2.016h-12v-2.016h12z"
+          ></path>
+        </symbol>
+        <symbol id="icon-repeat" viewBox="0 0 24 24">
+          <title>repeat</title>
+          <path
+            d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031h-1.969v-6h12v-3l3.984 3.984-3.984 3.984v-3h-10.031z"
+          ></path>
+        </symbol>
+        <symbol id="icon-replay" viewBox="0 0 24 24">
+          <title>replay</title>
+          <path
+            d="M12 5.016q3.328 0 5.672 2.344t2.344 5.625q0 3.328-2.367 5.672t-5.648 2.344-5.648-2.344-2.367-5.672h2.016q0 2.484 1.758 4.242t4.242 1.758 4.242-1.758 1.758-4.242-1.758-4.242-4.242-1.758v4.031l-5.016-5.016 5.016-5.016v4.031z"
+          ></path>
+        </symbol>
+        <symbol id="icon-slow_motion_video" viewBox="0 0 24 24">
+          <title>slow_motion_video</title>
+          <path
+            d="M21.984 12q0 3.844-2.578 6.703t-6.375 3.234v-2.016q2.953-0.375 4.969-2.648t2.016-5.273-2.016-5.273-4.969-2.648v-2.016q3.797 0.375 6.375 3.234t2.578 6.703zM5.672 19.734l1.406-1.406q1.688 1.313 3.938 1.594v2.016q-1.266-0.141-2.836-0.797t-2.508-1.406zM4.078 12.984q0.234 2.203 1.594 3.891l-1.406 1.453q-1.922-2.391-2.203-5.344h2.016zM5.672 7.078q-1.313 1.734-1.594 3.938h-2.016q0.141-1.266 0.797-2.836t1.406-2.508zM11.016 4.078q-2.25 0.281-3.938 1.594l-1.406-1.406q2.391-1.922 5.3 [...]
+          ></path>
+        </symbol>
+        <symbol id="icon-import_export" viewBox="0 0 24 24">
+          <title>import_export</title>
+          <path
+            d="M15.984 17.016h3l-3.984 3.984-3.984-3.984h3v-7.031h1.969v7.031zM9 3l3.984 3.984h-3v7.031h-1.969v-7.031h-3z"
+          ></path>
+        </symbol>
+        <symbol id="icon-location_onplaceroom" viewBox="0 0 24 24">
+          <title>location_onplaceroom</title>
+          <path
+            d="M12 11.484q1.031 0 1.758-0.727t0.727-1.758-0.727-1.758-1.758-0.727-1.758 0.727-0.727 1.758 0.727 1.758 1.758 0.727zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z"
+          ></path>
+        </symbol>
+        <symbol id="icon-vpn_key" viewBox="0 0 24 24">
+          <title>vpn_key</title>
+          <path
+            d="M6.984 14.016q0.797 0 1.406-0.609t0.609-1.406-0.609-1.406-1.406-0.609-1.383 0.609-0.586 1.406 0.586 1.406 1.383 0.609zM12.656 9.984h10.359v4.031h-2.016v3.984h-3.984v-3.984h-4.359q-0.609 1.641-2.273 2.813t-3.398 1.172q-2.484 0-4.242-1.758t-1.758-4.242 1.758-4.242 4.242-1.758q1.734 0 3.398 1.172t2.273 2.813z"
+          ></path>
+        </symbol>
+        <symbol id="icon-import_contacts" viewBox="0 0 24 24">
+          <title>import_contacts</title>
+          <path
+            d="M21 18.516v-11.531q-1.547-0.469-3.516-0.469-3.047 0-5.484 1.5v11.484q2.438-1.5 5.484-1.5 1.828 0 3.516 0.516zM17.484 4.5q3.563 0 5.531 1.5v14.578q0 0.188-0.164 0.352t-0.352 0.164q-0.141 0-0.234-0.047-1.922-1.031-4.781-1.031-3.047 0-5.484 1.5-2.016-1.5-5.484-1.5-2.531 0-4.781 1.078-0.047 0-0.117 0.023t-0.117 0.023q-0.188 0-0.352-0.141t-0.164-0.328v-14.672q2.016-1.5 5.531-1.5 3.469 0 5.484 1.5 2.016-1.5 5.484-1.5z"
+          ></path>
+        </symbol>
+        <symbol id="icon-mail_outline" viewBox="0 0 24 24">
+          <title>mail_outline</title>
+          <path
+            d="M12 11.016l8.016-5.016h-16.031zM20.016 18v-9.984l-8.016 4.969-8.016-4.969v9.984h16.031zM20.016 3.984q0.797 0 1.383 0.609t0.586 1.406v12q0 0.797-0.586 1.406t-1.383 0.609h-16.031q-0.797 0-1.383-0.609t-0.586-1.406v-12q0-0.797 0.586-1.406t1.383-0.609h16.031z"
+          ></path>
+        </symbol>
+        <symbol id="icon-sentiment_satisfied_alt" viewBox="0 0 24 24">
+          <title>sentiment_satisfied_alt</title>
+          <path
+            d="M12 17.484q-1.734 0-3.117-0.961t-1.992-2.508h1.641q1.172 1.969 3.469 1.969t3.469-1.969h1.641q-0.609 1.547-1.992 2.508t-3.117 0.961zM12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93zM8.484 11.016q-0.609 0-1.055-0.445t-0.445-1.055 0.445-1.055 1.055-0.445 1.055 0.445 0.445 1.055-0.445 1.055-1.055 0.445zM15.5 [...]
+          ></path>
+        </symbol>
+        <symbol id="icon-lightbulb" viewBox="0 0 24 24">
+          <title>lightbulb</title>
+          <path
+            d="M12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 3.516-3 5.719v2.297q0 0.422-0.281 0.703t-0.703 0.281h-6q-0.422 0-0.703-0.281t-0.281-0.703v-2.297q-3-2.063-3-5.719 0-2.906 2.039-4.945t4.945-2.039zM9 21v-0.984h6v0.984q0 0.422-0.281 0.703t-0.703 0.281h-4.031q-0.422 0-0.703-0.281t-0.281-0.703z"
+          ></path>
+        </symbol>
+        <symbol id="icon-add" viewBox="0 0 24 24">
+          <title>add</title>
+          <path
+            d="M18.984 12.984h-6v6h-1.969v-6h-6v-1.969h6v-6h1.969v6h6v1.969z"
+          ></path>
+        </symbol>
+        <symbol id="icon-add_box" viewBox="0 0 24 24">
+          <title>add_box</title>
+          <path
+            d="M17.016 12.984v-1.969h-4.031v-4.031h-1.969v4.031h-4.031v1.969h4.031v4.031h1.969v-4.031h4.031zM18.984 3q0.797 0 1.406 0.609t0.609 1.406v13.969q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.844 0-1.43-0.586t-0.586-1.43v-13.969q0-0.844 0.586-1.43t1.43-0.586h13.969z"
+          ></path>
+        </symbol>
+        <symbol id="icon-add_circle" viewBox="0 0 24 24">
+          <title>add_circle</title>
+          <path
+            d="M17.016 12.984v-1.969h-4.031v-4.031h-1.969v4.031h-4.031v1.969h4.031v4.031h1.969v-4.031h4.031zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"
+          ></path>
+        </symbol>
+        <symbol id="icon-add_circle_outlinecontrol_point" viewBox="0 0 24 24">
+          <title>add_circle_outlinecontrol_point</title>
+          <path
+            d="M12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93zM12.984 6.984v4.031h4.031v1.969h-4.031v4.031h-1.969v-4.031h-4.031v-1.969h4.031v-4.031h1.969z"
+          ></path>
+        </symbol>
+        <symbol id="icon-backspace" viewBox="0 0 24 24">
+          <title>backspace</title>
+          <path
+            d="M18.984 15.609l-3.563-3.609 3.563-3.609-1.406-1.406-3.563 3.609-3.609-3.609-1.406 1.406 3.609 3.609-3.609 3.609 1.406 1.406 3.609-3.609 3.563 3.609zM21.984 3q0.797 0 1.406 0.609t0.609 1.406v13.969q0 0.797-0.609 1.406t-1.406 0.609h-15q-0.938 0-1.594-0.891l-5.391-8.109 5.391-8.109q0.656-0.891 1.594-0.891h15z"
+          ></path>
+        </symbol>
+        <symbol id="icon-clearclose" viewBox="0 0 24 24">
+          <title>clearclose</title>
+          <path
+            d="M18.984 6.422l-5.578 5.578 5.578 5.578-1.406 1.406-5.578-5.578-5.578 5.578-1.406-1.406 5.578-5.578-5.578-5.578 1.406-1.406 5.578 5.578 5.578-5.578z"
+          ></path>
+        </symbol>
+        <symbol id="icon-content_copy" viewBox="0 0 24 24">
+          <title>content_copy</title>
+          <path
+            d="M18.984 21v-14.016h-10.969v14.016h10.969zM18.984 5.016q0.797 0 1.406 0.586t0.609 1.383v14.016q0 0.797-0.609 1.406t-1.406 0.609h-10.969q-0.797 0-1.406-0.609t-0.609-1.406v-14.016q0-0.797 0.609-1.383t1.406-0.586h10.969zM15.984 0.984v2.016h-12v14.016h-1.969v-14.016q0-0.797 0.586-1.406t1.383-0.609h12z"
+          ></path>
+        </symbol>
+        <symbol id="icon-content_cut" viewBox="0 0 24 24">
+          <title>content_cut</title>
+          <path
+            d="M18.984 3h3v0.984l-6.984 7.031-2.016-2.016zM12 12.516q0.516 0 0.516-0.516t-0.516-0.516-0.516 0.516 0.516 0.516zM6 20.016q0.797 0 1.406-0.586t0.609-1.43-0.609-1.43-1.406-0.586-1.406 0.586-0.609 1.43 0.609 1.43 1.406 0.586zM6 8.016q0.797 0 1.406-0.586t0.609-1.43-0.609-1.43-1.406-0.586-1.406 0.586-0.609 1.43 0.609 1.43 1.406 0.586zM9.656 7.641l12.328 12.375v0.984h-3l-6.984-6.984-2.344 2.344q0.328 0.703 0.328 1.641 0 1.641-1.172 2.813t-2.813 1.172-2.813-1.172-1.172-2.813 1.172 [...]
+          ></path>
+        </symbol>
+        <symbol id="icon-content_paste" viewBox="0 0 24 24">
+          <title>content_paste</title>
+          <path
+            d="M18.984 20.016v-16.031h-1.969v3h-10.031v-3h-1.969v16.031h13.969zM12 2.016q-0.422 0-0.703 0.281t-0.281 0.703 0.281 0.703 0.703 0.281 0.703-0.281 0.281-0.703-0.281-0.703-0.703-0.281zM18.984 2.016q0.797 0 1.406 0.586t0.609 1.383v16.031q0 0.797-0.609 1.383t-1.406 0.586h-13.969q-0.797 0-1.406-0.586t-0.609-1.383v-16.031q0-0.797 0.609-1.383t1.406-0.586h4.172q0.328-0.891 1.078-1.453t1.734-0.563 1.734 0.563 1.078 1.453h4.172z"
+          ></path>
+        </symbol>
+        <symbol id="icon-createmode_editedit" viewBox="0 0 24 24">
+          <title>createmode_editedit</title>
+          <path
+            d="M20.719 7.031l-1.828 1.828-3.75-3.75 1.828-1.828q0.281-0.281 0.703-0.281t0.703 0.281l2.344 2.344q0.281 0.281 0.281 0.703t-0.281 0.703zM3 17.25l11.063-11.063 3.75 3.75-11.063 11.063h-3.75v-3.75z"
+          ></path>
+        </symbol>
+        <symbol id="icon-inbox" viewBox="0 0 24 24">
+          <title>inbox</title>
+          <path
+            d="M18.984 15v-9.984h-14.016v9.984h4.031q0 1.219 0.891 2.109t2.109 0.891 2.109-0.891 0.891-2.109h3.984zM18.984 3q0.844 0 1.43 0.586t0.586 1.43v13.969q0 0.797-0.609 1.406t-1.406 0.609h-14.016q-0.844 0-1.406-0.586t-0.563-1.43v-13.969q0-0.844 0.563-1.43t1.406-0.586h14.016z"
+          ></path>
+        </symbol>
+        <symbol id="icon-linkinsert_link" viewBox="0 0 24 24">
+          <title>linkinsert_link</title>
+          <path
+            d="M17.016 6.984q2.063 0 3.516 1.477t1.453 3.539-1.453 3.539-3.516 1.477h-4.031v-1.922h4.031q1.266 0 2.18-0.914t0.914-2.18-0.914-2.18-2.18-0.914h-4.031v-1.922h4.031zM8.016 12.984v-1.969h7.969v1.969h-7.969zM3.891 12q0 1.266 0.914 2.18t2.18 0.914h4.031v1.922h-4.031q-2.063 0-3.516-1.477t-1.453-3.539 1.453-3.539 3.516-1.477h4.031v1.922h-4.031q-1.266 0-2.18 0.914t-0.914 2.18z"
+          ></path>
+        </symbol>
+        <symbol id="icon-redo" viewBox="0 0 24 24">
+          <title>redo</title>
+          <path
+            d="M18.422 10.594l3.563-3.609v9h-9l3.656-3.609q-2.25-1.875-5.156-1.875-2.391 0-4.617 1.594t-2.977 3.891l-2.344-0.75q1.031-3.188 3.773-5.203t6.164-2.016q3.984 0 6.938 2.578z"
+          ></path>
+        </symbol>
+        <symbol id="icon-remove" viewBox="0 0 24 24">
+          <title>remove</title>
+          <path d="M18.984 12.984h-13.969v-1.969h13.969v1.969z"></path>
+        </symbol>
+        <symbol id="icon-remove_circledo_not_disturb_on" viewBox="0 0 24 24">
+          <title>remove_circledo_not_disturb_on</title>
+          <path
+            d="M17.016 12.984v-1.969h-10.031v1.969h10.031zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"
+          ></path>
+        </symbol>
+        <symbol id="icon-remove_circle_outline" viewBox="0 0 24 24">
+          <title>remove_circle_outline</title>
+          <path
+            d="M12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93zM6.984 11.016h10.031v1.969h-10.031v-1.969z"
+          ></path>
+        </symbol>
+        <symbol id="icon-reply" viewBox="0 0 24 24">
+          <title>reply</title>
+          <path
+            d="M9.984 9q4.875 0.703 7.523 3.727t3.492 7.289q-3.609-5.109-11.016-5.109v4.078l-6.984-6.984 6.984-6.984v3.984z"
+          ></path>
+        </symbol>
+        <symbol id="icon-reply_all" viewBox="0 0 24 24">
+          <title>reply_all</title>
+          <path
+            d="M12.984 9q4.875 0.703 7.523 3.727t3.492 7.289q-3.609-5.109-11.016-5.109v4.078l-6.984-6.984 6.984-6.984v3.984zM6.984 8.016l-3.984 3.984 3.984 3.984v3l-6.984-6.984 6.984-6.984v3z"
+          ></path>
+        </symbol>
+        <symbol id="icon-report" viewBox="0 0 24 24">
+          <title>report</title>
+          <path
+            d="M12.984 12.984v-6h-1.969v6h1.969zM12 17.297q0.516 0 0.914-0.398t0.398-0.914-0.398-0.891-0.914-0.375-0.914 0.375-0.398 0.891 0.398 0.914 0.914 0.398zM15.75 3l5.25 5.25v7.5l-5.25 5.25h-7.5l-5.25-5.25v-7.5l5.25-5.25h7.5z"
+          ></path>
+        </symbol>
+        <symbol id="icon-save" viewBox="0 0 24 24">
+          <title>save</title>
+          <path
+            d="M15 9v-3.984h-9.984v3.984h9.984zM12 18.984q1.219 0 2.109-0.891t0.891-2.109-0.891-2.109-2.109-0.891-2.109 0.891-0.891 2.109 0.891 2.109 2.109 0.891zM17.016 3l3.984 3.984v12q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.844 0-1.43-0.586t-0.586-1.43v-13.969q0-0.844 0.586-1.43t1.43-0.586h12z"
+          ></path>
+        </symbol>
+        <symbol id="icon-link_off" viewBox="0 0 24 24">
+          <title>link_off</title>
+          <path
+            d="M2.016 4.266l1.266-1.266 16.734 16.734-1.266 1.266-4.031-3.984h-1.734v-1.734l-2.25-2.297h-2.719v-1.969h0.703l-2.063-2.063q-1.172 0.141-1.969 1.008t-0.797 2.039q0 1.266 0.914 2.18t2.18 0.914h4.031v1.922h-4.031q-2.063 0-3.516-1.477t-1.453-3.539q0-1.406 0.891-2.766t2.203-1.875zM15.984 11.016v1.969h-0.188l-1.969-1.969h2.156zM17.016 6.984q2.063 0 3.516 1.477t1.453 3.539q0 3.047-2.719 4.453l-1.453-1.453q0.984-0.234 1.641-1.078t0.656-1.922q0-1.266-0.914-2.18t-2.18-0.914h-4.031v-1 [...]
+          ></path>
+        </symbol>
+        <symbol id="icon-save_alt" viewBox="0 0 24 24">
+          <title>save_alt</title>
+          <path
+            d="M12.984 12.656l2.625-2.578 1.406 1.406-5.016 5.016-5.016-5.016 1.406-1.406 2.625 2.578v-9.656h1.969v9.656zM18.984 12h2.016v6.984q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-6.984h2.016v6.984h13.969v-6.984z"
+          ></path>
+        </symbol>
+        <symbol id="icon-add_link" viewBox="0 0 24 24">
+          <title>add_link</title>
+          <path
+            d="M18.984 12v3h3v2.016h-3v3h-1.969v-3h-3v-2.016h3v-3h1.969zM3.891 12q0 1.266 0.914 2.18t2.18 0.914h4.031v1.922h-4.031q-2.063 0-3.516-1.477t-1.453-3.539 1.453-3.539 3.516-1.477h4.031v1.922h-4.031q-1.266 0-2.18 0.914t-0.914 2.18zM20.109 12q0-1.266-0.914-2.18t-2.18-0.914h-4.031v-1.922h4.031q2.063 0 3.516 1.477t1.453 3.539h-1.875zM8.016 11.016h7.969v1.969h-7.969v-1.969z"
+          ></path>
+        </symbol>
+        <symbol id="icon-access_timequery_builderschedule" viewBox="0 0 24 24">
+          <title>access_timequery_builderschedule</title>
+          <path
+            d="M12.516 6.984v5.25l4.5 2.672-0.75 1.266-5.25-3.188v-6h1.5zM12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"
+          ></path>
+        </symbol>
+        <symbol id="icon-data_usage" viewBox="0 0 24 24">
+          <title>data_usage</title>
+          <path
+            d="M12 18.984q1.359 0 2.953-0.773t2.484-1.852l2.625 1.547q-3 4.078-8.063 4.078-4.125 0-7.055-2.93t-2.93-7.055q0-3.891 2.602-6.727t6.398-3.211v3q-2.531 0.375-4.266 2.344t-1.734 4.594q0 2.906 2.039 4.945t4.945 2.039zM12.984 2.063q3.797 0.375 6.398 3.211t2.602 6.727q0 2.25-0.844 4.078l-2.625-1.547q0.469-1.313 0.469-2.531 0-2.625-1.734-4.594t-4.266-2.344v-3z"
+          ></path>
+        </symbol>
+        <symbol id="icon-storage" viewBox="0 0 24 24">
+          <title>storage</title>
+          <path
+            d="M3.984 11.016v1.969h2.016v-1.969h-2.016zM2.016 14.016v-4.031h19.969v4.031h-19.969zM6 6.984v-1.969h-2.016v1.969h2.016zM2.016 3.984h19.969v4.031h-19.969v-4.031zM3.984 17.016v1.969h2.016v-1.969h-2.016zM2.016 20.016v-4.031h19.969v4.031h-19.969z"
+          ></path>
+        </symbol>
+        <symbol id="icon-signal_cellular_alt" viewBox="0 0 24 24">
+          <title>signal_cellular_alt</title>
+          <path
+            d="M11.016 9h3v11.016h-3v-11.016zM5.016 14.016h3v6h-3v-6zM17.016 3.984h3v16.031h-3v-16.031z"
+          ></path>
+        </symbol>
+        <symbol id="icon-border_color" viewBox="0 0 24 24">
+          <title>border_color</title>
+          <path
+            d="M0 20.016h24v3.984h-24v-3.984zM20.719 4.031l-1.969 1.969-3.75-3.75 1.969-1.969q0.281-0.281 0.703-0.281t0.703 0.281l2.344 2.344q0.281 0.281 0.281 0.703t-0.281 0.703zM17.766 6.984l-10.031 10.031h-3.75v-3.75l10.031-10.031z"
+          ></path>
+        </symbol>
+        <symbol id="icon-format_indent_decrease" viewBox="0 0 24 24">
+          <title>format_indent_decrease</title>
+          <path
+            d="M11.016 12.984v-1.969h9.984v1.969h-9.984zM11.016 9v-2.016h9.984v2.016h-9.984zM3 3h18v2.016h-18v-2.016zM3 21v-2.016h18v2.016h-18zM3 12l3.984-3.984v7.969zM11.016 17.016v-2.016h9.984v2.016h-9.984z"
+          ></path>
+        </symbol>
+        <symbol id="icon-format_indent_increase" viewBox="0 0 24 24">
+          <title>format_indent_increase</title>
+          <path
+            d="M11.016 12.984v-1.969h9.984v1.969h-9.984zM11.016 9v-2.016h9.984v2.016h-9.984zM3 3h18v2.016h-18v-2.016zM11.016 17.016v-2.016h9.984v2.016h-9.984zM3 8.016l3.984 3.984-3.984 3.984v-7.969zM3 21v-2.016h18v2.016h-18z"
+          ></path>
+        </symbol>
+        <symbol id="icon-insert_chartpollassessment" viewBox="0 0 24 24">
+          <title>insert_chartpollassessment</title>
+          <path
+            d="M17.016 17.016v-4.031h-2.016v4.031h2.016zM12.984 17.016v-10.031h-1.969v10.031h1.969zM9 17.016v-7.031h-2.016v7.031h2.016zM18.984 3q0.797 0 1.406 0.609t0.609 1.406v13.969q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-13.969q0-0.797 0.609-1.406t1.406-0.609h13.969z"
+          ></path>
+        </symbol>
+        <symbol id="icon-insert_drive_file" viewBox="0 0 24 24">
+          <title>insert_drive_file</title>
+          <path
+            d="M12.984 9h5.531l-5.531-5.484v5.484zM6 2.016h8.016l6 6v12q0 0.797-0.609 1.383t-1.406 0.586h-12q-0.797 0-1.406-0.586t-0.609-1.383l0.047-16.031q0-0.797 0.586-1.383t1.383-0.586z"
+          ></path>
+        </symbol>
+        <symbol id="icon-insert_photoimagephoto" viewBox="0 0 24 24">
+          <title>insert_photoimagephoto</title>
+          <path
+            d="M8.484 13.5l-3.469 4.5h13.969l-4.5-6-3.469 4.5zM21 18.984q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-13.969q0-0.797 0.609-1.406t1.406-0.609h13.969q0.797 0 1.406 0.609t0.609 1.406v13.969z"
+          ></path>
+        </symbol>
+        <symbol id="icon-publish" viewBox="0 0 24 24">
+          <title>publish</title>
+          <path
+            d="M5.016 14.016l6.984-7.031 6.984 7.031h-3.984v6h-6v-6h-3.984zM5.016 3.984h13.969v2.016h-13.969v-2.016z"
+          ></path>
+        </symbol>
+        <symbol id="icon-linear_scale" viewBox="0 0 24 24">
+          <title>linear_scale</title>
+          <path
+            d="M19.5 9.516q1.031 0 1.758 0.727t0.727 1.758-0.727 1.758-1.758 0.727q-1.688 0-2.297-1.5h-2.906q-0.609 1.5-2.297 1.5t-2.297-1.5h-2.906q-0.609 1.5-2.297 1.5-1.031 0-1.758-0.727t-0.727-1.758 0.727-1.758 1.758-0.727q1.688 0 2.297 1.5h2.906q0.609-1.5 2.297-1.5t2.297 1.5h2.906q0.609-1.5 2.297-1.5z"
+          ></path>
+        </symbol>
+        <symbol id="icon-scatter_plot" viewBox="0 0 24 24">
+          <title>scatter_plot</title>
+          <path
+            d="M13.594 17.578q0-1.219 0.891-2.109t2.109-0.891 2.109 0.891 0.891 2.109-0.891 2.109-2.109 0.891-2.109-0.891-0.891-2.109zM8.016 6q0-1.219 0.891-2.109t2.109-0.891 2.109 0.891 0.891 2.109-0.891 2.109-2.109 0.891-2.109-0.891-0.891-2.109zM3.984 14.016q0-1.219 0.891-2.109t2.109-0.891 2.109 0.891 0.891 2.109-0.891 2.109-2.109 0.891-2.109-0.891-0.891-2.109z"
+          ></path>
+        </symbol>
+        <symbol id="icon-bar_chart" viewBox="0 0 24 24">
+          <title>bar_chart</title>
+          <path
+            d="M16.219 12.984h2.766v6h-2.766v-6zM10.594 5.016h2.813v13.969h-2.813v-13.969zM5.016 9.188h3v9.797h-3v-9.797z"
+          ></path>
+        </symbol>
+        <symbol id="icon-cloud_queue" viewBox="0 0 24 24">
+          <title>cloud_queue</title>
+          <path
+            d="M18.984 18q1.219 0 2.109-0.891t0.891-2.109-0.891-2.109-2.109-0.891h-1.5v-0.516q0-2.297-1.594-3.891t-3.891-1.594q-1.875 0-3.328 1.125t-1.969 2.859h-0.703q-1.641 0-2.813 1.195t-1.172 2.836 1.172 2.813 2.813 1.172h12.984zM19.359 10.031q1.922 0.141 3.281 1.57t1.359 3.398q0 2.063-1.477 3.539t-3.539 1.477h-12.984q-2.484 0-4.242-1.758t-1.758-4.242q0-2.203 1.57-3.961t3.773-1.992q0.984-1.828 2.766-2.953t3.891-1.125q2.531 0 4.711 1.781t2.648 4.266z"
+          ></path>
+        </symbol>
+        <symbol id="icon-file_downloadget_app" viewBox="0 0 24 24">
+          <title>file_downloadget_app</title>
+          <path
+            d="M5.016 18h13.969v2.016h-13.969v-2.016zM18.984 9l-6.984 6.984-6.984-6.984h3.984v-6h6v6h3.984z"
+          ></path>
+        </symbol>
+        <symbol id="icon-file_upload" viewBox="0 0 24 24">
+          <title>file_upload</title>
+          <path
+            d="M5.016 18h13.969v2.016h-13.969v-2.016zM9 15.984v-6h-3.984l6.984-6.984 6.984 6.984h-3.984v6h-6z"
+          ></path>
+        </symbol>
+        <symbol id="icon-folder" viewBox="0 0 24 24">
+          <title>folder</title>
+          <path
+            d="M9.984 3.984l2.016 2.016h8.016q0.797 0 1.383 0.609t0.586 1.406v9.984q0 0.797-0.586 1.406t-1.383 0.609h-16.031q-0.797 0-1.383-0.609t-0.586-1.406v-12q0-0.797 0.586-1.406t1.383-0.609h6z"
+          ></path>
+        </symbol>
+        <symbol id="icon-folder_open" viewBox="0 0 24 24">
+          <title>folder_open</title>
+          <path
+            d="M20.016 18v-9.984h-16.031v9.984h16.031zM20.016 6q0.797 0 1.383 0.609t0.586 1.406v9.984q0 0.797-0.586 1.406t-1.383 0.609h-16.031q-0.797 0-1.383-0.609t-0.586-1.406v-12q0-0.797 0.586-1.406t1.383-0.609h6l2.016 2.016h8.016z"
+          ></path>
+        </symbol>
+        <symbol id="icon-create_new_folder" viewBox="0 0 24 24">
+          <title>create_new_folder</title>
+          <path
+            d="M18.984 14.016v-2.016h-3v-3h-1.969v3h-3v2.016h3v3h1.969v-3h3zM20.016 6q0.844 0 1.406 0.586t0.563 1.43v9.984q0 0.844-0.563 1.43t-1.406 0.586h-16.031q-0.844 0-1.406-0.586t-0.563-1.43v-12q0-0.844 0.563-1.43t1.406-0.586h6l2.016 2.016h8.016z"
+          ></path>
+        </symbol>
+        <symbol id="icon-keyboard_arrow_down" viewBox="0 0 24 24">
+          <title>keyboard_arrow_down</title>
+          <path
+            d="M7.406 8.578l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z"
+          ></path>
+        </symbol>
+        <symbol id="icon-keyboard_arrow_left" viewBox="0 0 24 24">
+          <title>keyboard_arrow_left</title>
+          <path
+            d="M15.422 16.594l-1.406 1.406-6-6 6-6 1.406 1.406-4.594 4.594z"
+          ></path>
+        </symbol>
+        <symbol id="icon-keyboard_arrow_right" viewBox="0 0 24 24">
+          <title>keyboard_arrow_right</title>
+          <path
+            d="M8.578 16.594l4.594-4.594-4.594-4.594 1.406-1.406 6 6-6 6z"
+          ></path>
+        </symbol>
+        <symbol id="icon-keyboard_arrow_up" viewBox="0 0 24 24">
+          <title>keyboard_arrow_up</title>
+          <path
+            d="M7.406 15.422l-1.406-1.406 6-6 6 6-1.406 1.406-4.594-4.594z"
+          ></path>
+        </symbol>
+        <symbol id="icon-keyboard_backspace" viewBox="0 0 24 24">
+          <title>keyboard_backspace</title>
+          <path
+            d="M21 11.016v1.969h-14.156l3.563 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.563 3.609h14.156z"
+          ></path>
+        </symbol>
+        <symbol id="icon-keyboard_return" viewBox="0 0 24 24">
+          <title>keyboard_return</title>
+          <path
+            d="M18.984 6.984h2.016v6h-15.188l3.609 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.609 3.609h13.172v-4.031z"
+          ></path>
+        </symbol>
+        <symbol id="icon-keyboard_tab" viewBox="0 0 24 24">
+          <title>keyboard_tab</title>
+          <path
+            d="M20.016 6h1.969v12h-1.969v-12zM11.578 7.406l1.406-1.406 6 6-6 6-1.406-1.406 3.609-3.609h-14.203v-1.969h14.203z"
+          ></path>
+        </symbol>
+        <symbol id="icon-device_hub" viewBox="0 0 24 24">
+          <title>device_hub</title>
+          <path
+            d="M17.016 15.984h3.984v5.016h-5.016v-3.047l-3.984-4.219-3.984 4.219v3.047h-5.016v-5.016h3.984l4.031-3.984v-3.188q-0.891-0.328-1.453-1.078t-0.563-1.734q0-1.219 0.891-2.109t2.109-0.891 2.109 0.891 0.891 2.109q0 0.984-0.563 1.734t-1.453 1.078v3.188z"
+          ></path>
+        </symbol>
+        <symbol id="icon-arrow_drop_down" viewBox="0 0 24 24">
+          <title>arrow_drop_down</title>
+          <path d="M6.984 9.984h10.031l-5.016 5.016z"></path>
+        </symbol>
+        <symbol id="icon-arrow_drop_up" viewBox="0 0 24 24">
+          <title>arrow_drop_up</title>
+          <path d="M6.984 14.016l5.016-5.016 5.016 5.016h-10.031z"></path>
+        </symbol>
+        <symbol id="icon-cancel" viewBox="0 0 24 24">
+          <title>cancel</title>
+          <path
+            d="M17.016 15.609l-3.609-3.609 3.609-3.609-1.406-1.406-3.609 3.609-3.609-3.609-1.406 1.406 3.609 3.609-3.609 3.609 1.406 1.406 3.609-3.609 3.609 3.609zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"
+          ></path>
+        </symbol>
+        <symbol id="icon-keyboard_control" viewBox="0 0 24 24">
+          <title>keyboard_control</title>
+          <path
+            d="M12 9.984q0.797 0 1.406 0.609t0.609 1.406-0.609 1.406-1.406 0.609-1.406-0.609-0.609-1.406 0.609-1.406 1.406-0.609zM18 9.984q0.797 0 1.406 0.609t0.609 1.406-0.609 1.406-1.406 0.609-1.406-0.609-0.609-1.406 0.609-1.406 1.406-0.609zM6 9.984q0.797 0 1.406 0.609t0.609 1.406-0.609 1.406-1.406 0.609-1.406-0.609-0.609-1.406 0.609-1.406 1.406-0.609z"
+          ></path>
+        </symbol>
+        <symbol id="icon-refresh" viewBox="0 0 24 24">
+          <title>refresh</title>
+          <path
+            d="M17.672 6.328l2.344-2.344v7.031h-7.031l3.234-3.234q-1.781-1.781-4.219-1.781-2.484 0-4.242 1.758t-1.758 4.242 1.758 4.242 4.242 1.758q1.734 0 3.398-1.172t2.273-2.813h2.063q-0.656 2.625-2.813 4.313t-4.922 1.688q-3.281 0-5.625-2.344t-2.344-5.672 2.344-5.672 5.625-2.344q1.406 0 3.070 0.68t2.602 1.664z"
+          ></path>
+        </symbol>
+        <symbol id="icon-unfold_more" viewBox="0 0 24 24">
+          <title>unfold_more</title>
+          <path
+            d="M12 18.188l3.188-3.188 1.406 1.406-4.594 4.594-4.594-4.594 1.406-1.406zM12 5.813l-3.188 3.188-1.406-1.406 4.594-4.594 4.594 4.594-1.406 1.406z"
+          ></path>
+        </symbol>
+        <symbol id="icon-arrow_left" viewBox="0 0 24 24">
+          <title>arrow_left</title>
+          <path d="M14.016 6.984v10.031l-5.016-5.016z"></path>
+        </symbol>
+        <symbol id="icon-arrow_right" viewBox="0 0 24 24">
+          <title>arrow_right</title>
+          <path d="M9.984 17.016v-10.031l5.016 5.016z"></path>
+        </symbol>
+        <symbol id="icon-arrow_back_ios" viewBox="0 0 24 24">
+          <title>arrow_back_ios</title>
+          <path
+            d="M11.672 3.891l-8.109 8.109 8.109 8.109-1.781 1.781-9.891-9.891 9.891-9.891z"
+          ></path>
+        </symbol>
+        <symbol id="icon-arrow_forward_ios" viewBox="0 0 24 24">
+          <title>arrow_forward_ios</title>
+          <path
+            d="M5.859 4.125l2.156-2.109 9.984 9.984-9.984 9.984-2.156-2.109 7.922-7.875z"
+          ></path>
+        </symbol>
+        <symbol id="icon-notifications" viewBox="0 0 24 24">
+          <title>notifications</title>
+          <path
+            d="M18 15.984l2.016 2.016v0.984h-16.031v-0.984l2.016-2.016v-4.969q0-2.344 1.195-4.078t3.305-2.25v-0.703q0-0.609 0.422-1.055t1.078-0.445 1.078 0.445 0.422 1.055v0.703q2.109 0.516 3.305 2.25t1.195 4.078v4.969zM12 21.984q-0.844 0-1.43-0.563t-0.586-1.406h4.031q0 0.797-0.609 1.383t-1.406 0.586z"
+          ></path>
+        </symbol>
+        <symbol id="icon-notifications_none" viewBox="0 0 24 24">
+          <title>notifications_none</title>
+          <path
+            d="M15.984 17.016v-6q0-1.922-1.078-3.211t-2.906-1.289-2.906 1.289-1.078 3.211v6h7.969zM18 15.984l2.016 2.016v0.984h-16.031v-0.984l2.016-2.016v-4.969q0-2.344 1.195-4.078t3.305-2.25v-0.703q0-0.609 0.422-1.055t1.078-0.445 1.078 0.445 0.422 1.055v0.703q2.109 0.516 3.305 2.25t1.195 4.078v4.969zM12 21.984q-0.797 0-1.406-0.586t-0.609-1.383h4.031q0 0.797-0.609 1.383t-1.406 0.586z"
+          ></path>
+        </symbol>
+        <symbol id="icon-notifications_off" viewBox="0 0 24 24">
+          <title>notifications_off</title>
+          <path
+            d="M18 14.672l-8.953-9.422q0.141-0.047 0.375-0.164l0.328-0.164h0.047l0.281-0.141q0.047 0 0.188-0.047t0.234-0.047v-0.703q0-0.609 0.422-1.055t1.078-0.445 1.078 0.445 0.422 1.055v0.703q2.109 0.516 3.305 2.25t1.195 4.078v3.656zM12 21.984q-0.844 0-1.43-0.563t-0.586-1.406h4.031q0 0.844-0.586 1.406t-1.43 0.563zM7.828 6.141q1.125 1.172 5.883 6.047t7.289 7.547l-1.266 1.266-2.016-2.016h-13.734v-0.984l2.016-2.016v-5.016q0-1.922 0.797-3.422l-2.813-2.766 1.266-1.313z"
+          ></path>
+        </symbol>
+        <symbol id="icon-check_box" viewBox="0 0 24 24">
+          <title>check_box</title>
+          <path
+            d="M9.984 17.016l9-9-1.406-1.453-7.594 7.594-3.563-3.563-1.406 1.406zM18.984 3q0.844 0 1.43 0.586t0.586 1.43v13.969q0 0.844-0.586 1.43t-1.43 0.586h-13.969q-0.844 0-1.43-0.586t-0.586-1.43v-13.969q0-0.844 0.586-1.43t1.43-0.586h13.969z"
+          ></path>
+        </symbol>
+        <symbol id="icon-check_box_outline_blank" viewBox="0 0 24 24">
+          <title>check_box_outline_blank</title>
+          <path
+            d="M18.984 3q0.797 0 1.406 0.609t0.609 1.406v13.969q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-13.969q0-0.797 0.609-1.406t1.406-0.609h13.969zM18.984 5.016h-13.969v13.969h13.969v-13.969z"
+          ></path>
+        </symbol>
+        <symbol id="icon-assignment" viewBox="0 0 24 24">
+          <title>assignment</title>
+          <path
+            d="M17.016 9v-2.016h-10.031v2.016h10.031zM17.016 12.984v-1.969h-10.031v1.969h10.031zM14.016 17.016v-2.016h-7.031v2.016h7.031zM12 3q-0.422 0-0.703 0.281t-0.281 0.703 0.281 0.727 0.703 0.305 0.703-0.305 0.281-0.727-0.281-0.703-0.703-0.281zM18.984 3q0.797 0 1.406 0.609t0.609 1.406v13.969q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-13.969q0-0.797 0.609-1.406t1.406-0.609h4.172q0.328-0.891 1.078-1.453t1.734-0.563 1.734 0.563 1.078 1.453h4.172z"
+          ></path>
+        </symbol>
+        <symbol id="icon-cached" viewBox="0 0 24 24">
+          <title>cached</title>
+          <path
+            d="M6 12h3l-3.984 3.984-4.031-3.984h3q0-3.281 2.367-5.648t5.648-2.367q2.344 0 4.266 1.266l-1.453 1.453q-1.266-0.703-2.813-0.703-2.484 0-4.242 1.758t-1.758 4.242zM18.984 8.016l4.031 3.984h-3q0 3.281-2.367 5.648t-5.648 2.367q-2.344 0-4.266-1.266l1.453-1.453q1.313 0.703 2.813 0.703 2.484 0 4.242-1.758t1.758-4.242h-3z"
+          ></path>
+        </symbol>
+        <symbol id="icon-code" viewBox="0 0 24 24">
+          <title>code</title>
+          <path
+            d="M14.578 16.594l4.641-4.594-4.641-4.594 1.406-1.406 6 6-6 6zM9.422 16.594l-1.406 1.406-6-6 6-6 1.406 1.406-4.641 4.594z"
+          ></path>
+        </symbol>
+        <symbol id="icon-description" viewBox="0 0 24 24">
+          <title>description</title>
+          <path
+            d="M12.984 9h5.531l-5.531-5.484v5.484zM15.984 14.016v-2.016h-7.969v2.016h7.969zM15.984 18v-2.016h-7.969v2.016h7.969zM14.016 2.016l6 6v12q0 0.797-0.609 1.383t-1.406 0.586h-12q-0.797 0-1.406-0.586t-0.609-1.383l0.047-16.031q0-0.797 0.586-1.383t1.383-0.586h8.016z"
+          ></path>
+        </symbol>
+        <symbol id="icon-dns" viewBox="0 0 24 24">
+          <title>dns</title>
+          <path
+            d="M6.984 9q0.797 0 1.406-0.609t0.609-1.406-0.609-1.383-1.406-0.586-1.383 0.586-0.586 1.383 0.586 1.406 1.383 0.609zM20.016 3q0.422 0 0.703 0.281t0.281 0.703v6q0 0.422-0.281 0.727t-0.703 0.305h-16.031q-0.422 0-0.703-0.305t-0.281-0.727v-6q0-0.422 0.281-0.703t0.703-0.281h16.031zM6.984 18.984q0.797 0 1.406-0.586t0.609-1.383-0.609-1.406-1.406-0.609-1.383 0.609-0.586 1.406 0.586 1.383 1.383 0.586zM20.016 12.984q0.422 0 0.703 0.305t0.281 0.727v6q0 0.422-0.281 0.703t-0.703 0.281h-16 [...]
+          ></path>
+        </symbol>
+        <symbol id="icon-help" viewBox="0 0 24 24">
+          <title>help</title>
+          <path
+            d="M15.047 11.25q0.938-0.938 0.938-2.25 0-1.641-1.172-2.813t-2.813-1.172-2.813 1.172-1.172 2.813h1.969q0-0.797 0.609-1.406t1.406-0.609 1.406 0.609 0.609 1.406-0.609 1.406l-1.219 1.266q-1.172 1.266-1.172 2.813v0.516h1.969q0-1.547 1.172-2.813zM12.984 18.984v-1.969h-1.969v1.969h1.969zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"
+          ></path>
+        </symbol>
+        <symbol id="icon-highlight_remove" viewBox="0 0 24 24">
+          <title>highlight_remove</title>
+          <path
+            d="M12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93zM14.578 8.016l1.406 1.406-2.578 2.578 2.578 2.578-1.406 1.406-2.578-2.578-2.578 2.578-1.406-1.406 2.578-2.578-2.578-2.578 1.406-1.406 2.578 2.578z"
+          ></path>
+        </symbol>
+        <symbol id="icon-info" viewBox="0 0 24 24">
+          <title>info</title>
+          <path
+            d="M12.984 9v-2.016h-1.969v2.016h1.969zM12.984 17.016v-6h-1.969v6h1.969zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"
+          ></path>
+        </symbol>
+        <symbol id="icon-info_outline" viewBox="0 0 24 24">
+          <title>info_outline</title>
+          <path
+            d="M11.016 9v-2.016h1.969v2.016h-1.969zM12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93zM11.016 17.016v-6h1.969v6h-1.969z"
+          ></path>
+        </symbol>
+        <symbol id="icon-language" viewBox="0 0 24 24">
+          <title>language</title>
+          <path
+            d="M16.359 14.016h3.375q0.281-1.313 0.281-2.016t-0.281-2.016h-3.375q0.141 0.984 0.141 2.016t-0.141 2.016zM14.578 19.547q1.172-0.375 2.438-1.43t1.922-2.133h-2.953q-0.469 1.875-1.406 3.563zM14.344 14.016q0.141-0.984 0.141-2.016t-0.141-2.016h-4.688q-0.141 0.984-0.141 2.016t0.141 2.016h4.688zM12 19.969q1.313-1.922 1.922-3.984h-3.844q0.609 2.063 1.922 3.984zM8.016 8.016q0.563-2.016 1.406-3.563-1.172 0.375-2.461 1.43t-1.898 2.133h2.953zM5.063 15.984q0.609 1.078 1.898 2.133t2.461 1. [...]
+          ></path>
+        </symbol>
+        <symbol id="icon-lock_open" viewBox="0 0 24 24">
+          <title>lock_open</title>
+          <path
+            d="M18 20.016v-10.031h-12v10.031h12zM18 8.016q0.797 0 1.406 0.586t0.609 1.383v10.031q0 0.797-0.609 1.383t-1.406 0.586h-12q-0.797 0-1.406-0.586t-0.609-1.383v-10.031q0-0.797 0.609-1.383t1.406-0.586h9.094v-2.016q0-1.266-0.914-2.18t-2.18-0.914-2.18 0.914-0.914 2.18h-1.922q0-2.063 1.477-3.539t3.539-1.477 3.539 1.477 1.477 3.539v2.016h0.984zM12 17.016q-0.797 0-1.406-0.609t-0.609-1.406 0.609-1.406 1.406-0.609 1.406 0.609 0.609 1.406-0.609 1.406-1.406 0.609z"
+          ></path>
+        </symbol>
+        <symbol id="icon-lock_outline" viewBox="0 0 24 24">
+          <title>lock_outline</title>
+          <path
+            d="M18 20.016v-10.031h-12v10.031h12zM8.906 6v2.016h6.188v-2.016q0-1.266-0.914-2.18t-2.18-0.914-2.18 0.914-0.914 2.18zM18 8.016q0.797 0 1.406 0.586t0.609 1.383v10.031q0 0.797-0.609 1.383t-1.406 0.586h-12q-0.797 0-1.406-0.586t-0.609-1.383v-10.031q0-0.797 0.609-1.383t1.406-0.586h0.984v-2.016q0-2.063 1.477-3.539t3.539-1.477 3.539 1.477 1.477 3.539v2.016h0.984zM12 17.016q-0.797 0-1.406-0.609t-0.609-1.406 0.609-1.406 1.406-0.609 1.406 0.609 0.609 1.406-0.609 1.406-1.406 0.609z"
+          ></path>
+        </symbol>
+        <symbol id="icon-search" viewBox="0 0 24 24">
+          <title>search</title>
+          <path
+            d="M9.516 14.016q1.875 0 3.188-1.313t1.313-3.188-1.313-3.188-3.188-1.313-3.188 1.313-1.313 3.188 1.313 3.188 3.188 1.313zM15.516 14.016l4.969 4.969-1.5 1.5-4.969-4.969v-0.797l-0.281-0.281q-1.781 1.547-4.219 1.547-2.719 0-4.617-1.875t-1.898-4.594 1.898-4.617 4.617-1.898 4.594 1.898 1.875 4.617q0 0.984-0.469 2.227t-1.078 1.992l0.281 0.281h0.797z"
+          ></path>
+        </symbol>
+        <symbol id="icon-settings" viewBox="0 0 24 24">
+          <title>settings</title>
+          <path
+            d="M12 15.516q1.453 0 2.484-1.031t1.031-2.484-1.031-2.484-2.484-1.031-2.484 1.031-1.031 2.484 1.031 2.484 2.484 1.031zM19.453 12.984l2.109 1.641q0.328 0.234 0.094 0.656l-2.016 3.469q-0.188 0.328-0.609 0.188l-2.484-0.984q-0.984 0.703-1.688 0.984l-0.375 2.625q-0.094 0.422-0.469 0.422h-4.031q-0.375 0-0.469-0.422l-0.375-2.625q-0.891-0.375-1.688-0.984l-2.484 0.984q-0.422 0.141-0.609-0.188l-2.016-3.469q-0.234-0.422 0.094-0.656l2.109-1.641q-0.047-0.328-0.047-0.984t0.047-0.984l-2.109 [...]
+          ></path>
+        </symbol>
+        <symbol id="icon-settings_ethernet" viewBox="0 0 24 24">
+          <title>settings_ethernet</title>
+          <path
+            d="M17.766 5.484l5.438 6.516-5.438 6.516-1.547-1.266 4.359-5.25-4.359-5.25zM11.016 12.984v-1.969h1.969v1.969h-1.969zM17.016 11.016v1.969h-2.016v-1.969h2.016zM6.984 12.984v-1.969h2.016v1.969h-2.016zM7.781 6.75l-4.359 5.25 4.359 5.25-1.547 1.266-5.438-6.516 5.438-6.516z"
+          ></path>
+        </symbol>
+        <symbol id="icon-donut_small" viewBox="0 0 24 24">
+          <title>donut_small</title>
+          <path
+            d="M12.984 14.859q1.266-0.375 1.875-1.875h7.125q-0.375 3.609-2.836 6.141t-6.164 2.859v-7.125zM14.859 11.016q-0.563-1.5-1.875-1.875v-7.125q3.703 0.328 6.164 2.859t2.836 6.141h-7.125zM11.016 9.141q-0.797 0.328-1.406 1.125t-0.609 1.734 0.609 1.734 1.406 1.125v7.125q-3.797-0.375-6.398-3.234t-2.602-6.75 2.602-6.75 6.398-3.234v7.125z"
+          ></path>
+        </symbol>
+        <symbol id="icon-timeline" viewBox="0 0 24 24">
+          <title>timeline</title>
+          <path
+            d="M23.016 8.016q0 0.797-0.609 1.383t-1.406 0.586h-0.047q-0.328 0-0.469-0.047l-3.563 3.563q0.094 0.281 0.094 0.516 0 0.797-0.609 1.383t-1.406 0.586-1.406-0.586-0.609-1.383q0-0.234 0.094-0.516l-2.578-2.578q-0.281 0.094-0.516 0.094t-0.516-0.094l-4.547 4.547q0.094 0.281 0.094 0.516 0 0.797-0.609 1.406t-1.406 0.609-1.406-0.609-0.609-1.406 0.609-1.383 1.406-0.586q0.375 0 0.516 0.047l4.547-4.547q-0.047-0.141-0.047-0.516 0-0.797 0.586-1.406t1.383-0.609 1.406 0.609 0.609 1.406q0 0.37 [...]
+          ></path>
+        </symbol>
+        <symbol id="icon-account_tree" viewBox="0 0 24 24">
+          <title>account_tree</title>
+          <path
+            d="M21.984 11.016h-6.984v-3h-2.016v7.969h2.016v-3h6.984v8.016h-6.984v-3h-3.984v-9.984h-2.016v3h-6.984v-8.016h6.984v3h6v-3h6.984v8.016z"
+          ></path>
+        </symbol>
+        <symbol id="icon-all_inbox" viewBox="0 0 24 24">
+          <title>all_inbox</title>
+          <path
+            d="M15 15.984h6v3q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-3h6q0 1.219 0.891 2.109t2.109 0.891 2.109-0.891 0.891-2.109zM18.984 9v-3.984h-13.969v3.984h3.984q0 1.219 0.891 2.109t2.109 0.891 2.109-0.891 0.891-2.109h3.984zM18.984 3q0.797 0 1.406 0.609t0.609 1.406v6.984q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-6.984q0-0.797 0.609-1.406t1.406-0.609h13.969z"
+          ></path>
+        </symbol>
+        <symbol id="icon-dashboard_customize" viewBox="0 0 24 24">
+          <title>dashboard_customize</title>
+          <path
+            d="M18 12.984v3h3v2.016h-3v3h-2.016v-3h-3v-2.016h3v-3h2.016zM3 12.984h8.016v8.016h-8.016v-8.016zM12.984 3h8.016v8.016h-8.016v-8.016zM3 3h8.016v8.016h-8.016v-8.016z"
+          ></path>
+        </symbol>
+        <symbol id="icon-speed" viewBox="0 0 24 24">
+          <title>speed</title>
+          <path
+            d="M12 15.984q-0.797 0-1.406-0.586t-0.609-1.383q0-0.844 0.609-1.453l8.484-5.625-5.672 8.484q-0.563 0.563-1.406 0.563zM20.391 8.578q0.656 1.031 1.125 2.625t0.469 2.813q0 2.766-1.313 4.969-0.609 1.031-1.734 1.031h-13.875q-1.125 0-1.734-1.031-1.313-2.203-1.313-4.969 0-4.125 2.93-7.055t7.102-2.93q1.219 0 2.789 0.469t2.602 1.125l-1.875 1.219q-1.688-0.844-3.563-0.844-3.281 0-5.648 2.344t-2.367 5.672q0 2.156 1.078 3.984h13.875q1.078-1.828 1.078-3.984 0-1.922-0.844-3.609z"
+          ></path>
+        </symbol>
+        <symbol id="icon-sync_alt" viewBox="0 0 24 24">
+          <title>sync_alt</title>
+          <path
+            d="M2.016 15.984l3.984-3.984v3h15v2.016h-15v3zM21.984 8.016l-3.984 3.984v-3h-15v-2.016h15v-3z"
+          ></path>
+        </symbol>
+      </defs>
     </svg>
     <div class="clearfix mhl ptl">
-        <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-error">
-                    <use xlink:href="#icon-error"></use>
-                </svg><span class="name"> error</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-error_outline">
-                    <use xlink:href="#icon-error_outline"></use>
-                </svg><span class="name"> error_outline</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-warningreport_problem">
-                    <use xlink:href="#icon-warningreport_problem"></use>
-                </svg><span class="name"> warningreport_problem</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-notification_important">
-                    <use xlink:href="#icon-notification_important"></use>
-                </svg><span class="name"> notification_important</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-av_timer">
-                    <use xlink:href="#icon-av_timer"></use>
-                </svg><span class="name"> av_timer</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-equalizer">
-                    <use xlink:href="#icon-equalizer"></use>
-                </svg><span class="name"> equalizer</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-loopsync">
-                    <use xlink:href="#icon-loopsync"></use>
-                </svg><span class="name"> loopsync</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-library_addqueueadd_to_photos">
-                    <use xlink:href="#icon-library_addqueueadd_to_photos"></use>
-                </svg><span class="name"> library_addqueueadd_to_photos</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-library_books">
-                    <use xlink:href="#icon-library_books"></use>
-                </svg><span class="name"> library_books</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-not_interesteddo_not_disturb">
-                    <use xlink:href="#icon-not_interesteddo_not_disturb"></use>
-                </svg><span class="name"> not_interesteddo_not_disturb</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-playlist_add">
-                    <use xlink:href="#icon-playlist_add"></use>
-                </svg><span class="name"> playlist_add</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-repeat">
-                    <use xlink:href="#icon-repeat"></use>
-                </svg><span class="name"> repeat</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-replay">
-                    <use xlink:href="#icon-replay"></use>
-                </svg><span class="name"> replay</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-slow_motion_video">
-                    <use xlink:href="#icon-slow_motion_video"></use>
-                </svg><span class="name"> slow_motion_video</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-import_export">
-                    <use xlink:href="#icon-import_export"></use>
-                </svg><span class="name"> import_export</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-location_onplaceroom">
-                    <use xlink:href="#icon-location_onplaceroom"></use>
-                </svg><span class="name"> location_onplaceroom</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-vpn_key">
-                    <use xlink:href="#icon-vpn_key"></use>
-                </svg><span class="name"> vpn_key</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-import_contacts">
-                    <use xlink:href="#icon-import_contacts"></use>
-                </svg><span class="name"> import_contacts</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-mail_outline">
-                    <use xlink:href="#icon-mail_outline"></use>
-                </svg><span class="name"> mail_outline</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-sentiment_satisfied_alt">
-                    <use xlink:href="#icon-sentiment_satisfied_alt"></use>
-                </svg><span class="name"> sentiment_satisfied_alt</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-lightbulb">
-                    <use xlink:href="#icon-lightbulb"></use>
-                </svg><span class="name"> lightbulb</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-add">
-                    <use xlink:href="#icon-add"></use>
-                </svg><span class="name"> add</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-add_box">
-                    <use xlink:href="#icon-add_box"></use>
-                </svg><span class="name"> add_box</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-add_circle">
-                    <use xlink:href="#icon-add_circle"></use>
-                </svg><span class="name"> add_circle</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-add_circle_outlinecontrol_point">
-                    <use xlink:href="#icon-add_circle_outlinecontrol_point"></use>
-                </svg><span class="name"> add_circle_outlinecontrol_point</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-backspace">
-                    <use xlink:href="#icon-backspace"></use>
-                </svg><span class="name"> backspace</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-clearclose">
-                    <use xlink:href="#icon-clearclose"></use>
-                </svg><span class="name"> clearclose</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-content_copy">
-                    <use xlink:href="#icon-content_copy"></use>
-                </svg><span class="name"> content_copy</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-content_cut">
-                    <use xlink:href="#icon-content_cut"></use>
-                </svg><span class="name"> content_cut</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-content_paste">
-                    <use xlink:href="#icon-content_paste"></use>
-                </svg><span class="name"> content_paste</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-createmode_editedit">
-                    <use xlink:href="#icon-createmode_editedit"></use>
-                </svg><span class="name"> createmode_editedit</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-inbox">
-                    <use xlink:href="#icon-inbox"></use>
-                </svg><span class="name"> inbox</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-linkinsert_link">
-                    <use xlink:href="#icon-linkinsert_link"></use>
-                </svg><span class="name"> linkinsert_link</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-redo">
-                    <use xlink:href="#icon-redo"></use>
-                </svg><span class="name"> redo</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-remove">
-                    <use xlink:href="#icon-remove"></use>
-                </svg><span class="name"> remove</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-remove_circledo_not_disturb_on">
-                    <use xlink:href="#icon-remove_circledo_not_disturb_on"></use>
-                </svg><span class="name"> remove_circledo_not_disturb_on</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-remove_circle_outline">
-                    <use xlink:href="#icon-remove_circle_outline"></use>
-                </svg><span class="name"> remove_circle_outline</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-reply">
-                    <use xlink:href="#icon-reply"></use>
-                </svg><span class="name"> reply</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-reply_all">
-                    <use xlink:href="#icon-reply_all"></use>
-                </svg><span class="name"> reply_all</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-report">
-                    <use xlink:href="#icon-report"></use>
-                </svg><span class="name"> report</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-save">
-                    <use xlink:href="#icon-save"></use>
-                </svg><span class="name"> save</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-link_off">
-                    <use xlink:href="#icon-link_off"></use>
-                </svg><span class="name"> link_off</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-save_alt">
-                    <use xlink:href="#icon-save_alt"></use>
-                </svg><span class="name"> save_alt</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-add_link">
-                    <use xlink:href="#icon-add_link"></use>
-                </svg><span class="name"> add_link</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-access_timequery_builderschedule">
-                    <use xlink:href="#icon-access_timequery_builderschedule"></use>
-                </svg><span class="name"> access_timequery_builderschedule</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-data_usage">
-                    <use xlink:href="#icon-data_usage"></use>
-                </svg><span class="name"> data_usage</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-storage">
-                    <use xlink:href="#icon-storage"></use>
-                </svg><span class="name"> storage</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-signal_cellular_alt">
-                    <use xlink:href="#icon-signal_cellular_alt"></use>
-                </svg><span class="name"> signal_cellular_alt</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-border_color">
-                    <use xlink:href="#icon-border_color"></use>
-                </svg><span class="name"> border_color</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-format_indent_decrease">
-                    <use xlink:href="#icon-format_indent_decrease"></use>
-                </svg><span class="name"> format_indent_decrease</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-format_indent_increase">
-                    <use xlink:href="#icon-format_indent_increase"></use>
-                </svg><span class="name"> format_indent_increase</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-insert_chartpollassessment">
-                    <use xlink:href="#icon-insert_chartpollassessment"></use>
-                </svg><span class="name"> insert_chartpollassessment</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-insert_drive_file">
-                    <use xlink:href="#icon-insert_drive_file"></use>
-                </svg><span class="name"> insert_drive_file</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-insert_photoimagephoto">
-                    <use xlink:href="#icon-insert_photoimagephoto"></use>
-                </svg><span class="name"> insert_photoimagephoto</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-publish">
-                    <use xlink:href="#icon-publish"></use>
-                </svg><span class="name"> publish</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-linear_scale">
-                    <use xlink:href="#icon-linear_scale"></use>
-                </svg><span class="name"> linear_scale</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-scatter_plot">
-                    <use xlink:href="#icon-scatter_plot"></use>
-                </svg><span class="name"> scatter_plot</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-bar_chart">
-                    <use xlink:href="#icon-bar_chart"></use>
-                </svg><span class="name"> bar_chart</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-cloud_queue">
-                    <use xlink:href="#icon-cloud_queue"></use>
-                </svg><span class="name"> cloud_queue</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-file_downloadget_app">
-                    <use xlink:href="#icon-file_downloadget_app"></use>
-                </svg><span class="name"> file_downloadget_app</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-file_upload">
-                    <use xlink:href="#icon-file_upload"></use>
-                </svg><span class="name"> file_upload</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-folder">
-                    <use xlink:href="#icon-folder"></use>
-                </svg><span class="name"> folder</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-folder_open">
-                    <use xlink:href="#icon-folder_open"></use>
-                </svg><span class="name"> folder_open</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-create_new_folder">
-                    <use xlink:href="#icon-create_new_folder"></use>
-                </svg><span class="name"> create_new_folder</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-keyboard_arrow_down">
-                    <use xlink:href="#icon-keyboard_arrow_down"></use>
-                </svg><span class="name"> keyboard_arrow_down</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-keyboard_arrow_left">
-                    <use xlink:href="#icon-keyboard_arrow_left"></use>
-                </svg><span class="name"> keyboard_arrow_left</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-keyboard_arrow_right">
-                    <use xlink:href="#icon-keyboard_arrow_right"></use>
-                </svg><span class="name"> keyboard_arrow_right</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-keyboard_arrow_up">
-                    <use xlink:href="#icon-keyboard_arrow_up"></use>
-                </svg><span class="name"> keyboard_arrow_up</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-keyboard_backspace">
-                    <use xlink:href="#icon-keyboard_backspace"></use>
-                </svg><span class="name"> keyboard_backspace</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-keyboard_return">
-                    <use xlink:href="#icon-keyboard_return"></use>
-                </svg><span class="name"> keyboard_return</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-keyboard_tab">
-                    <use xlink:href="#icon-keyboard_tab"></use>
-                </svg><span class="name"> keyboard_tab</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-device_hub">
-                    <use xlink:href="#icon-device_hub"></use>
-                </svg><span class="name"> device_hub</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-arrow_drop_down">
-                    <use xlink:href="#icon-arrow_drop_down"></use>
-                </svg><span class="name"> arrow_drop_down</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-arrow_drop_up">
-                    <use xlink:href="#icon-arrow_drop_up"></use>
-                </svg><span class="name"> arrow_drop_up</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-cancel">
-                    <use xlink:href="#icon-cancel"></use>
-                </svg><span class="name"> cancel</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-keyboard_control">
-                    <use xlink:href="#icon-keyboard_control"></use>
-                </svg><span class="name"> keyboard_control</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-refresh">
-                    <use xlink:href="#icon-refresh"></use>
-                </svg><span class="name"> refresh</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-unfold_more">
-                    <use xlink:href="#icon-unfold_more"></use>
-                </svg><span class="name"> unfold_more</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-arrow_left">
-                    <use xlink:href="#icon-arrow_left"></use>
-                </svg><span class="name"> arrow_left</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-arrow_right">
-                    <use xlink:href="#icon-arrow_right"></use>
-                </svg><span class="name"> arrow_right</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-arrow_back_ios">
-                    <use xlink:href="#icon-arrow_back_ios"></use>
-                </svg><span class="name"> arrow_back_ios</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-arrow_forward_ios">
-                    <use xlink:href="#icon-arrow_forward_ios"></use>
-                </svg><span class="name"> arrow_forward_ios</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-notifications">
-                    <use xlink:href="#icon-notifications"></use>
-                </svg><span class="name"> notifications</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-notifications_none">
-                    <use xlink:href="#icon-notifications_none"></use>
-                </svg><span class="name"> notifications_none</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-notifications_off">
-                    <use xlink:href="#icon-notifications_off"></use>
-                </svg><span class="name"> notifications_off</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-check_box">
-                    <use xlink:href="#icon-check_box"></use>
-                </svg><span class="name"> check_box</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-check_box_outline_blank">
-                    <use xlink:href="#icon-check_box_outline_blank"></use>
-                </svg><span class="name"> check_box_outline_blank</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-assignment">
-                    <use xlink:href="#icon-assignment"></use>
-                </svg><span class="name"> assignment</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-cached">
-                    <use xlink:href="#icon-cached"></use>
-                </svg><span class="name"> cached</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-code">
-                    <use xlink:href="#icon-code"></use>
-                </svg><span class="name"> code</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-description">
-                    <use xlink:href="#icon-description"></use>
-                </svg><span class="name"> description</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-dns">
-                    <use xlink:href="#icon-dns"></use>
-                </svg><span class="name"> dns</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-help">
-                    <use xlink:href="#icon-help"></use>
-                </svg><span class="name"> help</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-highlight_remove">
-                    <use xlink:href="#icon-highlight_remove"></use>
-                </svg><span class="name"> highlight_remove</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-info">
-                    <use xlink:href="#icon-info"></use>
-                </svg><span class="name"> info</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-info_outline">
-                    <use xlink:href="#icon-info_outline"></use>
-                </svg><span class="name"> info_outline</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-language">
-                    <use xlink:href="#icon-language"></use>
-                </svg><span class="name"> language</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-lock_open">
-                    <use xlink:href="#icon-lock_open"></use>
-                </svg><span class="name"> lock_open</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-lock_outline">
-                    <use xlink:href="#icon-lock_outline"></use>
-                </svg><span class="name"> lock_outline</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-search">
-                    <use xlink:href="#icon-search"></use>
-                </svg><span class="name"> search</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-settings">
-                    <use xlink:href="#icon-settings"></use>
-                </svg><span class="name"> settings</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-settings_ethernet">
-                    <use xlink:href="#icon-settings_ethernet"></use>
-                </svg><span class="name"> settings_ethernet</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-donut_small">
-                    <use xlink:href="#icon-donut_small"></use>
-                </svg><span class="name"> donut_small</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-timeline">
-                    <use xlink:href="#icon-timeline"></use>
-                </svg><span class="name"> timeline</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-account_tree">
-                    <use xlink:href="#icon-account_tree"></use>
-                </svg><span class="name"> account_tree</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-all_inbox">
-                    <use xlink:href="#icon-all_inbox"></use>
-                </svg><span class="name"> all_inbox</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-dashboard_customize">
-                    <use xlink:href="#icon-dashboard_customize"></use>
-                </svg><span class="name"> dashboard_customize</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-speed">
-                    <use xlink:href="#icon-speed"></use>
-                </svg><span class="name"> speed</span>
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix pbs">
-                <svg class="icon icon-sync_alt">
-                    <use xlink:href="#icon-sync_alt"></use>
-                </svg><span class="name"> sync_alt</span>
-            </div>
-        </div>
+      <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-error">
+            <use xlink:href="#icon-error"></use></svg
+          ><span class="name"> error</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-error_outline">
+            <use xlink:href="#icon-error_outline"></use></svg
+          ><span class="name"> error_outline</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-warningreport_problem">
+            <use xlink:href="#icon-warningreport_problem"></use></svg
+          ><span class="name"> warningreport_problem</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-notification_important">
+            <use xlink:href="#icon-notification_important"></use></svg
+          ><span class="name"> notification_important</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-av_timer">
+            <use xlink:href="#icon-av_timer"></use></svg
+          ><span class="name"> av_timer</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-equalizer">
+            <use xlink:href="#icon-equalizer"></use></svg
+          ><span class="name"> equalizer</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-loopsync">
+            <use xlink:href="#icon-loopsync"></use></svg
+          ><span class="name"> loopsync</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-library_addqueueadd_to_photos">
+            <use xlink:href="#icon-library_addqueueadd_to_photos"></use></svg
+          ><span class="name"> library_addqueueadd_to_photos</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-library_books">
+            <use xlink:href="#icon-library_books"></use></svg
+          ><span class="name"> library_books</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-not_interesteddo_not_disturb">
+            <use xlink:href="#icon-not_interesteddo_not_disturb"></use></svg
+          ><span class="name"> not_interesteddo_not_disturb</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-playlist_add">
+            <use xlink:href="#icon-playlist_add"></use></svg
+          ><span class="name"> playlist_add</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-repeat">
+            <use xlink:href="#icon-repeat"></use></svg
+          ><span class="name"> repeat</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-replay">
+            <use xlink:href="#icon-replay"></use></svg
+          ><span class="name"> replay</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-slow_motion_video">
+            <use xlink:href="#icon-slow_motion_video"></use></svg
+          ><span class="name"> slow_motion_video</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-import_export">
+            <use xlink:href="#icon-import_export"></use></svg
+          ><span class="name"> import_export</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-location_onplaceroom">
+            <use xlink:href="#icon-location_onplaceroom"></use></svg
+          ><span class="name"> location_onplaceroom</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-vpn_key">
+            <use xlink:href="#icon-vpn_key"></use></svg
+          ><span class="name"> vpn_key</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-import_contacts">
+            <use xlink:href="#icon-import_contacts"></use></svg
+          ><span class="name"> import_contacts</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-mail_outline">
+            <use xlink:href="#icon-mail_outline"></use></svg
+          ><span class="name"> mail_outline</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-sentiment_satisfied_alt">
+            <use xlink:href="#icon-sentiment_satisfied_alt"></use></svg
+          ><span class="name"> sentiment_satisfied_alt</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-lightbulb">
+            <use xlink:href="#icon-lightbulb"></use></svg
+          ><span class="name"> lightbulb</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-add">
+            <use xlink:href="#icon-add"></use></svg
+          ><span class="name"> add</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-add_box">
+            <use xlink:href="#icon-add_box"></use></svg
+          ><span class="name"> add_box</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-add_circle">
+            <use xlink:href="#icon-add_circle"></use></svg
+          ><span class="name"> add_circle</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-add_circle_outlinecontrol_point">
+            <use xlink:href="#icon-add_circle_outlinecontrol_point"></use></svg
+          ><span class="name"> add_circle_outlinecontrol_point</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-backspace">
+            <use xlink:href="#icon-backspace"></use></svg
+          ><span class="name"> backspace</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-clearclose">
+            <use xlink:href="#icon-clearclose"></use></svg
+          ><span class="name"> clearclose</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-content_copy">
+            <use xlink:href="#icon-content_copy"></use></svg
+          ><span class="name"> content_copy</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-content_cut">
+            <use xlink:href="#icon-content_cut"></use></svg
+          ><span class="name"> content_cut</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-content_paste">
+            <use xlink:href="#icon-content_paste"></use></svg
+          ><span class="name"> content_paste</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-createmode_editedit">
+            <use xlink:href="#icon-createmode_editedit"></use></svg
+          ><span class="name"> createmode_editedit</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-inbox">
+            <use xlink:href="#icon-inbox"></use></svg
+          ><span class="name"> inbox</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-linkinsert_link">
+            <use xlink:href="#icon-linkinsert_link"></use></svg
+          ><span class="name"> linkinsert_link</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-redo">
+            <use xlink:href="#icon-redo"></use></svg
+          ><span class="name"> redo</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-remove">
+            <use xlink:href="#icon-remove"></use></svg
+          ><span class="name"> remove</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-remove_circledo_not_disturb_on">
+            <use xlink:href="#icon-remove_circledo_not_disturb_on"></use></svg
+          ><span class="name"> remove_circledo_not_disturb_on</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-remove_circle_outline">
+            <use xlink:href="#icon-remove_circle_outline"></use></svg
+          ><span class="name"> remove_circle_outline</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-reply">
+            <use xlink:href="#icon-reply"></use></svg
+          ><span class="name"> reply</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-reply_all">
+            <use xlink:href="#icon-reply_all"></use></svg
+          ><span class="name"> reply_all</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-report">
+            <use xlink:href="#icon-report"></use></svg
+          ><span class="name"> report</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-save">
+            <use xlink:href="#icon-save"></use></svg
+          ><span class="name"> save</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-link_off">
+            <use xlink:href="#icon-link_off"></use></svg
+          ><span class="name"> link_off</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-save_alt">
+            <use xlink:href="#icon-save_alt"></use></svg
+          ><span class="name"> save_alt</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-add_link">
+            <use xlink:href="#icon-add_link"></use></svg
+          ><span class="name"> add_link</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-access_timequery_builderschedule">
+            <use xlink:href="#icon-access_timequery_builderschedule"></use></svg
+          ><span class="name"> access_timequery_builderschedule</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-data_usage">
+            <use xlink:href="#icon-data_usage"></use></svg
+          ><span class="name"> data_usage</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-storage">
+            <use xlink:href="#icon-storage"></use></svg
+          ><span class="name"> storage</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-signal_cellular_alt">
+            <use xlink:href="#icon-signal_cellular_alt"></use></svg
+          ><span class="name"> signal_cellular_alt</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-border_color">
+            <use xlink:href="#icon-border_color"></use></svg
+          ><span class="name"> border_color</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-format_indent_decrease">
+            <use xlink:href="#icon-format_indent_decrease"></use></svg
+          ><span class="name"> format_indent_decrease</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-format_indent_increase">
+            <use xlink:href="#icon-format_indent_increase"></use></svg
+          ><span class="name"> format_indent_increase</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-insert_chartpollassessment">
+            <use xlink:href="#icon-insert_chartpollassessment"></use></svg
+          ><span class="name"> insert_chartpollassessment</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-insert_drive_file">
+            <use xlink:href="#icon-insert_drive_file"></use></svg
+          ><span class="name"> insert_drive_file</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-insert_photoimagephoto">
+            <use xlink:href="#icon-insert_photoimagephoto"></use></svg
+          ><span class="name"> insert_photoimagephoto</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-publish">
+            <use xlink:href="#icon-publish"></use></svg
+          ><span class="name"> publish</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-linear_scale">
+            <use xlink:href="#icon-linear_scale"></use></svg
+          ><span class="name"> linear_scale</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-scatter_plot">
+            <use xlink:href="#icon-scatter_plot"></use></svg
+          ><span class="name"> scatter_plot</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-bar_chart">
+            <use xlink:href="#icon-bar_chart"></use></svg
+          ><span class="name"> bar_chart</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-cloud_queue">
+            <use xlink:href="#icon-cloud_queue"></use></svg
+          ><span class="name"> cloud_queue</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-file_downloadget_app">
+            <use xlink:href="#icon-file_downloadget_app"></use></svg
+          ><span class="name"> file_downloadget_app</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-file_upload">
+            <use xlink:href="#icon-file_upload"></use></svg
+          ><span class="name"> file_upload</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-folder">
+            <use xlink:href="#icon-folder"></use></svg
+          ><span class="name"> folder</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-folder_open">
+            <use xlink:href="#icon-folder_open"></use></svg
+          ><span class="name"> folder_open</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-create_new_folder">
+            <use xlink:href="#icon-create_new_folder"></use></svg
+          ><span class="name"> create_new_folder</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-keyboard_arrow_down">
+            <use xlink:href="#icon-keyboard_arrow_down"></use></svg
+          ><span class="name"> keyboard_arrow_down</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-keyboard_arrow_left">
+            <use xlink:href="#icon-keyboard_arrow_left"></use></svg
+          ><span class="name"> keyboard_arrow_left</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-keyboard_arrow_right">
+            <use xlink:href="#icon-keyboard_arrow_right"></use></svg
+          ><span class="name"> keyboard_arrow_right</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-keyboard_arrow_up">
+            <use xlink:href="#icon-keyboard_arrow_up"></use></svg
+          ><span class="name"> keyboard_arrow_up</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-keyboard_backspace">
+            <use xlink:href="#icon-keyboard_backspace"></use></svg
+          ><span class="name"> keyboard_backspace</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-keyboard_return">
+            <use xlink:href="#icon-keyboard_return"></use></svg
+          ><span class="name"> keyboard_return</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-keyboard_tab">
+            <use xlink:href="#icon-keyboard_tab"></use></svg
+          ><span class="name"> keyboard_tab</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-device_hub">
+            <use xlink:href="#icon-device_hub"></use></svg
+          ><span class="name"> device_hub</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-arrow_drop_down">
+            <use xlink:href="#icon-arrow_drop_down"></use></svg
+          ><span class="name"> arrow_drop_down</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-arrow_drop_up">
+            <use xlink:href="#icon-arrow_drop_up"></use></svg
+          ><span class="name"> arrow_drop_up</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-cancel">
+            <use xlink:href="#icon-cancel"></use></svg
+          ><span class="name"> cancel</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-keyboard_control">
+            <use xlink:href="#icon-keyboard_control"></use></svg
+          ><span class="name"> keyboard_control</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-refresh">
+            <use xlink:href="#icon-refresh"></use></svg
+          ><span class="name"> refresh</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-unfold_more">
+            <use xlink:href="#icon-unfold_more"></use></svg
+          ><span class="name"> unfold_more</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-arrow_left">
+            <use xlink:href="#icon-arrow_left"></use></svg
+          ><span class="name"> arrow_left</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-arrow_right">
+            <use xlink:href="#icon-arrow_right"></use></svg
+          ><span class="name"> arrow_right</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-arrow_back_ios">
+            <use xlink:href="#icon-arrow_back_ios"></use></svg
+          ><span class="name"> arrow_back_ios</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-arrow_forward_ios">
+            <use xlink:href="#icon-arrow_forward_ios"></use></svg
+          ><span class="name"> arrow_forward_ios</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-notifications">
+            <use xlink:href="#icon-notifications"></use></svg
+          ><span class="name"> notifications</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-notifications_none">
+            <use xlink:href="#icon-notifications_none"></use></svg
+          ><span class="name"> notifications_none</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-notifications_off">
+            <use xlink:href="#icon-notifications_off"></use></svg
+          ><span class="name"> notifications_off</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-check_box">
+            <use xlink:href="#icon-check_box"></use></svg
+          ><span class="name"> check_box</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-check_box_outline_blank">
+            <use xlink:href="#icon-check_box_outline_blank"></use></svg
+          ><span class="name"> check_box_outline_blank</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-assignment">
+            <use xlink:href="#icon-assignment"></use></svg
+          ><span class="name"> assignment</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-cached">
+            <use xlink:href="#icon-cached"></use></svg
+          ><span class="name"> cached</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-code">
+            <use xlink:href="#icon-code"></use></svg
+          ><span class="name"> code</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-description">
+            <use xlink:href="#icon-description"></use></svg
+          ><span class="name"> description</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-dns">
+            <use xlink:href="#icon-dns"></use></svg
+          ><span class="name"> dns</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-help">
+            <use xlink:href="#icon-help"></use></svg
+          ><span class="name"> help</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-highlight_remove">
+            <use xlink:href="#icon-highlight_remove"></use></svg
+          ><span class="name"> highlight_remove</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-info">
+            <use xlink:href="#icon-info"></use></svg
+          ><span class="name"> info</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-info_outline">
+            <use xlink:href="#icon-info_outline"></use></svg
+          ><span class="name"> info_outline</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-language">
+            <use xlink:href="#icon-language"></use></svg
+          ><span class="name"> language</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-lock_open">
+            <use xlink:href="#icon-lock_open"></use></svg
+          ><span class="name"> lock_open</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-lock_outline">
+            <use xlink:href="#icon-lock_outline"></use></svg
+          ><span class="name"> lock_outline</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-search">
+            <use xlink:href="#icon-search"></use></svg
+          ><span class="name"> search</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-settings">
+            <use xlink:href="#icon-settings"></use></svg
+          ><span class="name"> settings</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-settings_ethernet">
+            <use xlink:href="#icon-settings_ethernet"></use></svg
+          ><span class="name"> settings_ethernet</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-donut_small">
+            <use xlink:href="#icon-donut_small"></use></svg
+          ><span class="name"> donut_small</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-timeline">
+            <use xlink:href="#icon-timeline"></use></svg
+          ><span class="name"> timeline</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-account_tree">
+            <use xlink:href="#icon-account_tree"></use></svg
+          ><span class="name"> account_tree</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-all_inbox">
+            <use xlink:href="#icon-all_inbox"></use></svg
+          ><span class="name"> all_inbox</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-dashboard_customize">
+            <use xlink:href="#icon-dashboard_customize"></use></svg
+          ><span class="name"> dashboard_customize</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-speed">
+            <use xlink:href="#icon-speed"></use></svg
+          ><span class="name"> speed</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="icon icon-sync_alt">
+            <use xlink:href="#icon-sync_alt"></use></svg
+          ><span class="name"> sync_alt</span>
+        </div>
+      </div>
     </div>
     <script defer>
-        /*!
-         * @copyright Copyright (c) 2017 IcoMoon.io
-         * @license   Licensed under MIT license
-         *            See https://github.com/Keyamoon/svgxuse
-         * @version   1.2.6
-         */
-        /*jslint browser: true */
-        /*global XDomainRequest, MutationObserver, window */
-        (function () {
-            "use strict";
-            if (typeof window !== "undefined" && window.addEventListener) {
-                var cache = Object.create(null); // holds xhr objects to prevent multiple requests
-                var checkUseElems;
-                var tid; // timeout id
-                var debouncedCheck = function () {
-                    clearTimeout(tid);
-                    tid = setTimeout(checkUseElems, 100);
-                };
-                var unobserveChanges = function () {
-                    return;
-                };
-                var observeChanges = function () {
-                    var observer;
-                    window.addEventListener("resize", debouncedCheck, false);
-                    window.addEventListener("orientationchange", debouncedCheck, false);
-                    if (window.MutationObserver) {
-                        observer = new MutationObserver(debouncedCheck);
-                        observer.observe(document.documentElement, {
-                            childList: true,
-                            subtree: true,
-                            attributes: true
-                        });
-                        unobserveChanges = function () {
-                            try {
-                                observer.disconnect();
-                                window.removeEventListener("resize", debouncedCheck, false);
-                                window.removeEventListener("orientationchange", debouncedCheck, false);
-                            } catch (ignore) { }
-                        };
-                    } else {
-                        document.documentElement.addEventListener("DOMSubtreeModified", debouncedCheck, false);
-                        unobserveChanges = function () {
-                            document.documentElement.removeEventListener("DOMSubtreeModified", debouncedCheck, false);
-                            window.removeEventListener("resize", debouncedCheck, false);
-                            window.removeEventListener("orientationchange", debouncedCheck, false);
-                        };
-                    }
-                };
-                var createRequest = function (url) {
-                    // In IE 9, cross origin requests can only be sent using XDomainRequest.
-                    // XDomainRequest would fail if CORS headers are not set.
-                    // Therefore, XDomainRequest should only be used with cross origin requests.
-                    function getOrigin(loc) {
-                        var a;
-                        if (loc.protocol !== undefined) {
-                            a = loc;
-                        } else {
-                            a = document.createElement("a");
-                            a.href = loc;
-                        }
-                        return a.protocol.replace(/:/g, "") + a.host;
-                    }
-                    var Request;
-                    var origin;
-                    var origin2;
-                    if (window.XMLHttpRequest) {
-                        Request = new XMLHttpRequest();
-                        origin = getOrigin(location);
-                        origin2 = getOrigin(url);
-                        if (Request.withCredentials === undefined && origin2 !== "" && origin2 !== origin) {
-                            Request = XDomainRequest || undefined;
-                        } else {
-                            Request = XMLHttpRequest;
-                        }
-                    }
-                    return Request;
-                };
-                var xlinkNS = "http://www.w3.org/1999/xlink";
-                checkUseElems = function () {
-                    var base;
-                    var bcr;
-                    var fallback = ""; // optional fallback URL in case no base path to SVG file was given and no symbol definition was found.
-                    var hash;
-                    var href;
-                    var i;
-                    var inProgressCount = 0;
-                    var isHidden;
-                    var Request;
-                    var url;
-                    var uses;
-                    var xhr;
-                    function observeIfDone() {
-                        // If done with making changes, start watching for chagnes in DOM again
-                        inProgressCount -= 1;
-                        if (inProgressCount === 0) { // if all xhrs were resolved
-                            unobserveChanges(); // make sure to remove old handlers
-                            observeChanges(); // watch for changes to DOM
-                        }
-                    }
-                    function attrUpdateFunc(spec) {
-                        return function () {
-                            if (cache[spec.base] !== true) {
-                                spec.useEl.setAttributeNS(xlinkNS, "xlink:href", "#" + spec.hash);
-                                if (spec.useEl.hasAttribute("href")) {
-                                    spec.useEl.setAttribute("href", "#" + spec.hash);
-                                }
-                            }
-                        };
-                    }
-                    function onloadFunc(xhr) {
-                        return function () {
-                            var body = document.body;
-                            var x = document.createElement("x");
-                            var svg;
-                            xhr.onload = null;
-                            x.innerHTML = xhr.responseText;
-                            svg = x.getElementsByTagName("svg")[0];
-                            if (svg) {
-                                svg.setAttribute("aria-hidden", "true");
-                                svg.style.position = "absolute";
-                                svg.style.width = 0;
-                                svg.style.height = 0;
-                                svg.style.overflow = "hidden";
-                                body.insertBefore(svg, body.firstChild);
-                            }
-                            observeIfDone();
-                        };
-                    }
-                    function onErrorTimeout(xhr) {
-                        return function () {
-                            xhr.onerror = null;
-                            xhr.ontimeout = null;
-                            observeIfDone();
-                        };
-                    }
-                    unobserveChanges(); // stop watching for changes to DOM
-                    // find all use elements
-                    uses = document.getElementsByTagName("use");
-                    for (i = 0; i < uses.length; i += 1) {
-                        try {
-                            bcr = uses[i].getBoundingClientRect();
-                        } catch (ignore) {
-                            // failed to get bounding rectangle of the use element
-                            bcr = false;
-                        }
-                        href = uses[i].getAttribute("href")
-                            || uses[i].getAttributeNS(xlinkNS, "href")
-                            || uses[i].getAttribute("xlink:href");
-                        if (href && href.split) {
-                            url = href.split("#");
-                        } else {
-                            url = ["", ""];
-                        }
-                        base = url[0];
-                        hash = url[1];
-                        isHidden = bcr && bcr.left === 0 && bcr.right === 0 && bcr.top === 0 && bcr.bottom === 0;
-                        if (bcr && bcr.width === 0 && bcr.height === 0 && !isHidden) {
-                            // the use element is empty
-                            // if there is a reference to an external SVG, try to fetch it
-                            // use the optional fallback URL if there is no reference to an external SVG
-                            if (fallback && !base.length && hash && !document.getElementById(hash)) {
-                                base = fallback;
-                            }
-                            if (uses[i].hasAttribute("href")) {
-                                uses[i].setAttributeNS(xlinkNS, "xlink:href", href);
-                            }
-                            if (base.length) {
-                                // schedule updating xlink:href
-                                xhr = cache[base];
-                                if (xhr !== true) {
-                                    // true signifies that prepending the SVG was not required
-                                    setTimeout(attrUpdateFunc({
-                                        useEl: uses[i],
-                                        base: base,
-                                        hash: hash
-                                    }), 0);
-                                }
-                                if (xhr === undefined) {
-                                    Request = createRequest(base);
-                                    if (Request !== undefined) {
-                                        xhr = new Request();
-                                        cache[base] = xhr;
-                                        xhr.onload = onloadFunc(xhr);
-                                        xhr.onerror = onErrorTimeout(xhr);
-                                        xhr.ontimeout = onErrorTimeout(xhr);
-                                        xhr.open("GET", base);
-                                        xhr.send();
-                                        inProgressCount += 1;
-                                    }
-                                }
-                            }
-                        } else {
-                            if (!isHidden) {
-                                if (cache[base] === undefined) {
-                                    // remember this URL if the use element was not empty and no request was sent
-                                    cache[base] = true;
-                                } else if (cache[base].onload) {
-                                    // if it turns out that prepending the SVG is not necessary,
-                                    // abort the in-progress xhr.
-                                    cache[base].abort();
-                                    delete cache[base].onload;
-                                    cache[base] = true;
-                                }
-                            } else if (base.length && cache[base]) {
-                                setTimeout(attrUpdateFunc({
-                                    useEl: uses[i],
-                                    base: base,
-                                    hash: hash
-                                }), 0);
-                            }
-                        }
+      /*!
+       * @copyright Copyright (c) 2017 IcoMoon.io
+       * @license   Licensed under MIT license
+       *            See https://github.com/Keyamoon/svgxuse
+       * @version   1.2.6
+       */
+      /*jslint browser: true */
+      /*global XDomainRequest, MutationObserver, window */
+      (function() {
+        'use strict';
+        if (typeof window !== 'undefined' && window.addEventListener) {
+          var cache = Object.create(null); // holds xhr objects to prevent multiple requests
+          var checkUseElems;
+          var tid; // timeout id
+          var debouncedCheck = function() {
+            clearTimeout(tid);
+            tid = setTimeout(checkUseElems, 100);
+          };
+          var unobserveChanges = function() {
+            return;
+          };
+          var observeChanges = function() {
+            var observer;
+            window.addEventListener('resize', debouncedCheck, false);
+            window.addEventListener('orientationchange', debouncedCheck, false);
+            if (window.MutationObserver) {
+              observer = new MutationObserver(debouncedCheck);
+              observer.observe(document.documentElement, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+              });
+              unobserveChanges = function() {
+                try {
+                  observer.disconnect();
+                  window.removeEventListener('resize', debouncedCheck, false);
+                  window.removeEventListener(
+                    'orientationchange',
+                    debouncedCheck,
+                    false,
+                  );
+                } catch (ignore) {}
+              };
+            } else {
+              document.documentElement.addEventListener(
+                'DOMSubtreeModified',
+                debouncedCheck,
+                false,
+              );
+              unobserveChanges = function() {
+                document.documentElement.removeEventListener(
+                  'DOMSubtreeModified',
+                  debouncedCheck,
+                  false,
+                );
+                window.removeEventListener('resize', debouncedCheck, false);
+                window.removeEventListener(
+                  'orientationchange',
+                  debouncedCheck,
+                  false,
+                );
+              };
+            }
+          };
+          var createRequest = function(url) {
+            // In IE 9, cross origin requests can only be sent using XDomainRequest.
+            // XDomainRequest would fail if CORS headers are not set.
+            // Therefore, XDomainRequest should only be used with cross origin requests.
+            function getOrigin(loc) {
+              var a;
+              if (loc.protocol !== undefined) {
+                a = loc;
+              } else {
+                a = document.createElement('a');
+                a.href = loc;
+              }
+              return a.protocol.replace(/:/g, '') + a.host;
+            }
+            var Request;
+            var origin;
+            var origin2;
+            if (window.XMLHttpRequest) {
+              Request = new XMLHttpRequest();
+              origin = getOrigin(location);
+              origin2 = getOrigin(url);
+              if (
+                Request.withCredentials === undefined &&
+                origin2 !== '' &&
+                origin2 !== origin
+              ) {
+                Request = XDomainRequest || undefined;
+              } else {
+                Request = XMLHttpRequest;
+              }
+            }
+            return Request;
+          };
+          var xlinkNS = 'http://www.w3.org/1999/xlink';
+          checkUseElems = function() {
+            var base;
+            var bcr;
+            var fallback = ''; // optional fallback URL in case no base path to SVG file was given and no symbol definition was found.
+            var hash;
+            var href;
+            var i;
+            var inProgressCount = 0;
+            var isHidden;
+            var Request;
+            var url;
+            var uses;
+            var xhr;
+            function observeIfDone() {
+              // If done with making changes, start watching for chagnes in DOM again
+              inProgressCount -= 1;
+              if (inProgressCount === 0) {
+                // if all xhrs were resolved
+                unobserveChanges(); // make sure to remove old handlers
+                observeChanges(); // watch for changes to DOM
+              }
+            }
+            function attrUpdateFunc(spec) {
+              return function() {
+                if (cache[spec.base] !== true) {
+                  spec.useEl.setAttributeNS(
+                    xlinkNS,
+                    'xlink:href',
+                    '#' + spec.hash,
+                  );
+                  if (spec.useEl.hasAttribute('href')) {
+                    spec.useEl.setAttribute('href', '#' + spec.hash);
+                  }
+                }
+              };
+            }
+            function onloadFunc(xhr) {
+              return function() {
+                var body = document.body;
+                var x = document.createElement('x');
+                var svg;
+                xhr.onload = null;
+                x.innerHTML = xhr.responseText;
+                svg = x.getElementsByTagName('svg')[0];
+                if (svg) {
+                  svg.setAttribute('aria-hidden', 'true');
+                  svg.style.position = 'absolute';
+                  svg.style.width = 0;
+                  svg.style.height = 0;
+                  svg.style.overflow = 'hidden';
+                  body.insertBefore(svg, body.firstChild);
+                }
+                observeIfDone();
+              };
+            }
+            function onErrorTimeout(xhr) {
+              return function() {
+                xhr.onerror = null;
+                xhr.ontimeout = null;
+                observeIfDone();
+              };
+            }
+            unobserveChanges(); // stop watching for changes to DOM
+            // find all use elements
+            uses = document.getElementsByTagName('use');
+            for (i = 0; i < uses.length; i += 1) {
+              try {
+                bcr = uses[i].getBoundingClientRect();
+              } catch (ignore) {
+                // failed to get bounding rectangle of the use element
+                bcr = false;
+              }
+              href =
+                uses[i].getAttribute('href') ||
+                uses[i].getAttributeNS(xlinkNS, 'href') ||
+                uses[i].getAttribute('xlink:href');
+              if (href && href.split) {
+                url = href.split('#');
+              } else {
+                url = ['', ''];
+              }
+              base = url[0];
+              hash = url[1];
+              isHidden =
+                bcr &&
+                bcr.left === 0 &&
+                bcr.right === 0 &&
+                bcr.top === 0 &&
+                bcr.bottom === 0;
+              if (bcr && bcr.width === 0 && bcr.height === 0 && !isHidden) {
+                // the use element is empty
+                // if there is a reference to an external SVG, try to fetch it
+                // use the optional fallback URL if there is no reference to an external SVG
+                if (
+                  fallback &&
+                  !base.length &&
+                  hash &&
+                  !document.getElementById(hash)
+                ) {
+                  base = fallback;
+                }
+                if (uses[i].hasAttribute('href')) {
+                  uses[i].setAttributeNS(xlinkNS, 'xlink:href', href);
+                }
+                if (base.length) {
+                  // schedule updating xlink:href
+                  xhr = cache[base];
+                  if (xhr !== true) {
+                    // true signifies that prepending the SVG was not required
+                    setTimeout(
+                      attrUpdateFunc({
+                        useEl: uses[i],
+                        base: base,
+                        hash: hash,
+                      }),
+                      0,
+                    );
+                  }
+                  if (xhr === undefined) {
+                    Request = createRequest(base);
+                    if (Request !== undefined) {
+                      xhr = new Request();
+                      cache[base] = xhr;
+                      xhr.onload = onloadFunc(xhr);
+                      xhr.onerror = onErrorTimeout(xhr);
+                      xhr.ontimeout = onErrorTimeout(xhr);
+                      xhr.open('GET', base);
+                      xhr.send();
+                      inProgressCount += 1;
                     }
-                    uses = "";
-                    inProgressCount += 1;
-                    observeIfDone();
-                };
-                var winLoad;
-                winLoad = function () {
-                    window.removeEventListener("load", winLoad, false); // to prevent memory leaks
-                    tid = setTimeout(checkUseElems, 0);
-                };
-                if (document.readyState !== "complete") {
-                    // The load event fires when all resources have finished loading, which allows detecting whether SVG use elements are empty.
-                    window.addEventListener("load", winLoad, false);
-                } else {
-                    // No need to add a listener if the document is already loaded, initialize immediately.
-                    winLoad();
+                  }
                 }
+              } else {
+                if (!isHidden) {
+                  if (cache[base] === undefined) {
+                    // remember this URL if the use element was not empty and no request was sent
+                    cache[base] = true;
+                  } else if (cache[base].onload) {
+                    // if it turns out that prepending the SVG is not necessary,
+                    // abort the in-progress xhr.
+                    cache[base].abort();
+                    delete cache[base].onload;
+                    cache[base] = true;
+                  }
+                } else if (base.length && cache[base]) {
+                  setTimeout(
+                    attrUpdateFunc({
+                      useEl: uses[i],
+                      base: base,
+                      hash: hash,
+                    }),
+                    0,
+                  );
+                }
+              }
             }
-        }());
-
+            uses = '';
+            inProgressCount += 1;
+            observeIfDone();
+          };
+          var winLoad;
+          winLoad = function() {
+            window.removeEventListener('load', winLoad, false); // to prevent memory leaks
+            tid = setTimeout(checkUseElems, 0);
+          };
+          if (document.readyState !== 'complete') {
+            // The load event fires when all resources have finished loading, which allows detecting whether SVG use elements are empty.
+            window.addEventListener('load', winLoad, false);
+          } else {
+            // No need to add a listener if the document is already loaded, initialize immediately.
+            winLoad();
+          }
+        }
+      })();
     </script>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/src/components/index.ts b/src/components/index.ts
index 738a357..b764619 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -33,14 +33,29 @@ import RkButton from './rk-button.vue';
 import RkIcon from './rk-icon.vue';
 
 const components: any = {
-  RkHeader, RkFooter, RkProgress, RkDate, RkPanel, RkEcharts, RkPage, RkSidebox, RkFooterTime, RkSelect,
-  RkPopper, RkDropdown, RkBack, RkButton, RkIcon,
+  RkHeader,
+  RkFooter,
+  RkProgress,
+  RkDate,
+  RkPanel,
+  RkEcharts,
+  RkPage,
+  RkSidebox,
+  RkFooterTime,
+  RkSelect,
+  RkPopper,
+  RkDropdown,
+  RkBack,
+  RkButton,
+  RkIcon,
 };
 
 const componentsName: string[] = Object.keys(components);
-export default {install: (vue: any) => {
-  componentsName.forEach((i) => {
-    vue.component(i, components[i]);
-  });
-  vue.use(noty);
-}};
+export default {
+  install: (vue: any) => {
+    componentsName.forEach((i) => {
+      vue.component(i, components[i]);
+    });
+    vue.use(noty);
+  },
+};
diff --git a/src/components/noty/bootstrap-v4.css b/src/components/noty/bootstrap-v4.css
index d820cb2..397e39a 100644
--- a/src/components/noty/bootstrap-v4.css
+++ b/src/components/noty/bootstrap-v4.css
@@ -14,55 +14,65 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
- 
+
 .noty_theme__bootstrap-v4.noty_bar {
   margin: 4px 0;
   overflow: hidden;
   position: relative;
   border: 1px solid transparent;
-  border-radius: .25rem; }
-  .noty_theme__bootstrap-v4.noty_bar .noty_body {
-    padding: .75rem 1.25rem; }
-  .noty_theme__bootstrap-v4.noty_bar .noty_buttons {
-    padding: 10px; }
-  .noty_theme__bootstrap-v4.noty_bar .noty_close_button {
-    font-size: 1.5rem;
-    font-weight: 700;
-    line-height: 1;
-    color: #000;
-    text-shadow: 0 1px 0 #fff;
-    filter: alpha(opacity=20);
-    opacity: .5;
-    background: transparent; }
-  .noty_theme__bootstrap-v4.noty_bar .noty_close_button:hover {
-    background: transparent;
-    text-decoration: none;
-    cursor: pointer;
-    filter: alpha(opacity=50);
-    opacity: .75; }
+  border-radius: 0.25rem;
+}
+.noty_theme__bootstrap-v4.noty_bar .noty_body {
+  padding: 0.75rem 1.25rem;
+}
+.noty_theme__bootstrap-v4.noty_bar .noty_buttons {
+  padding: 10px;
+}
+.noty_theme__bootstrap-v4.noty_bar .noty_close_button {
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1;
+  color: #000;
+  text-shadow: 0 1px 0 #fff;
+  filter: alpha(opacity=20);
+  opacity: 0.5;
+  background: transparent;
+}
+.noty_theme__bootstrap-v4.noty_bar .noty_close_button:hover {
+  background: transparent;
+  text-decoration: none;
+  cursor: pointer;
+  filter: alpha(opacity=50);
+  opacity: 0.75;
+}
 
 .noty_theme__bootstrap-v4.noty_type__alert,
 .noty_theme__bootstrap-v4.noty_type__notification {
   background-color: #fff;
-  color: inherit; }
+  color: inherit;
+}
 
 .noty_theme__bootstrap-v4.noty_type__warning {
   background-color: #fcf8e3;
   color: #8a6d3b;
-  border-color: #faebcc; }
+  border-color: #faebcc;
+}
 
 .noty_theme__bootstrap-v4.noty_type__error {
   background-color: #f2dede;
   color: #a94442;
-  border-color: #ebccd1; }
+  border-color: #ebccd1;
+}
 
 .noty_theme__bootstrap-v4.noty_type__info,
 .noty_theme__bootstrap-v4.noty_type__information {
   background-color: #d9edf7;
   color: #31708f;
-  border-color: #bce8f1; }
+  border-color: #bce8f1;
+}
 
 .noty_theme__bootstrap-v4.noty_type__success {
   background-color: #dff0d8;
   color: #3c763d;
-  border-color: #d6e9c6; }
+  border-color: #d6e9c6;
+}
diff --git a/src/components/noty/noty.css b/src/components/noty/noty.css
index 8bcac6c..0b062b9 100644
--- a/src/components/noty/noty.css
+++ b/src/components/noty/noty.css
@@ -14,88 +14,121 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
- 
-.noty_layout_mixin, #noty_layout__top, #noty_layout__topLeft, #noty_layout__topCenter, #noty_layout__topRight, #noty_layout__bottom, #noty_layout__bottomLeft, #noty_layout__bottomCenter, #noty_layout__bottomRight, #noty_layout__center, #noty_layout__centerLeft, #noty_layout__centerRight {
+
+.noty_layout_mixin,
+#noty_layout__top,
+#noty_layout__topLeft,
+#noty_layout__topCenter,
+#noty_layout__topRight,
+#noty_layout__bottom,
+#noty_layout__bottomLeft,
+#noty_layout__bottomCenter,
+#noty_layout__bottomRight,
+#noty_layout__center,
+#noty_layout__centerLeft,
+#noty_layout__centerRight {
   position: fixed;
   margin: 0;
   padding: 0;
   z-index: 9999999;
   -webkit-transform: translateZ(0) scale(1, 1);
-          transform: translateZ(0) scale(1, 1);
+  transform: translateZ(0) scale(1, 1);
   -webkit-backface-visibility: hidden;
-          backface-visibility: hidden;
+  backface-visibility: hidden;
   -webkit-font-smoothing: subpixel-antialiased;
   filter: blur(0);
   -webkit-filter: blur(0);
-  max-width: 90%; }
+  max-width: 90%;
+}
 
 #noty_layout__top {
   top: 0;
   left: 5%;
-  width: 90%; }
+  width: 90%;
+}
 
 #noty_layout__topLeft {
   top: 20px;
   left: 20px;
-  width: 325px; }
+  width: 325px;
+}
 
 #noty_layout__topCenter {
   top: 5%;
   left: 50%;
   width: 325px;
-  -webkit-transform: translate(-webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
-          transform: translate(calc(-50% - .5px)) translateZ(0) scale(1, 1); }
+  -webkit-transform: translate(-webkit-calc(-50% - 0.5px)) translateZ(0)
+    scale(1, 1);
+  transform: translate(calc(-50% - 0.5px)) translateZ(0) scale(1, 1);
+}
 
 #noty_layout__topRight {
   top: 20px;
   right: 20px;
-  width: 325px; }
+  width: 325px;
+}
 
 #noty_layout__bottom {
   bottom: 0;
   left: 5%;
-  width: 90%; }
+  width: 90%;
+}
 
 #noty_layout__bottomLeft {
   bottom: 20px;
   left: 20px;
-  width: 325px; }
+  width: 325px;
+}
 
 #noty_layout__bottomCenter {
   bottom: 5%;
   left: 50%;
   width: 325px;
-  -webkit-transform: translate(-webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
-          transform: translate(calc(-50% - .5px)) translateZ(0) scale(1, 1); }
+  -webkit-transform: translate(-webkit-calc(-50% - 0.5px)) translateZ(0)
+    scale(1, 1);
+  transform: translate(calc(-50% - 0.5px)) translateZ(0) scale(1, 1);
+}
 
 #noty_layout__bottomRight {
   bottom: 20px;
   right: 20px;
-  width: 325px; }
+  width: 325px;
+}
 
 #noty_layout__center {
   top: 50%;
   left: 50%;
   width: 325px;
-  -webkit-transform: translate(-webkit-calc(-50% - .5px), -webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
-          transform: translate(calc(-50% - .5px), calc(-50% - .5px)) translateZ(0) scale(1, 1); }
+  -webkit-transform: translate(
+      -webkit-calc(-50% - 0.5px),
+      -webkit-calc(-50% - 0.5px)
+    )
+    translateZ(0) scale(1, 1);
+  transform: translate(calc(-50% - 0.5px), calc(-50% - 0.5px)) translateZ(0)
+    scale(1, 1);
+}
 
 #noty_layout__centerLeft {
   top: 50%;
   left: 20px;
   width: 325px;
-  -webkit-transform: translate(0, -webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
-          transform: translate(0, calc(-50% - .5px)) translateZ(0) scale(1, 1); }
+  -webkit-transform: translate(0, -webkit-calc(-50% - 0.5px)) translateZ(0)
+    scale(1, 1);
+  transform: translate(0, calc(-50% - 0.5px)) translateZ(0) scale(1, 1);
+}
 
 #noty_layout__centerRight {
   top: 50%;
   right: 20px;
   width: 325px;
-  -webkit-transform: translate(0, -webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
-          transform: translate(0, calc(-50% - .5px)) translateZ(0) scale(1, 1); }
+  -webkit-transform: translate(0, -webkit-calc(-50% - 0.5px)) translateZ(0)
+    scale(1, 1);
+  transform: translate(0, calc(-50% - 0.5px)) translateZ(0) scale(1, 1);
+}
 
 .noty_progressbar {
-  display: none; }
+  display: none;
+}
 
 .noty_has_timeout.noty_has_progressbar .noty_progressbar {
   display: block;
@@ -106,37 +139,43 @@
   width: 100%;
   background-color: #646464;
   opacity: 0.2;
-  filter: alpha(opacity=10); }
+  filter: alpha(opacity=10);
+}
 
 .noty_bar {
   -webkit-transform: translate(0, 0) translateZ(0) scale(1, 1);
   -ms-transform: translate(0, 0) scale(1, 1);
-      transform: translate(0, 0) scale(1, 1);
+  transform: translate(0, 0) scale(1, 1);
   -webkit-font-smoothing: subpixel-antialiased;
-  overflow: hidden; }
+  overflow: hidden;
+}
 
 .noty_effects_open {
   opacity: 0;
   -webkit-transform: translate(50%);
-      -ms-transform: translate(50%);
-          transform: translate(50%);
+  -ms-transform: translate(50%);
+  transform: translate(50%);
   -webkit-animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-          animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   -webkit-animation-fill-mode: forwards;
-          animation-fill-mode: forwards; }
+  animation-fill-mode: forwards;
+}
 
 .noty_effects_close {
   -webkit-animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-          animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   -webkit-animation-fill-mode: forwards;
-          animation-fill-mode: forwards; }
+  animation-fill-mode: forwards;
+}
 
 .noty_fix_effects_height {
   -webkit-animation: noty_anim_height 75ms ease-out;
-          animation: noty_anim_height 75ms ease-out; }
+  animation: noty_anim_height 75ms ease-out;
+}
 
 .noty_close_with_click {
-  cursor: pointer; }
+  cursor: pointer;
+}
 
 .noty_close_button {
   position: absolute;
@@ -150,11 +189,13 @@
   background-color: rgba(0, 0, 0, 0.05);
   border-radius: 2px;
   cursor: pointer;
-  -webkit-transition: all .2s ease-out;
-  transition: all .2s ease-out; }
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
 
 .noty_close_button:hover {
-  background-color: rgba(0, 0, 0, 0.1); }
+  background-color: rgba(0, 0, 0, 0.1);
+}
 
 .noty_modal {
   position: fixed;
@@ -162,71 +203,96 @@
   height: 100%;
   background-color: #000;
   z-index: 10000;
-  opacity: .3;
+  opacity: 0.3;
   left: 0;
-  top: 0; }
+  top: 0;
+}
 
 .noty_modal.noty_modal_open {
   opacity: 0;
-  -webkit-animation: noty_modal_in .3s ease-out;
-          animation: noty_modal_in .3s ease-out; }
+  -webkit-animation: noty_modal_in 0.3s ease-out;
+  animation: noty_modal_in 0.3s ease-out;
+}
 
 .noty_modal.noty_modal_close {
-  -webkit-animation: noty_modal_out .3s ease-out;
-          animation: noty_modal_out .3s ease-out;
+  -webkit-animation: noty_modal_out 0.3s ease-out;
+  animation: noty_modal_out 0.3s ease-out;
   -webkit-animation-fill-mode: forwards;
-          animation-fill-mode: forwards; }
+  animation-fill-mode: forwards;
+}
 
 @-webkit-keyframes noty_modal_in {
   100% {
-    opacity: .3; } }
+    opacity: 0.3;
+  }
+}
 
 @keyframes noty_modal_in {
   100% {
-    opacity: .3; } }
+    opacity: 0.3;
+  }
+}
 
 @-webkit-keyframes noty_modal_out {
   100% {
-    opacity: 0; } }
+    opacity: 0;
+  }
+}
 
 @keyframes noty_modal_out {
   100% {
-    opacity: 0; } }
+    opacity: 0;
+  }
+}
 
 @keyframes noty_modal_out {
   100% {
-    opacity: 0; } }
+    opacity: 0;
+  }
+}
 
 @-webkit-keyframes noty_anim_in {
   100% {
     -webkit-transform: translate(0);
-            transform: translate(0);
-    opacity: 1; } }
+    transform: translate(0);
+    opacity: 1;
+  }
+}
 
 @keyframes noty_anim_in {
   100% {
     -webkit-transform: translate(0);
-            transform: translate(0);
-    opacity: 1; } }
+    transform: translate(0);
+    opacity: 1;
+  }
+}
 
 @-webkit-keyframes noty_anim_out {
   100% {
     -webkit-transform: translate(50%);
-            transform: translate(50%);
-    opacity: 0; } }
+    transform: translate(50%);
+    opacity: 0;
+  }
+}
 
 @keyframes noty_anim_out {
   100% {
     -webkit-transform: translate(50%);
-            transform: translate(50%);
-    opacity: 0; } }
+    transform: translate(50%);
+    opacity: 0;
+  }
+}
 
 @-webkit-keyframes noty_anim_height {
   100% {
-    height: 0; } }
+    height: 0;
+  }
+}
 
 @keyframes noty_anim_height {
   100% {
-    height: 0; } }
+    height: 0;
+  }
+}
 
-/*# sourceMappingURL=noty.css.map*/
\ No newline at end of file
+/*# sourceMappingURL=noty.css.map*/
diff --git a/src/components/rk-back.vue b/src/components/rk-back.vue
index 51ccf9f..5a9cd6b 100644
--- a/src/components/rk-back.vue
+++ b/src/components/rk-back.vue
@@ -1,19 +1,13 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
 
 <template>
   <a class="rk-back" @click="handleBack">
@@ -21,30 +15,30 @@
   </a>
 </template>
 <script lang="ts">
-import Vue from 'vue';
-import { Component, Prop } from 'vue-property-decorator';
+  import Vue from 'vue';
+  import { Component, Prop } from 'vue-property-decorator';
 
-@Component
-export default class RkBack extends Vue {
-  @Prop({ default: '' }) private size!: string;
-  private handleBack() {
-    const query = this.$route.query as any;
-    if (query.form) {
-      this.$router.push(query.form);
-    } else {
-      this.$emit('back');
+  @Component
+  export default class RkBack extends Vue {
+    @Prop({ default: '' }) private size!: string;
+    private handleBack() {
+      const query = this.$route.query as any;
+      if (query.form) {
+        this.$router.push(query.form);
+      } else {
+        this.$emit('back');
+      }
     }
   }
-}
 </script>
 <style lang="scss">
-.rk-back{
-  margin-right: 10px;
-  .icon{
-    vertical-align: bottom;
-    height: 22px;
-    width: 22px;
-    padding: -1px 3px;
+  .rk-back {
+    margin-right: 10px;
+    .icon {
+      vertical-align: bottom;
+      height: 22px;
+      width: 22px;
+      padding: -1px 3px;
+    }
   }
-}
 </style>
diff --git a/src/components/rk-button.vue b/src/components/rk-button.vue
index 73622fe..893312b 100644
--- a/src/components/rk-button.vue
+++ b/src/components/rk-button.vue
@@ -1,54 +1,48 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
 
 <template>
-  <a class="rk-btn" :class="{size, 'ghost': ghost}" @click="$emit('click')">
+  <a class="rk-btn" :class="{ size, ghost: ghost }" @click="$emit('click')">
     <svg class="icon"><use xlink:href="#chevron-left"></use></svg>
   </a>
 </template>
 <script lang="ts">
-import Vue from 'vue';
-import { Component, Prop } from 'vue-property-decorator';
+  import Vue from 'vue';
+  import { Component, Prop } from 'vue-property-decorator';
 
-@Component
-export default class RkBtn extends Vue {
-  @Prop({ default: '' }) private size!: string;
-  @Prop({ default: false }) private ghost!: boolean;
-}
+  @Component
+  export default class RkBtn extends Vue {
+    @Prop({ default: '' }) private size!: string;
+    @Prop({ default: false }) private ghost!: boolean;
+  }
 </script>
 <style lang="scss">
-.rk-btn{
-  line-height: 26px;
-  padding: 0 7px;
-  background-color: #448dfe;
-  border-radius: 4px;
-  color: #fff;
-  transition: background-color .3s;
-  &.sm{
-    line-height: 24px;
-  }
-  &.lg{
-    line-height: 30px;
-  }
-  &.ghost{
-    background-color: #555b6b66;
-  }
-  &:hover{
-    background-color: #357de9;
+  .rk-btn {
+    line-height: 26px;
+    padding: 0 7px;
+    background-color: #448dfe;
+    border-radius: 4px;
+    color: #fff;
+    transition: background-color 0.3s;
+    &.sm {
+      line-height: 24px;
+    }
+    &.lg {
+      line-height: 30px;
+    }
+    &.ghost {
+      background-color: #555b6b66;
+    }
+    &:hover {
+      background-color: #357de9;
+    }
   }
-}
 </style>
diff --git a/src/components/rk-date-calendar.vue b/src/components/rk-date-calendar.vue
index 23da975..50f246b 100755
--- a/src/components/rk-date-calendar.vue
+++ b/src/components/rk-date-calendar.vue
@@ -1,499 +1,607 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
 
 <template>
-<div :class="`${pre}`">
-  <div :class="`${pre}-head`">
-    <a :class="`${pre}-prev-decade-btn`" v-show="showYears" @click="year-=10"><svg class="icon sm cp">
-      <use xlink:href="#angle-double-left"></use>
-    </svg></a>
-    <a :class="`${pre}-prev-year-btn`" v-show="!showYears" @click="year--"><svg class="icon sm cp">
-      <use xlink:href="#angle-double-left"></use>
-    </svg></a>
-    <a :class="`${pre}-prev-month-btn`" v-show="!showYears&&!showMonths" @click="pm">
-      <svg class="icon lg cp">
-      <use xlink:href="#chevron-left"></use>
-    </svg></a>
-    <a :class="`${pre}-year-select`" v-show="showYears">{{ys+'-'+ye}}</a>
-    <template v-if="local.yearSuffix">
-      <a :class="`${pre}-year-select`" @click="showYears=!showYears" v-show="!showYears">{{year}}{{local.yearSuffix}}</a>
-      <a :class="`${pre}-month-select`" @click="showMonths=!showMonths" v-show="!showYears&&!showMonths">{{local.monthsHead[month]}}</a>
-    </template>
-    <template v-else>
-      <a :class="`${pre}-month-select`" @click="showMonths=!showMonths" v-show="!showYears&&!showMonths">{{local.monthsHead[month]}}</a>
-      <a :class="`${pre}-year-select`" @click="showYears=!showYears" v-show="!showYears">{{year}}</a>
-    </template>
-    <a :class="`${pre}-next-month-btn`" v-show="!showYears&&!showMonths" @click="nm">
-      <svg class="icon lg cp">
-      <use xlink:href="#chevron-right"></use>
-    </svg></a>
-    <a :class="`${pre}-next-year-btn`" v-show="!showYears" @click="year++"><svg class="icon sm cp">
-      <use xlink:href="#angle-double-right"></use>
-    </svg></a>
-    <a :class="`${pre}-next-decade-btn`" v-show="showYears" @click="year+=10"><svg class="icon sm cp">
-      <use xlink:href="#angle-double-right"></use>
-    </svg></a>
-  </div>
-  <div :class="`${pre}-body`">
-    <div :class="`${pre}-days`">
-      <a :class="`${pre}-week`" v-for="i in local.weeks"  :key="i">{{i}}</a>
-      <a v-for="(j,i) in days" @click="is($event)&&(day=j.i,ok(j))" :class="[(j.p||j.n)?`${pre}-date-out`:'',status(j.y,j.m,j.i,hour,minute,second,'YYYYMMDD')]" :key="i">{{j.i}}</a>
-    </div>
-    <div :class="`${pre}-months`" v-show="showMonths">
-      <a v-for="(i,j) in local.months" @click="is($event)&&(showMonths=(m==='M'),month=j,(m==='M'&&ok('m')))" :class="[status(year,j,day,hour,minute,second,'YYYYMM')]" :key="j">{{i}}</a>
+  <div :class="`${pre}`">
+    <div :class="`${pre}-head`">
+      <a
+        :class="`${pre}-prev-decade-btn`"
+        v-show="showYears"
+        @click="year -= 10"
+        ><svg class="icon sm cp">
+          <use xlink:href="#angle-double-left"></use></svg
+      ></a>
+      <a :class="`${pre}-prev-year-btn`" v-show="!showYears" @click="year--"
+        ><svg class="icon sm cp">
+          <use xlink:href="#angle-double-left"></use></svg
+      ></a>
+      <a
+        :class="`${pre}-prev-month-btn`"
+        v-show="!showYears && !showMonths"
+        @click="pm"
+      >
+        <svg class="icon lg cp">
+          <use xlink:href="#chevron-left"></use></svg
+      ></a>
+      <a :class="`${pre}-year-select`" v-show="showYears">{{
+        ys + '-' + ye
+      }}</a>
+      <template v-if="local.yearSuffix">
+        <a
+          :class="`${pre}-year-select`"
+          @click="showYears = !showYears"
+          v-show="!showYears"
+          >{{ year }}{{ local.yearSuffix }}</a
+        >
+        <a
+          :class="`${pre}-month-select`"
+          @click="showMonths = !showMonths"
+          v-show="!showYears && !showMonths"
+          >{{ local.monthsHead[month] }}</a
+        >
+      </template>
+      <template v-else>
+        <a
+          :class="`${pre}-month-select`"
+          @click="showMonths = !showMonths"
+          v-show="!showYears && !showMonths"
+          >{{ local.monthsHead[month] }}</a
+        >
+        <a
+          :class="`${pre}-year-select`"
+          @click="showYears = !showYears"
+          v-show="!showYears"
+          >{{ year }}</a
+        >
+      </template>
+      <a
+        :class="`${pre}-next-month-btn`"
+        v-show="!showYears && !showMonths"
+        @click="nm"
+      >
+        <svg class="icon lg cp">
+          <use xlink:href="#chevron-right"></use></svg
+      ></a>
+      <a :class="`${pre}-next-year-btn`" v-show="!showYears" @click="year++"
+        ><svg class="icon sm cp">
+          <use xlink:href="#angle-double-right"></use></svg
+      ></a>
+      <a
+        :class="`${pre}-next-decade-btn`"
+        v-show="showYears"
+        @click="year += 10"
+        ><svg class="icon sm cp">
+          <use xlink:href="#angle-double-right"></use></svg
+      ></a>
     </div>
-    <div :class="`${pre}-years`" v-show="showYears">
-      <a v-for="(i,j) in years" @click="is($event)&&(showYears=(m==='Y'),year=i,(m==='Y'&&ok('y')))" :class="[(j===0||j===11)?`${pre}-date-out`:'',status(i,month,day,hour,minute,second,'YYYY')]" :key="j">{{i}}</a>
-    </div>
-    <div :class="`${pre}-hours scroll_hide`" v-show="showHours">
-      <div :class="`${pre}-title`">{{local.hourTip}}</div>
-      <div class="scroll_hide calendar-overflow">
-        <a v-for="(j,i) in 24" @click="is($event)&&(showHours=false,hour=i,ok('h'))" :class="[status(year,month,day,i,minute,second,'YYYYMMDDHH')]" :key="i">{{i}}</a>
+    <div :class="`${pre}-body`">
+      <div :class="`${pre}-days`">
+        <a :class="`${pre}-week`" v-for="i in local.weeks" :key="i">{{ i }}</a>
+        <a
+          v-for="(j, i) in days"
+          @click="is($event) && ((day = j.i), ok(j))"
+          :class="[
+            j.p || j.n ? `${pre}-date-out` : '',
+            status(j.y, j.m, j.i, hour, minute, second, 'YYYYMMDD'),
+          ]"
+          :key="i"
+          >{{ j.i }}</a
+        >
       </div>
-    </div>
-    <div :class="`${pre}-minutes`" v-show="showMinutes">
-      <div :class="`${pre}-title`">{{local.minuteTip}}</div>
-      <div class="scroll_hide calendar-overflow">
-        <a v-for="(j,i) in 60" @click="is($event)&&(showMinutes=false,minute=i,ok('h'))" :class="[status(year,month,day,hour,i,second,'YYYYMMDDHHmm')]" :key="i">{{i}}</a>
+      <div :class="`${pre}-months`" v-show="showMonths">
+        <a
+          v-for="(i, j) in local.months"
+          @click="
+            is($event) &&
+              ((showMonths = m === 'M'), (month = j), m === 'M' && ok('m'))
+          "
+          :class="[status(year, j, day, hour, minute, second, 'YYYYMM')]"
+          :key="j"
+          >{{ i }}</a
+        >
       </div>
-    </div>
-    <div :class="`${pre}-seconds`" v-show="showSeconds">
-      <div :class="`${pre}-title`">{{local.secondTip}}</div>
-      <div class="scroll_hide calendar-overflow">
-        <a v-for="(j,i) in 60" @click="is($event)&&(showSeconds=false,second=i,ok('h'))" :class="[status(year,month,day,hour,minute,i,'YYYYMMDDHHmmss')]" :key="i">{{i}}</a>
+      <div :class="`${pre}-years`" v-show="showYears">
+        <a
+          v-for="(i, j) in years"
+          @click="
+            is($event) &&
+              ((showYears = m === 'Y'), (year = i), m === 'Y' && ok('y'))
+          "
+          :class="[
+            j === 0 || j === 11 ? `${pre}-date-out` : '',
+            status(i, month, day, hour, minute, second, 'YYYY'),
+          ]"
+          :key="j"
+          >{{ i }}</a
+        >
+      </div>
+      <div :class="`${pre}-hours scroll_hide`" v-show="showHours">
+        <div :class="`${pre}-title`">{{ local.hourTip }}</div>
+        <div class="scroll_hide calendar-overflow">
+          <a
+            v-for="(j, i) in 24"
+            @click="is($event) && ((showHours = false), (hour = i), ok('h'))"
+            :class="[status(year, month, day, i, minute, second, 'YYYYMMDDHH')]"
+            :key="i"
+            >{{ i }}</a
+          >
+        </div>
+      </div>
+      <div :class="`${pre}-minutes`" v-show="showMinutes">
+        <div :class="`${pre}-title`">{{ local.minuteTip }}</div>
+        <div class="scroll_hide calendar-overflow">
+          <a
+            v-for="(j, i) in 60"
+            @click="
+              is($event) && ((showMinutes = false), (minute = i), ok('h'))
+            "
+            :class="[status(year, month, day, hour, i, second, 'YYYYMMDDHHmm')]"
+            :key="i"
+            >{{ i }}</a
+          >
+        </div>
+      </div>
+      <div :class="`${pre}-seconds`" v-show="showSeconds">
+        <div :class="`${pre}-title`">{{ local.secondTip }}</div>
+        <div class="scroll_hide calendar-overflow">
+          <a
+            v-for="(j, i) in 60"
+            @click="
+              is($event) && ((showSeconds = false), (second = i), ok('h'))
+            "
+            :class="[
+              status(year, month, day, hour, minute, i, 'YYYYMMDDHHmmss'),
+            ]"
+            :key="i"
+            >{{ i }}</a
+          >
+        </div>
       </div>
     </div>
-  </div>
-  <div :class="`${pre}-foot`" v-if="m==='H'">
-    <div :class="`${pre}-hour`">
-      <a :title="local.hourTip" @click="showHours=!showHours,showMinutes=showSeconds=false" :class="{on:showHours}">{{hour|dd}}</a>
-      <span>:</span>
-      <a :title="local.minuteTip" @click="showMinutes=!showMinutes,showHours=showSeconds=false" :class="{on:showMinutes}">{{minute|dd}}</a>
-      <span>:</span>
-      <a :title="local.secondTip" @click="showSeconds=!showSeconds,showHours=showMinutes=false" :class="{on:showSeconds}">{{second|dd}}</a>
+    <div :class="`${pre}-foot`" v-if="m === 'H'">
+      <div :class="`${pre}-hour`">
+        <a
+          :title="local.hourTip"
+          @click="(showHours = !showHours), (showMinutes = showSeconds = false)"
+          :class="{ on: showHours }"
+          >{{ hour | dd }}</a
+        >
+        <span>:</span>
+        <a
+          :title="local.minuteTip"
+          @click="
+            (showMinutes = !showMinutes), (showHours = showSeconds = false)
+          "
+          :class="{ on: showMinutes }"
+          >{{ minute | dd }}</a
+        >
+        <span>:</span>
+        <a
+          :title="local.secondTip"
+          @click="
+            (showSeconds = !showSeconds), (showHours = showMinutes = false)
+          "
+          :class="{ on: showSeconds }"
+          >{{ second | dd }}</a
+        >
+      </div>
     </div>
   </div>
-</div>
 </template>
 
 <script lang="js">
-/* eslint-disable */
-/* tslint:disable */
-export default {
-  name: 'VueDatepickerLocalCalendar',
-  props: {
-    value: { default: null },
-    left: { default: false },
-    right: { default: false },
-  },
-  data() {
-    const get = (time) => {
-      return {
-        year: time.getFullYear(),
-        month: time.getMonth(),
-        day: time.getDate(),
-        hour: time.getHours(),
-        minute: time.getMinutes(),
-        second: time.getSeconds(),
-      };
-    };
-    const time = get(this.value);
-    return {
-      pre: 'calendar',
-      m: 'D',
-      showYears: false,
-      showMonths: false,
-      showHours: false,
-      showMinutes: false,
-      showSeconds: false,
-      year: time.year,
-      month: time.month,
-      day: time.day,
-      hour: time.hour,
-      minute: time.minute,
-      second: time.second,
-    };
-  },
-  watch: {
-    value(val) {
-      const $this = this;
-      const time = $this.get(val);
-      $this.year = time.year;
-      $this.month = time.month;
-      $this.day = time.day;
-      $this.hour = time.hour;
-      $this.minute = time.minute;
-      $this.second = time.second;
-    },
-  },
-  computed: {
-    local() {
-      return this.$parent.local;
-    },
-    format() {
-      return this.$parent.format;
-    },
-    start() {
-      return this.parse(this.$parent.dates[0]);
+  /* eslint-disable */
+  /* tslint:disable */
+  export default {
+    name: 'VueDatepickerLocalCalendar',
+    props: {
+      value: { default: null },
+      left: { default: false },
+      right: { default: false },
     },
-    end() {
-      return this.parse(this.$parent.dates[1]);
-    },
-    ys() {
-      return Math.floor(this.year / 10) * 10;
-    },
-    ye() {
-      return this.ys + 10;
-    },
-    years() {
-      const arr = [];
-      let start = this.ys - 1;
-      while (arr.length < 12) {
-        arr.push(start += 1);
-      }
-      return arr;
-    },
-    days() {
-      const days = [];
-      const $this = this;
-      const year = $this.year;
-      const month = $this.month;
-      const time = new Date(year, month, 1);
-      const dow = $this.local.dow || 7;
-      time.setDate(0); // switch to the last day of last month
-      let lastDay = time.getDate();
-      const week = time.getDay() || 7;
-      let count = dow <= week ? week - dow + 1 : week + (7 - dow + 1);
-      while (count > 0) {
-        days.push({
-          i: lastDay - count + 1,
-          y: month > 0 ? year : year - 1,
-          m: month > 0 ? month - 1 : 11,
-          p: true,
-        });
-        count--;
-      }
-      time.setMonth(time.getMonth() + 2, 0); // switch to the last day of the current month
-      lastDay = time.getDate();
-      let i = 1;
-      for (i = 1; i <= lastDay; i++) {
-        days.push({
-          i: i,
-          y: year,
-          m: month,
-        });
-      }
-      for (i = 1; days.length < 42; i++) {
-        days.push({
-          i: i,
-          y: month < 11 ? year : year + 1,
-          m: month < 11 ? month + 1 : 0,
-          n: true,
-        });
-      }
-      return days;
-    },
-  },
-  filters: {
-    dd: val => ('0' + val).slice(-2),
-  },
-  methods: {
-    get(time) {
+    data() {
+      const get = (time) => {
+        return {
+          year: time.getFullYear(),
+          month: time.getMonth(),
+          day: time.getDate(),
+          hour: time.getHours(),
+          minute: time.getMinutes(),
+          second: time.getSeconds(),
+        };
+      };
+      const time = get(this.value);
       return {
-        year: time.getFullYear(),
-        month: time.getMonth(),
-        day: time.getDate(),
-        hour: time.getHours(),
-        minute: time.getMinutes(),
-        second: time.getSeconds(),
+        pre: 'calendar',
+        m: 'D',
+        showYears: false,
+        showMonths: false,
+        showHours: false,
+        showMinutes: false,
+        showSeconds: false,
+        year: time.year,
+        month: time.month,
+        day: time.day,
+        hour: time.hour,
+        minute: time.minute,
+        second: time.second,
       };
     },
-    parse(num) {
-      return Math.floor(num / 1000);
+    watch: {
+      value(val) {
+        const $this = this;
+        const time = $this.get(val);
+        $this.year = time.year;
+        $this.month = time.month;
+        $this.day = time.day;
+        $this.hour = time.hour;
+        $this.minute = time.minute;
+        $this.second = time.second;
+      },
     },
-    status(year, month, day, hour, minute, second, format) {
-      const $this = this;
-      const maxDay = new Date(year, month + 1, 0).getDate();
-      const time = new Date(
-        year,
-        month,
-        day > maxDay ? maxDay : day,
-        hour,
-        minute,
-        second
-      );
-      const t = $this.parse(time);
-      const f = $this.$parent.tf;
-      const classObj = {};
-      let flag = false;
-      if (format === 'YYYY') {
-        flag = year === $this.year;
-      } else if (format === 'YYYYMM') {
-        flag = month === $this.month;
-      } else {
-        flag = f($this.value, format) === f(time, format);
-      }
-      classObj[`${$this.pre}-date`] = true;
-      classObj[`${$this.pre}-date-disabled`] =
-        ($this.right && t < $this.start) ||
-        $this.$parent.disabledDate(time, format);
-      classObj[`${$this.pre}-date-on`] =
-        ($this.left && t > $this.start) || ($this.right && t < $this.end);
-      classObj[`${$this.pre}-date-selected`] = flag;
-      return classObj;
-    },
-    nm() {
-      if (this.month < 11) {
-        this.month++;
-      } else {
-        this.month = 0;
-        this.year++;
-      }
+    computed: {
+      local() {
+        return this.$parent.local;
+      },
+      format() {
+        return this.$parent.format;
+      },
+      start() {
+        return this.parse(this.$parent.dates[0]);
+      },
+      end() {
+        return this.parse(this.$parent.dates[1]);
+      },
+      ys() {
+        return Math.floor(this.year / 10) * 10;
+      },
+      ye() {
+        return this.ys + 10;
+      },
+      years() {
+        const arr = [];
+        let start = this.ys - 1;
+        while (arr.length < 12) {
+          arr.push(start += 1);
+        }
+        return arr;
+      },
+      days() {
+        const days = [];
+        const $this = this;
+        const year = $this.year;
+        const month = $this.month;
+        const time = new Date(year, month, 1);
+        const dow = $this.local.dow || 7;
+        time.setDate(0); // switch to the last day of last month
+        let lastDay = time.getDate();
+        const week = time.getDay() || 7;
+        let count = dow <= week ? week - dow + 1 : week + (7 - dow + 1);
+        while (count > 0) {
+          days.push({
+            i: lastDay - count + 1,
+            y: month > 0 ? year : year - 1,
+            m: month > 0 ? month - 1 : 11,
+            p: true,
+          });
+          count--;
+        }
+        time.setMonth(time.getMonth() + 2, 0); // switch to the last day of the current month
+        lastDay = time.getDate();
+        let i = 1;
+        for (i = 1; i <= lastDay; i++) {
+          days.push({
+            i: i,
+            y: year,
+            m: month,
+          });
+        }
+        for (i = 1; days.length < 42; i++) {
+          days.push({
+            i: i,
+            y: month < 11 ? year : year + 1,
+            m: month < 11 ? month + 1 : 0,
+            n: true,
+          });
+        }
+        return days;
+      },
     },
-    pm() {
-      if (this.month > 0) {
-        this.month--;
-      } else {
-        this.month = 11;
-        this.year--;
-      }
+    filters: {
+      dd: val => ('0' + val).slice(-2),
     },
-    is(e) {
-      return e.target.className.indexOf(`${this.pre}-date-disabled`) === -1;
+    methods: {
+      get(time) {
+        return {
+          year: time.getFullYear(),
+          month: time.getMonth(),
+          day: time.getDate(),
+          hour: time.getHours(),
+          minute: time.getMinutes(),
+          second: time.getSeconds(),
+        };
+      },
+      parse(num) {
+        return Math.floor(num / 1000);
+      },
+      status(year, month, day, hour, minute, second, format) {
+        const $this = this;
+        const maxDay = new Date(year, month + 1, 0).getDate();
+        const time = new Date(
+          year,
+          month,
+          day > maxDay ? maxDay : day,
+          hour,
+          minute,
+          second
+        );
+        const t = $this.parse(time);
+        const f = $this.$parent.tf;
+        const classObj = {};
+        let flag = false;
+        if (format === 'YYYY') {
+          flag = year === $this.year;
+        } else if (format === 'YYYYMM') {
+          flag = month === $this.month;
+        } else {
+          flag = f($this.value, format) === f(time, format);
+        }
+        classObj[`${$this.pre}-date`] = true;
+        classObj[`${$this.pre}-date-disabled`] =
+          ($this.right && t < $this.start) ||
+          $this.$parent.disabledDate(time, format);
+        classObj[`${$this.pre}-date-on`] =
+          ($this.left && t > $this.start) || ($this.right && t < $this.end);
+        classObj[`${$this.pre}-date-selected`] = flag;
+        return classObj;
+      },
+      nm() {
+        if (this.month < 11) {
+          this.month++;
+        } else {
+          this.month = 0;
+          this.year++;
+        }
+      },
+      pm() {
+        if (this.month > 0) {
+          this.month--;
+        } else {
+          this.month = 11;
+          this.year--;
+        }
+      },
+      is(e) {
+        return e.target.className.indexOf(`${this.pre}-date-disabled`) === -1;
+      },
+      ok(info) {
+        const $this = this;
+        let year = '';
+        let month = '';
+        let day = '';
+        info && info.n && $this.nm();
+        info && info.p && $this.pm();
+        if (info === 'h') {
+          const time = $this.get(this.value);
+          year = time.year;
+          month = time.month;
+        } else if (info === 'm' || info === 'y') {
+          day = '1';
+        }
+        const _time = new Date(
+          year || $this.year,
+          month || $this.month,
+          day || $this.day,
+          $this.hour,
+          $this.minute,
+          $this.second
+        );
+        if ($this.left && Math.floor(_time.getTime() / 1000) > $this.end) {
+          this.$parent.dates[1] = _time;
+        }
+        $this.$emit('input', _time);
+        $this.$parent.ok(info === 'h');
+      },
     },
-    ok(info) {
+    mounted() {
       const $this = this;
-      let year = '';
-      let month = '';
-      let day = '';
-      info && info.n && $this.nm();
-      info && info.p && $this.pm();
-      if (info === 'h') {
-        const time = $this.get(this.value);
-        year = time.year;
-        month = time.month;
-      } else if (info === 'm' || info === 'y') {
-        day = '1';
-      }
-      const _time = new Date(
-        year || $this.year,
-        month || $this.month,
-        day || $this.day,
-        $this.hour,
-        $this.minute,
-        $this.second
-      );
-      if ($this.left && Math.floor(_time.getTime() / 1000) > $this.end) {
-        this.$parent.dates[1] = _time;
+      const is = c => $this.format.indexOf(c) !== -1;
+      if (is('s') && is('m') && (is('h') || is('H'))) {
+        $this.m = 'H';
+      } else if (is('D')) {
+        $this.m = 'D';
+      } else if (is('M')) {
+        $this.m = 'M';
+        $this.showMonths = true;
+      } else if (is('Y')) {
+        $this.m = 'Y';
+        $this.showYears = true;
       }
-      $this.$emit('input', _time);
-      $this.$parent.ok(info === 'h');
     },
-  },
-  mounted() {
-    const $this = this;
-    const is = c => $this.format.indexOf(c) !== -1;
-    if (is('s') && is('m') && (is('h') || is('H'))) {
-      $this.m = 'H';
-    } else if (is('D')) {
-      $this.m = 'D';
-    } else if (is('M')) {
-      $this.m = 'M';
-      $this.showMonths = true;
-    } else if (is('Y')) {
-      $this.m = 'Y';
-      $this.showYears = true;
-    }
-  },
-};
+  };
 </script>
 
 <style scoped>
-.calendar {
-  float: left;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  color: #3d444f;
-}
-.calendar + .calendar {
-  border-left: solid 1px #eaeaea;
-  margin-left: 5px;
-  padding-left: 5px;
-}
-.calendar-head {
-  line-height: 34px;
-  height: 34px;
-  text-align: center;
-  position: relative;
-}
+  .calendar {
+    float: left;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    color: #3d444f;
+  }
+  .calendar + .calendar {
+    border-left: solid 1px #eaeaea;
+    margin-left: 5px;
+    padding-left: 5px;
+  }
+  .calendar-head {
+    line-height: 34px;
+    height: 34px;
+    text-align: center;
+    position: relative;
+  }
 
-.calendar-head a {
-  color: #666;
-  cursor: pointer;
-  display: inline-block;
-  text-align: center;
-  position: absolute;
-  padding: 0 5px;
-  font-size: 16px;
-}
+  .calendar-head a {
+    color: #666;
+    cursor: pointer;
+    display: inline-block;
+    text-align: center;
+    position: absolute;
+    padding: 0 5px;
+    font-size: 16px;
+  }
 
-.calendar-head a:hover {
-  color: #3f97e3;
-}
+  .calendar-head a:hover {
+    color: #3f97e3;
+  }
 
-.calendar-head .calendar-year-select,
-.calendar-head .calendar-month-select {
-  font-size: 12px;
-  padding: 0 2px;
-  position: relative;
-}
+  .calendar-head .calendar-year-select,
+  .calendar-head .calendar-month-select {
+    font-size: 12px;
+    padding: 0 2px;
+    position: relative;
+  }
 
-.calendar-prev-decade-btn,
-.calendar-prev-year-btn {
-  left: 6px;
-}
+  .calendar-prev-decade-btn,
+  .calendar-prev-year-btn {
+    left: 6px;
+  }
 
-.calendar-prev-month-btn {
-  left: 24px;
-}
+  .calendar-prev-month-btn {
+    left: 24px;
+  }
 
-.calendar-next-decade-btn,
-.calendar-next-year-btn {
-  right: 6px;
-}
+  .calendar-next-decade-btn,
+  .calendar-next-year-btn {
+    right: 6px;
+  }
 
-.calendar-next-month-btn {
-  right: 24px;
-}
-.calendar-next-month-btn .icon.lg, .calendar-prev-month-btn .icon.lg{
-  margin-top: 8px;
-}
-.calendar-body {
-  position: relative;
-  width: 196px;
-  height: 196px;
-}
+  .calendar-next-month-btn {
+    right: 24px;
+  }
+  .calendar-next-month-btn .icon.lg,
+  .calendar-prev-month-btn .icon.lg {
+    margin-top: 8px;
+  }
+  .calendar-body {
+    position: relative;
+    width: 196px;
+    height: 196px;
+  }
 
-.calendar-days {
-  width: 100%;
-  height: 100%;
-}
+  .calendar-days {
+    width: 100%;
+    height: 100%;
+  }
 
-.calendar-week,
-.calendar-date {
-  font-weight: normal;
-  width: 14.28%;
-  height: 14.28%;
-  text-align: center;
-  box-sizing: border-box;
-  overflow: hidden;
-  float: left;
-}
+  .calendar-week,
+  .calendar-date {
+    font-weight: normal;
+    width: 14.28%;
+    height: 14.28%;
+    text-align: center;
+    box-sizing: border-box;
+    overflow: hidden;
+    float: left;
+  }
 
-.calendar-week:before,
-.calendar-date:before {
-  content: '';
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
-}
+  .calendar-week:before,
+  .calendar-date:before {
+    content: '';
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+  }
 
-.calendar-date {
-  cursor: pointer;
-  line-height: 29px;
-  transition: background-color .3s;
-}
+  .calendar-date {
+    cursor: pointer;
+    line-height: 29px;
+    transition: background-color 0.3s;
+  }
 
-.calendar-date-out {
-  color: #ccc;
-}
+  .calendar-date-out {
+    color: #ccc;
+  }
 
-.calendar-date:hover,
-.calendar-date-on {
-  color: #3f97e3;
-  background-color: #f8f8f8;
-}
+  .calendar-date:hover,
+  .calendar-date-on {
+    color: #3f97e3;
+    background-color: #f8f8f8;
+  }
 
-.calendar-date-selected,
-.calendar-date-selected:hover {
-  color: #fff;
-  font-weight: bold;
-  border-radius: 14px;
-  background: #3f97e3;
-}
+  .calendar-date-selected,
+  .calendar-date-selected:hover {
+    color: #fff;
+    font-weight: bold;
+    border-radius: 14px;
+    background: #3f97e3;
+  }
 
-.calendar-date-disabled {
-  cursor: not-allowed !important;
-  color: #ccc !important;
-  background: #fff !important;
-}
+  .calendar-date-disabled {
+    cursor: not-allowed !important;
+    color: #ccc !important;
+    background: #fff !important;
+  }
 
-.calendar-foot {
-  margin-top: 5px;
-}
+  .calendar-foot {
+    margin-top: 5px;
+  }
 
-.calendar-hour {
-  display: inline-block;
-  border: 1px solid #e6e5e5;
-  color: #9e9e9e;
-}
+  .calendar-hour {
+    display: inline-block;
+    border: 1px solid #e6e5e5;
+    color: #9e9e9e;
+  }
 
-.calendar-hour a {
-  display: inline-block;
-  padding: 2px 4px;
-  cursor: pointer;
-}
+  .calendar-hour a {
+    display: inline-block;
+    padding: 2px 4px;
+    cursor: pointer;
+  }
 
-.calendar-hour a:hover,
-.calendar-hour a.on {
-  color: #3f97e3;
-}
+  .calendar-hour a:hover,
+  .calendar-hour a.on {
+    color: #3f97e3;
+  }
 
-.calendar-years,
-.calendar-months,
-.calendar-hours,
-.calendar-minutes,
-.calendar-seconds {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  background: #fff;
-  left: 0;
-  top: 0;
-}
+  .calendar-years,
+  .calendar-months,
+  .calendar-hours,
+  .calendar-minutes,
+  .calendar-seconds {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background: #fff;
+    left: 0;
+    top: 0;
+  }
 
-.calendar-months a {
-  width: 33.33%;
-  height: 25%;
-}
+  .calendar-months a {
+    width: 33.33%;
+    height: 25%;
+  }
 
-.calendar-years a {
-  width: 33.33%;
-  height: 25%;
-}
+  .calendar-years a {
+    width: 33.33%;
+    height: 25%;
+  }
 
-.calendar-overflow{
-  overflow-x:scroll;
-  height: 100%;
-}
+  .calendar-overflow {
+    overflow-x: scroll;
+    height: 100%;
+  }
 
-/* .calendar-hours a {
+  /* .calendar-hours a {
   width: 20%;
   height: 20%;
 }
@@ -504,13 +612,12 @@ export default {
   height: 10%;
 } */
 
-.calendar-title {
-  margin-top: -30px;
-  height: 30px;
-  line-height: 30px;
-  background: #fff;
-  text-align: center;
-  font-weight: bold;
-}
+  .calendar-title {
+    margin-top: -30px;
+    height: 30px;
+    line-height: 30px;
+    background: #fff;
+    text-align: center;
+    font-weight: bold;
+  }
 </style>
-
diff --git a/src/components/rk-date.vue b/src/components/rk-date.vue
index f8c3a89..16f49bb 100755
--- a/src/components/rk-date.vue
+++ b/src/components/rk-date.vue
@@ -1,472 +1,536 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
 
 <template>
-<div class="datepicker" :class="{'datepicker-range':range,'datepicker__clearable':clearable&&text&&!disabled}">
-  <!-- <svg class="icon datepicker-icon">
+  <div
+    class="datepicker"
+    :class="{
+      'datepicker-range': range,
+      datepicker__clearable: clearable && text && !disabled,
+    }"
+  >
+    <!-- <svg class="icon datepicker-icon">
     <use xlink:href="#timer"></use>
   </svg> -->
-  <input class="cp" readonly :value="text" :class="[show ? 'focus' : '', inputClass]" :disabled="disabled" :placeholder="placeholder" :name="name" v-if="type!=='inline'"/>
-  <a class="datepicker-close" @click.stop="cls"></a>
-  <transition name="datepicker-anim">
-    <div class="datepicker-popup" :class="[popupClass,{'datepicker-inline':type==='inline'},position==='top'?'top':'bottom']" tabindex="-1" v-if="show||type==='inline'">
-      <template v-if="range">
-        <div class="datepicker-popup__sidebar">
-          <button type="button" class="datepicker-popup__shortcut" @click="quickPick('quarter')">{{this.local.quarterHourCutTip}}</button>
-          <button type="button" class="datepicker-popup__shortcut" @click="quickPick('half')">{{this.local.halfHourCutTip}}</button>
-          <button type="button" class="datepicker-popup__shortcut" @click="quickPick('hour')">{{this.local.hourCutTip}}</button>
-          <button type="button" class="datepicker-popup__shortcut" @click="quickPick('day')">{{this.local.dayCutTip}}</button>
-          <button type="button" class="datepicker-popup__shortcut" @click="quickPick('week')">{{this.local.weekCutTip}}</button>
-          <button type="button" class="datepicker-popup__shortcut" @click="quickPick('month')">{{this.local.monthCutTip}}</button>
+    <input
+      class="cp"
+      readonly
+      :value="text"
+      :class="[show ? 'focus' : '', inputClass]"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :name="name"
+      v-if="type !== 'inline'"
+    />
+    <a class="datepicker-close" @click.stop="cls"></a>
+    <transition name="datepicker-anim">
+      <div
+        class="datepicker-popup"
+        :class="[
+          popupClass,
+          { 'datepicker-inline': type === 'inline' },
+          position === 'top' ? 'top' : 'bottom',
+        ]"
+        tabindex="-1"
+        v-if="show || type === 'inline'"
+      >
+        <template v-if="range">
+          <div class="datepicker-popup__sidebar">
+            <button
+              type="button"
+              class="datepicker-popup__shortcut"
+              @click="quickPick('quarter')"
+            >
+              {{ this.local.quarterHourCutTip }}
+            </button>
+            <button
+              type="button"
+              class="datepicker-popup__shortcut"
+              @click="quickPick('half')"
+            >
+              {{ this.local.halfHourCutTip }}
+            </button>
+            <button
+              type="button"
+              class="datepicker-popup__shortcut"
+              @click="quickPick('hour')"
+            >
+              {{ this.local.hourCutTip }}
+            </button>
+            <button
+              type="button"
+              class="datepicker-popup__shortcut"
+              @click="quickPick('day')"
+            >
+              {{ this.local.dayCutTip }}
+            </button>
+            <button
+              type="button"
+              class="datepicker-popup__shortcut"
+              @click="quickPick('week')"
+            >
+              {{ this.local.weekCutTip }}
+            </button>
+            <button
+              type="button"
+              class="datepicker-popup__shortcut"
+              @click="quickPick('month')"
+            >
+              {{ this.local.monthCutTip }}
+            </button>
+          </div>
+          <div class="datepicker-popup__body">
+            <rk-calendar v-model="dates[0]" :left="true"></rk-calendar>
+            <rk-calendar v-model="dates[1]" :right="true"></rk-calendar>
+          </div>
+        </template>
+        <template v-else>
+          <rk-calendar v-model="dates[0]"></rk-calendar>
+        </template>
+        <div v-if="showButtons" class="datepicker__buttons">
+          <button
+            @click.prevent.stop="cancel"
+            class="datepicker__button-cancel"
+          >
+            {{ this.local.cancelTip }}
+          </button>
+          <button
+            @click.prevent.stop="submit"
+            class="datepicker__button-select"
+          >
+            {{ this.local.submitTip }}
+          </button>
         </div>
-        <div class="datepicker-popup__body">
-          <rk-calendar v-model="dates[0]" :left="true"></rk-calendar>
-          <rk-calendar v-model="dates[1]" :right="true"></rk-calendar>
-        </div>
-      </template>
-      <template v-else>
-        <rk-calendar v-model="dates[0]"></rk-calendar>
-      </template>
-      <div v-if="showButtons" class="datepicker__buttons">
-        <button @click.prevent.stop="cancel" class="datepicker__button-cancel">{{this.local.cancelTip}}</button>
-        <button @click.prevent.stop="submit" class="datepicker__button-select">{{this.local.submitTip}}</button>
       </div>
-    </div>
-  </transition>
-</div>
+    </transition>
+  </div>
 </template>
 
 <script lang="js">
-import RkCalendar from './rk-date-calendar.vue';
-import getLocalTime from '@/utils/localtime';
-/* eslint-disable */
-/* tslint:disable */
-export default {
-  name: 'VueDatepickerLocal',
-  components: { RkCalendar },
-  props: {
-    position: { type:String, default:'bottom' },
-    name: [String],
-    inputClass: [String],
-    popupClass: [String],
-    value: [Date, Array, String],
-    disabled: [Boolean],
-    type: {
-      type: String,
-      default: 'normal',
-    },
-    rangeSeparator: {
-      type: String,
-      default: '~',
-    },
-    clearable: {
-      type: Boolean,
-      default: false,
-    },
-    placeholder: [String],
-    disabledDate: {
-      type: Function,
-      default: () => false,
-    },
-    format: {
-      type: String,
-      default: 'YYYY-MM-DD',
-    },
-    showButtons: {
-      type: Boolean,
-      default: false,
+  import RkCalendar from './rk-date-calendar.vue';
+  import getLocalTime from '@/utils/localtime';
+  /* eslint-disable */
+  /* tslint:disable */
+  export default {
+    name: 'VueDatepickerLocal',
+    components: { RkCalendar },
+    props: {
+      position: { type:String, default:'bottom' },
+      name: [String],
+      inputClass: [String],
+      popupClass: [String],
+      value: [Date, Array, String],
+      disabled: [Boolean],
+      type: {
+        type: String,
+        default: 'normal',
+      },
+      rangeSeparator: {
+        type: String,
+        default: '~',
+      },
+      clearable: {
+        type: Boolean,
+        default: false,
+      },
+      placeholder: [String],
+      disabledDate: {
+        type: Function,
+        default: () => false,
+      },
+      format: {
+        type: String,
+        default: 'YYYY-MM-DD',
+      },
+      showButtons: {
+        type: Boolean,
+        default: false,
+      },
+      dateRangeSelect: [Function],
     },
-    dateRangeSelect: [Function],
-  },
-  data() {
-    return {
-      show: false,
-      dates: [],
-    };
-  },
-  computed: {
-    local() {
+    data() {
       return {
-        dow: 1, // Monday is the first day of the week
-        hourTip: this.$t('hourTip'), // tip of select hour
-        minuteTip: this.$t('minuteTip'), // tip of select minute
-        secondTip: this.$t('secondTip'), // tip of select second
-        yearSuffix: this.$t('yearSuffix'), // format of head
-        monthsHead: this.$t('monthsHead').split(
-          '_',
-        ), // months of head
-        months: this.$t('months').split(
-          '_',
-        ), // months of panel
-        weeks: this.$t('weeks').split('_'), // weeks
-        cancelTip: this.$t('cancel'), // default text for cancel button
-        submitTip: this.$t('confirm'), // default text for submit button
-        quarterHourCutTip: this.$t('quarterHourCutTip'),
-        halfHourCutTip: this.$t('halfHourCutTip'),
-        hourCutTip: this.$t('hourCutTip'),
-        dayCutTip: this.$t('dayCutTip'),
-        weekCutTip: this.$t('weekCutTip'),
-        monthCutTip: this.$t('monthCutTip'),
+        show: false,
+        dates: [],
       };
     },
-    range() {
-      return this.dates.length === 2;
-    },
-    text() {
-      const val = this.value;
-      const txt = this.dates
-        .map(date => this.tf(date))
-        .join(` ${this.rangeSeparator} `);
-      if (Array.isArray(val)) {
-        return val.length > 1 ? txt : '';
-      }
-      return val ? txt : '';
-    },
-  },
-  watch: {
-    value() {
-      this.dates = this.vi(this.value);
-    },
-  },
-  methods: {
-    get() {
-      return Array.isArray(this.value) ? this.dates : this.dates[0];
+    computed: {
+      local() {
+        return {
+          dow: 1, // Monday is the first day of the week
+          hourTip: this.$t('hourTip'), // tip of select hour
+          minuteTip: this.$t('minuteTip'), // tip of select minute
+          secondTip: this.$t('secondTip'), // tip of select second
+          yearSuffix: this.$t('yearSuffix'), // format of head
+          monthsHead: this.$t('monthsHead').split(
+            '_',
+          ), // months of head
+          months: this.$t('months').split(
+            '_',
+          ), // months of panel
+          weeks: this.$t('weeks').split('_'), // weeks
+          cancelTip: this.$t('cancel'), // default text for cancel button
+          submitTip: this.$t('confirm'), // default text for submit button
+          quarterHourCutTip: this.$t('quarterHourCutTip'),
+          halfHourCutTip: this.$t('halfHourCutTip'),
+          hourCutTip: this.$t('hourCutTip'),
+          dayCutTip: this.$t('dayCutTip'),
+          weekCutTip: this.$t('weekCutTip'),
+          monthCutTip: this.$t('monthCutTip'),
+        };
+      },
+      range() {
+        return this.dates.length === 2;
+      },
+      text() {
+        const val = this.value;
+        const txt = this.dates
+          .map(date => this.tf(date))
+          .join(` ${this.rangeSeparator} `);
+        if (Array.isArray(val)) {
+          return val.length > 1 ? txt : '';
+        }
+        return val ? txt : '';
+      },
     },
-    cls() {
-      this.$emit('clear');
-      this.$emit('input', this.range ? [] : '');
+    watch: {
+      value() {
+        this.dates = this.vi(this.value);
+      },
     },
-    vi(val) {
-      if (Array.isArray(val)) {
-        return val.length > 1
-          ? val.map(item => new Date(item))
-          : [new Date(), new Date()];
-      }
-      return val ? [new Date(val)] : [new Date()];
-    },
-    ok(leaveOpened) {
-      this.$emit('input', this.get());
-      !leaveOpened &&
-        !this.showButtons &&
-        setTimeout(() => {
-          this.show = this.range;
-        });
-    },
-    tf(time, format) {
-      const year = time.getFullYear();
-      const month = time.getMonth();
-      const day = time.getDate();
-      const hours24 = time.getHours();
-      const hours = hours24 % 12 === 0 ? 12 : hours24 % 12;
-      const minutes = time.getMinutes();
-      const seconds = time.getSeconds();
-      const milliseconds = time.getMilliseconds();
-      const dd = t => (`0${t}`).slice(-2);
-      const map = {
-        YYYY: year,
-        MM: dd(month + 1),
-        MMM: this.local.months[month],
-        MMMM: this.local.monthsHead[month],
-        M: month + 1,
-        DD: dd(day),
-        D: day,
-        HH: dd(hours24),
-        H: hours24,
-        hh: dd(hours),
-        h: hours,
-        mm: dd(minutes),
-        m: minutes,
-        ss: dd(seconds),
-        s: seconds,
-        S: milliseconds,
-      };
-      return (format || this.format).replace(
-        /Y+|M+|D+|H+|h+|m+|s+|S+/g,
-        str => map[str],
-      );
-    },
-    dc(e) {
-      this.show = this.$el.contains(e.target) && !this.disabled;
+    methods: {
+      get() {
+        return Array.isArray(this.value) ? this.dates : this.dates[0];
+      },
+      cls() {
+        this.$emit('clear');
+        this.$emit('input', this.range ? [] : '');
+      },
+      vi(val) {
+        if (Array.isArray(val)) {
+          return val.length > 1
+            ? val.map(item => new Date(item))
+            : [new Date(), new Date()];
+        }
+        return val ? [new Date(val)] : [new Date()];
+      },
+      ok(leaveOpened) {
+        this.$emit('input', this.get());
+        !leaveOpened &&
+          !this.showButtons &&
+          setTimeout(() => {
+            this.show = this.range;
+          });
+      },
+      tf(time, format) {
+        const year = time.getFullYear();
+        const month = time.getMonth();
+        const day = time.getDate();
+        const hours24 = time.getHours();
+        const hours = hours24 % 12 === 0 ? 12 : hours24 % 12;
+        const minutes = time.getMinutes();
+        const seconds = time.getSeconds();
+        const milliseconds = time.getMilliseconds();
+        const dd = t => (`0${t}`).slice(-2);
+        const map = {
+          YYYY: year,
+          MM: dd(month + 1),
+          MMM: this.local.months[month],
+          MMMM: this.local.monthsHead[month],
+          M: month + 1,
+          DD: dd(day),
+          D: day,
+          HH: dd(hours24),
+          H: hours24,
+          hh: dd(hours),
+          h: hours,
+          mm: dd(minutes),
+          m: minutes,
+          ss: dd(seconds),
+          s: seconds,
+          S: milliseconds,
+        };
+        return (format || this.format).replace(
+          /Y+|M+|D+|H+|h+|m+|s+|S+/g,
+          str => map[str],
+        );
+      },
+      dc(e) {
+        this.show = this.$el.contains(e.target) && !this.disabled;
+      },
+      quickPick(type){
+        const end = new Date();
+        const start = new Date();
+        switch (type) {
+          case 'quarter':
+            start.setTime(start.getTime() - 60 * 15 * 1000);//15 mins
+            break;
+          case 'half':
+            start.setTime(start.getTime() - 60 * 30 * 1000);//30 mins
+            break;
+          case 'hour':
+            start.setTime(start.getTime() - 3600 * 1000);//1 hour
+            break;
+          case 'day':
+            start.setTime(start.getTime() - 3600 * 1000 * 24);//1 day
+            break;
+          case 'week':
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);//1 week
+            break;
+          case 'month':
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);//1 month
+            break;
+          default:
+            break;
+        }
+        this.dates = [start, end];
+        this.$emit('input', this.get());
+      },
+      submit() {
+        this.$emit('confirm', this.get());
+        this.show = false;
+      },
+      cancel() {
+        this.$emit('cancel');
+        this.show = false;
+      },
     },
-    quickPick(type){
-      const end = new Date();
-      const start = new Date();
-      switch (type) {
-        case 'quarter':
-          start.setTime(start.getTime() - 60 * 15 * 1000);//15 mins
-          break;
-        case 'half':
-          start.setTime(start.getTime() - 60 * 30 * 1000);//30 mins
-          break;
-        case 'hour':
-          start.setTime(start.getTime() - 3600 * 1000);//1 hour
-          break;
-        case 'day':
-          start.setTime(start.getTime() - 3600 * 1000 * 24);//1 day
-          break;
-        case 'week':
-          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);//1 week
-          break;
-        case 'month':
-          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);//1 month
-          break;
-        default:
-          break;
-      }
-      this.dates = [start, end];
-      this.$emit('input', this.get());
-    },
-    submit() {
-      this.$emit('confirm', this.get());
-      this.show = false;
+    mounted() {
+      this.dates = this.vi(this.value);
+      document.addEventListener('click', this.dc, true);
     },
-    cancel() {
-      this.$emit('cancel');
-      this.show = false;
+    beforeDestroy() {
+      document.removeEventListener('click', this.dc, true);
     },
-  },
-  mounted() {
-    this.dates = this.vi(this.value);
-    document.addEventListener('click', this.dc, true);
-  },
-  beforeDestroy() {
-    document.removeEventListener('click', this.dc, true);
-  },
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-.datepicker {
-  display: inline-block;
-  position: relative;
-  // color: #3d444f;
-}
-
-.datepicker-icon {
-  display: block;
-  position: absolute;
-  top: 8px;
-  left: 8px;
-  color: #515a6ecc;
-}
+  .datepicker {
+    display: inline-block;
+    position: relative;
+    // color: #3d444f;
+  }
 
-.datepicker-close {
-  display: none;
-  position: absolute;
-  width: 34px;
-  height: 100%;
-  top: 0;
-  right: 0;
-  cursor: pointer;
-}
+  .datepicker-icon {
+    display: block;
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    color: #515a6ecc;
+  }
 
-.datepicker-close:before {
-  display: block;
-  content: '';
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  left: 50%;
-  top: 50%;
-  margin-left: -8px;
-  margin-top: -8px;
-  text-align: center;
-  background: #ccc;
-  color: #fff;
-  border-radius: 50%;
-  background: #ccc
-    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3IDciIHdpZHRoPSI3IiBoZWlnaHQ9IjciPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik01LjU4LDVsMi44LTIuODFBLjQxLjQxLDAsMSwwLDcuOCwxLjZMNSw0LjQxLDIuMiwxLjZhLjQxLjQxLDAsMCwwLS41OC41OGgwTDQuNDIsNSwxLjYyLDcuOGEuNDEuNDEsMCwwLDAsLjU4LjU4TDUsNS41OCw3LjgsOC4zOWEuNDEuNDEsMCwwLDAsLjU4LS41OGgwWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEuNSAtMS40OCkiIHN0eWxlPSJmaWxsOiNmZmYiLz48L3N2Zz4NCg==')
-    no-repeat 50% 50%;
-}
+  .datepicker-close {
+    display: none;
+    position: absolute;
+    width: 34px;
+    height: 100%;
+    top: 0;
+    right: 0;
+    cursor: pointer;
+  }
 
-.datepicker__clearable:hover:before {
-  display: none;
-}
-.datepicker__clearable:hover .datepicker-close {
-  display: block;
-}
+  .datepicker-close:before {
+    display: block;
+    content: '';
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    left: 50%;
+    top: 50%;
+    margin-left: -8px;
+    margin-top: -8px;
+    text-align: center;
+    background: #ccc;
+    color: #fff;
+    border-radius: 50%;
+    background: #ccc
+      url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3IDciIHdpZHRoPSI3IiBoZWlnaHQ9IjciPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik01LjU4LDVsMi44LTIuODFBLjQxLjQxLDAsMSwwLDcuOCwxLjZMNSw0LjQxLDIuMiwxLjZhLjQxLjQxLDAsMCwwLS41OC41OGgwTDQuNDIsNSwxLjYyLDcuOGEuNDEuNDEsMCwwLDAsLjU4LjU4TDUsNS41OCw3LjgsOC4zOWEuNDEuNDEsMCwwLDAsLjU4LS41OGgwWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEuNSAtMS40OCkiIHN0eWxlPSJmaWxsOiNmZmYiLz48L3N2Zz4NCg==')
+      no-repeat 50% 50%;
+  }
 
-.datepicker-close:hover:before {
-  background-color: #afafaf;
-}
+  .datepicker__clearable:hover:before {
+    display: none;
+  }
+  .datepicker__clearable:hover .datepicker-close {
+    display: block;
+  }
 
-.datepicker > input {
-  color: inherit;
-  // transition: all 200ms ease;
-  border-radius: 4px;
-  border: 0;
-  background: none;
-  height: 28px;
-  box-sizing: border-box;
-  outline: none;
-  padding: 0 5px;
-  width: 100%;
-  user-select: none;
-  font-family: Monaco;
-  letter-spacing: -0.7px;
-}
+  .datepicker-close:hover:before {
+    background-color: #afafaf;
+  }
 
-// .datepicker > input.focus {
-//   border-color: #3f97e3;
-//   -webkit-box-shadow: 0 0 5px rgba(59, 180, 242, 0.3);
-//   box-shadow: 0 0 5px rgba(59, 180, 242, 0.3);
-// }
+  .datepicker > input {
+    color: inherit;
+    // transition: all 200ms ease;
+    border-radius: 4px;
+    border: 0;
+    background: none;
+    height: 28px;
+    box-sizing: border-box;
+    outline: none;
+    padding: 0 5px;
+    width: 100%;
+    user-select: none;
+    font-family: Monaco;
+    letter-spacing: -0.7px;
+  }
 
-.datepicker > input:disabled {
-  cursor: not-allowed;
-  background-color: #ebebe4;
-  border-color: #e5e5e5;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
+  // .datepicker > input.focus {
+  //   border-color: #3f97e3;
+  //   -webkit-box-shadow: 0 0 5px rgba(59, 180, 242, 0.3);
+  //   box-shadow: 0 0 5px rgba(59, 180, 242, 0.3);
+  // }
 
-.datepicker-popup {
-  right: 0px;
-  border-radius: 4px;
-  position: absolute;
-  transition: all 200ms ease;
-  opacity: 1;
-  transform: scaleY(1);
-  font-size: 12px;
-  background: #fff;
-  box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
-  margin-top: 2px;
-  outline: 0;
-  padding: 5px;
-  overflow: hidden;
-  z-index: 999;
-  &.top{
-    bottom:35px;
-    transform-origin: center bottom;
-  }
-  &.bottom{
-    top:35px;
-    transform-origin: center top;
+  .datepicker > input:disabled {
+    cursor: not-allowed;
+    background-color: #ebebe4;
+    border-color: #e5e5e5;
+    -webkit-box-shadow: none;
+    box-shadow: none;
   }
-  &__sidebar{
+
+  .datepicker-popup {
+    right: 0px;
+    border-radius: 4px;
     position: absolute;
-    top: 0;
-    bottom: 0;
-    width:100px;
-    height: 100%;
-    padding: 5px;
-    border-right: solid 1px #eaeaea;
-  }
-  &__shortcut{
-    display: block;
-    width: 100%;
-    border: 0;
-    background-color: transparent;
-    line-height: 34px;
+    transition: all 200ms ease;
+    opacity: 1;
+    transform: scaleY(1);
     font-size: 12px;
-    color: #666;
-    text-align: left;
-    outline: none;
-    cursor: pointer;
-    white-space: nowrap;
-    &:hover{
-      color: #3f97e3;
+    background: #fff;
+    box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
+    margin-top: 2px;
+    outline: 0;
+    padding: 5px;
+    overflow: hidden;
+    z-index: 999;
+    &.top {
+      bottom: 35px;
+      transform-origin: center bottom;
+    }
+    &.bottom {
+      top: 35px;
+      transform-origin: center top;
+    }
+    &__sidebar {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 100px;
+      height: 100%;
+      padding: 5px;
+      border-right: solid 1px #eaeaea;
+    }
+    &__shortcut {
+      display: block;
+      width: 100%;
+      border: 0;
+      background-color: transparent;
+      line-height: 34px;
+      font-size: 12px;
+      color: #666;
+      text-align: left;
+      outline: none;
+      cursor: pointer;
+      white-space: nowrap;
+      &:hover {
+        color: #3f97e3;
+      }
+    }
+    &__body {
+      margin-left: 100px;
+      padding-left: 5px;
     }
   }
-  &__body{
-    margin-left: 100px;
-    padding-left: 5px;
-  }
-}
-
-.datepicker-inline {
-  position: relative;
-  margin-top: 0;
-}
-
-.datepicker-range {
-  min-width: 280px;
-}
 
-.datepicker-range .datepicker-popup {
-  width:520px;
-}
+  .datepicker-inline {
+    position: relative;
+    margin-top: 0;
+  }
 
-.datepicker-bottom {
-  float: left;
-  width: 100%;
-  text-align: right;
-}
+  .datepicker-range {
+    min-width: 280px;
+  }
 
-.datepicker-btn {
-  padding: 5px 10px;
-  background: #3f97e3;
-  color: #fff;
-  border-radius: 2px;
-  display: inline-block;
-  cursor: pointer;
-}
-.datepicker-anim-enter-active {
-  transform-origin: 0 0;
-  animation: datepicker-anim-in 0.2s cubic-bezier(0.23, 1, 0.32, 1);
-}
+  .datepicker-range .datepicker-popup {
+    width: 520px;
+  }
 
-.datepicker-anim-leave-active {
-  transform-origin: 0 0;
-  animation: datepicker-anim-out 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06);
-}
+  .datepicker-bottom {
+    float: left;
+    width: 100%;
+    text-align: right;
+  }
 
-.datepicker__buttons {
-  display: block;
-  text-align: right;
-}
+  .datepicker-btn {
+    padding: 5px 10px;
+    background: #3f97e3;
+    color: #fff;
+    border-radius: 2px;
+    display: inline-block;
+    cursor: pointer;
+  }
+  .datepicker-anim-enter-active {
+    transform-origin: 0 0;
+    animation: datepicker-anim-in 0.2s cubic-bezier(0.23, 1, 0.32, 1);
+  }
 
-.datepicker__buttons button {
-  display: inline-block;
-  font-size: 13px;
-  border: none;
-  cursor: pointer;
-  margin: 10px 0 0 5px;
-  padding: 5px 15px;
-  color: #ffffff;
-}
+  .datepicker-anim-leave-active {
+    transform-origin: 0 0;
+    animation: datepicker-anim-out 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06);
+  }
 
-.datepicker__buttons .datepicker__button-select {
-  background: #3f97e3;
-}
+  .datepicker__buttons {
+    display: block;
+    text-align: right;
+  }
 
-.datepicker__buttons .datepicker__button-cancel {
-  background: #666;
-}
+  .datepicker__buttons button {
+    display: inline-block;
+    font-size: 13px;
+    border: none;
+    cursor: pointer;
+    margin: 10px 0 0 5px;
+    padding: 5px 15px;
+    color: #ffffff;
+  }
 
-@keyframes datepicker-anim-in {
-  0% {
-    opacity: 0;
-    transform: scaleY(0.8);
+  .datepicker__buttons .datepicker__button-select {
+    background: #3f97e3;
   }
-  to {
-    opacity: 1;
-    transform: scaleY(1);
+
+  .datepicker__buttons .datepicker__button-cancel {
+    background: #666;
   }
-}
 
-@keyframes datepicker-anim-out {
-  0% {
-    opacity: 1;
-    transform: scaleY(1);
+  @keyframes datepicker-anim-in {
+    0% {
+      opacity: 0;
+      transform: scaleY(0.8);
+    }
+    to {
+      opacity: 1;
+      transform: scaleY(1);
+    }
   }
-  to {
-    opacity: 0;
-    transform: scaleY(0.8);
+
+  @keyframes datepicker-anim-out {
+    0% {
+      opacity: 1;
+      transform: scaleY(1);
+    }
+    to {
+      opacity: 0;
+      transform: scaleY(0.8);
+    }
   }
-}
 </style>
diff --git a/src/components/rk-dropdown-item.vue b/src/components/rk-dropdown-item.vue
index a766f54..e78da01 100644
--- a/src/components/rk-dropdown-item.vue
+++ b/src/components/rk-dropdown-item.vue
@@ -1,58 +1,55 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
 
 <template>
-  <div class="rk-dropdown-item" :class="{'active': (value === active && active)}">
+  <div class="rk-dropdown-item" :class="{ active: value === active && active }">
     <div class="ell" v-if="!show">
       <svg v-if="detail" class="icon sm r" @click.stop="show = !show">
         <use xlink:href="#code"></use>
       </svg>
-      {{value}}</div> 
+      {{ value }}
+    </div>
     <div v-else>
       <svg v-if="detail" class="icon sm r" @click.stop="show = !show">
         <use xlink:href="#code"></use>
       </svg>
-      {{value}}</div>
+      {{ value }}
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import { Component, Prop } from 'vue-property-decorator';
+  import Vue from 'vue';
+  import { Component, Prop } from 'vue-property-decorator';
 
-@Component({})
-export default class RkDropdownItem extends Vue {
-  @Prop({ default: false }) private detail!: boolean;
-  @Prop() private active!: string | number;
-  @Prop() private value!: string | number;
-  private show: boolean = false;
-}
+  @Component({})
+  export default class RkDropdownItem extends Vue {
+    @Prop({ default: false }) private detail!: boolean;
+    @Prop() private active!: string | number;
+    @Prop() private value!: string | number;
+    private show: boolean = false;
+  }
 </script>
 
 <style lang="scss">
-.rk-dropdown-item{
-  padding: 7px 15px;
-  cursor: pointer;
-  user-select: none;
-  .icon{
-    margin-top: 3px;
-  }
-  &:hover, &.active{
-    background-color: #40454e;
+  .rk-dropdown-item {
+    padding: 7px 15px;
+    cursor: pointer;
+    user-select: none;
+    .icon {
+      margin-top: 3px;
+    }
+    &:hover,
+    &.active {
+      background-color: #40454e;
+    }
   }
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/rk-dropdown.vue b/src/components/rk-dropdown.vue
index 31f901d..36e61b3 100644
--- a/src/components/rk-dropdown.vue
+++ b/src/components/rk-dropdown.vue
@@ -1,80 +1,86 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
 
 <template>
   <rk-popper ref="popper" :trigger="trigger" :forceShow="show">
     <span slot="reference"><slot></slot></span>
     <div class="rk-dropdown" :style="`width:${width}`">
-      <input v-model="searchString" type="text" placeholder="搜索..." class="rk-dropdown-search">
-      <RkDropdownItem v-for="i in searchResult" :key="i.name" @click.native="handleClick(i)" :detail="true" :value="i.name"/>
+      <input
+        v-model="searchString"
+        type="text"
+        placeholder="搜索..."
+        class="rk-dropdown-search"
+      />
+      <RkDropdownItem
+        v-for="i in searchResult"
+        :key="i.name"
+        @click.native="handleClick(i)"
+        :detail="true"
+        :value="i.name"
+      />
     </div>
   </rk-popper>
 </template>
 
 <script lang="ts">
-import RkDropdownItem from './rk-dropdown-item.vue';
-import Vue from 'vue';
-import { Component, Prop, PropSync, Ref } from 'vue-property-decorator';
+  import RkDropdownItem from './rk-dropdown-item.vue';
+  import Vue from 'vue';
+  import { Component, Prop, PropSync, Ref } from 'vue-property-decorator';
 
-interface Option {
-  value: string | number;
-  name: string | number;
-}
-
-@Component({
-  components: { RkDropdownItem },
-})
-export default class RkDropdown extends Vue {
-  @Ref('popper') private readonly popper!: any;
-  @Prop({ default: 'click' }) private trigger!: string;
-  @Prop({ default: '180px' }) private width!: string;
-  @Prop({ default: false }) private show!: boolean;
-  @Prop({ default: false }) private search!: boolean;
-  @Prop({ default: () => [] }) private options!: Option[];
-  private searchString: string = '';
-  private get searchResult() {
-    return this.options.filter((item: Option) =>
-    `${item.name}`.indexOf(this.searchString) !== -1);
+  interface Option {
+    value: string | number;
+    name: string | number;
   }
-  private handleClick(i: Option) {
-    this.$emit('click', i);
-    this.popper.doClose();
+
+  @Component({
+    components: { RkDropdownItem },
+  })
+  export default class RkDropdown extends Vue {
+    @Ref('popper') private readonly popper!: any;
+    @Prop({ default: 'click' }) private trigger!: string;
+    @Prop({ default: '180px' }) private width!: string;
+    @Prop({ default: false }) private show!: boolean;
+    @Prop({ default: false }) private search!: boolean;
+    @Prop({ default: () => [] }) private options!: Option[];
+    private searchString: string = '';
+    private get searchResult() {
+      return this.options.filter(
+        (item: Option) => `${item.name}`.indexOf(this.searchString) !== -1,
+      );
+    }
+    private handleClick(i: Option) {
+      this.$emit('click', i);
+      this.popper.doClose();
+    }
   }
-}
 </script>
 
 <style lang="scss">
-.rk-dropdown{
-  color: #efefef;
-  box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
-  background-color: #252a2f;
-  border-radius: 3px;
-  overflow: auto;
-  max-height: 200px;
-  padding-bottom: 2px;
-  &-search{
-    width: calc(100% - 4px);
-    border: 0;
-    background-color: #333840;
-    color: #eee;
-    outline: 0;
-    padding: 5px 25px 5px 10px;
-    margin: 2px;
+  .rk-dropdown {
+    color: #efefef;
+    box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
+    background-color: #252a2f;
     border-radius: 3px;
+    overflow: auto;
+    max-height: 200px;
+    padding-bottom: 2px;
+    &-search {
+      width: calc(100% - 4px);
+      border: 0;
+      background-color: #333840;
+      color: #eee;
+      outline: 0;
+      padding: 5px 25px 5px 10px;
+      margin: 2px;
+      border-radius: 3px;
+    }
   }
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/rk-echarts.vue b/src/components/rk-echarts.vue
index 74f7b13..18d43ef 100644
--- a/src/components/rk-echarts.vue
+++ b/src/components/rk-echarts.vue
@@ -1,70 +1,62 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
 
 <template>
   <div class="echarts" :style="`height:${height};width:${width};`"></div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import { Component, Prop, Watch } from 'vue-property-decorator';
-import echarts from 'echarts/lib/echarts';
-import { Action } from 'vuex-class';
-@Component
-export default class RkEcharts extends Vue {
-  @Prop() private option: any;
-  @Prop() private clickEvent: any;
-  @Prop({ default: false }) private uncombine!: boolean;
-  @Prop({ default: '100%' }) private height!: string;
-  @Prop({default: '100%' }) private width!: string;
-  @Action('CLEAR_CHARTS') private CLEAR_CHARTS: any;
-  private myChart: any = {};
-  private mounted(): void {
-    this.drawEcharts();
-    window.addEventListener('resize', this.myChart.resize);
-
-  }
-  private beforeDestroy(): void {
-   if (this.myChart.dispose) {
-     this.myChart.dispose();
-   }
-   window.removeEventListener('resize', this.myChart.resize);
-  }
-  @Watch('option', { deep: true })
-  private onoptionChanged(newVal: any, oldVal: any): void {
-    if (this.myChart) {
-      if (newVal) {
-        this.myChart.setOption(newVal, true); // clear cache
+  import Vue from 'vue';
+  import { Component, Prop, Watch } from 'vue-property-decorator';
+  import echarts from 'echarts/lib/echarts';
+  import { Action } from 'vuex-class';
+  @Component
+  export default class RkEcharts extends Vue {
+    @Prop() private option: any;
+    @Prop() private clickEvent: any;
+    @Prop({ default: false }) private uncombine!: boolean;
+    @Prop({ default: '100%' }) private height!: string;
+    @Prop({ default: '100%' }) private width!: string;
+    @Action('CLEAR_CHARTS') private CLEAR_CHARTS: any;
+    private myChart: any = {};
+    private mounted(): void {
+      this.drawEcharts();
+      window.addEventListener('resize', this.myChart.resize);
+    }
+    private beforeDestroy(): void {
+      if (this.myChart.dispose) {
+        this.myChart.dispose();
+      }
+      window.removeEventListener('resize', this.myChart.resize);
+    }
+    @Watch('option', { deep: true })
+    private onoptionChanged(newVal: any, oldVal: any): void {
+      if (this.myChart) {
+        if (newVal) {
+          this.myChart.setOption(newVal, true); // clear cache
+        } else {
+          this.myChart.setOption(oldVal, true);
+        }
       } else {
-        this.myChart.setOption(oldVal, true);
+        this.drawEcharts();
       }
-    } else {
-      this.drawEcharts();
+    }
+    private drawEcharts(): void {
+      const el: any = this.$el;
+      this.myChart = echarts.init(el, '');
+      this.myChart.setOption(this.option);
+      this.myChart.on('click', (params: any) => {
+        this.clickEvent(params);
+      });
     }
   }
-  private drawEcharts(): void {
-    const el: any = this.$el;
-    this.myChart = echarts.init(el, '');
-    this.myChart.setOption(this.option);
-    this.myChart.on('click', (params: any) => {
-      this.clickEvent(params);
-    });
-  }
-}
 </script>
-<style>
-</style>
+<style></style>
diff --git a/src/components/rk-footer-time.vue b/src/components/rk-footer-time.vue
index 66ae100..ce6e280 100644
--- a/src/components/rk-footer-time.vue
+++ b/src/components/rk-footer-time.vue
@@ -1,42 +1,43 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
 
 <template>
-  <RkDate class="mr-10" v-model="time" position="top" format="YYYY-MM-DD HH:mm:ss"/>
+  <RkDate
+    class="mr-10"
+    v-model="time"
+    position="top"
+    format="YYYY-MM-DD HH:mm:ss"
+  />
 </template>
 
 <script lang="ts">
-import timeFormat from '@/utils/timeFormat';
+  import timeFormat from '@/utils/timeFormat';
 
-export default {
-  computed: {
-    time: {
-      get() {
-        const that: any = this;
-        return [that.$store.state.rocketbot.durationRow.start, that.$store.state.rocketbot.durationRow.end];
-      },
-      set(val: Date[]) {
-        const that: any = this;
-        that.$store.dispatch('SET_DURATION', timeFormat(val));
+  export default {
+    computed: {
+      time: {
+        get() {
+          const that: any = this;
+          return [
+            that.$store.state.rocketbot.durationRow.start,
+            that.$store.state.rocketbot.durationRow.end,
+          ];
+        },
+        set(val: Date[]) {
+          const that: any = this;
+          that.$store.dispatch('SET_DURATION', timeFormat(val));
+        },
       },
     },
-  },
-};
+  };
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/src/components/rk-footer.vue b/src/components/rk-footer.vue
index 37eaac7..a3a640d 100644
--- a/src/components/rk-footer.vue
+++ b/src/components/rk-footer.vue
@@ -1,96 +1,114 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
 
 <template>
-  <footer class="rk-footer trans" :class="{'rk-footer-dark': $route.path === '/topology'}">
+  <footer
+    class="rk-footer trans"
+    :class="{ 'rk-footer-dark': $route.path === '/topology' }"
+  >
     <div class="rk-footer-inner">
-      <div class="flex-h">
-      </div>
+      <div class="flex-h"></div>
       <div class="sm flex-h">
-        <RkFooterTime/>
-        <span class="mr-15 cp" @click="setLang">{{lang === 'zh' ? '中' : 'En'}}</span>
-        <span>{{$t('serverZone')}} UTC {{utc >= 0 ? '+' : ''}}</span><input v-model="utc" min='-12' max="14" class="rk-footer-utc" type="number">
+        <RkFooterTime />
+        <span class="mr-15 cp" @click="setLang">{{
+          lang === 'zh' ? '中' : 'En'
+        }}</span>
+        <span>{{ $t('serverZone') }} UTC {{ utc >= 0 ? '+' : '' }}</span
+        ><input
+          v-model="utc"
+          min="-12"
+          max="14"
+          class="rk-footer-utc"
+          type="number"
+        />
       </div>
     </div>
   </footer>
 </template>
 
 <script lang="ts">
-import { Duration } from '@/types/global';
-import { Vue, Component, Watch } from 'vue-property-decorator';
-import { State, Action, Mutation } from 'vuex-class';
-import timeFormat from '@/utils/timeFormat';
+  import { Duration } from '@/types/global';
+  import { Vue, Component, Watch } from 'vue-property-decorator';
+  import { State, Action, Mutation } from 'vuex-class';
+  import timeFormat from '@/utils/timeFormat';
 
-@Component
-export default class Footerssd extends Vue {
-  @State('rocketbot') private rocketbotGlobal: any;
-  @Action('SET_DURATION') private SET_DURATION: any;
-  @Action('SET_UTC') private SET_UTC: any;
-  private lang: any = '';
-  private utc: any = window.localStorage.getItem('utc') || -(new Date().getTimezoneOffset() / 60);
-  @Watch('utc')
-  private onUtcUpdate() {
-    if (this.utc < -12) { this.utc = -12; }
-    if (this.utc > 14) { this.utc = 14; }
-    if (this.utc === '') { this.utc = 0; }
-    this.SET_UTC(this.utc);
-    window.localStorage.setItem('utc', this.utc.toString());
-  }
-  private setLang() {
-    if (this.lang === 'zh') {
-      this.$i18n.locale = 'en';
-      window.localStorage.setItem('lang', 'en');
-      this.lang = 'en';
-    } else {
-      this.$i18n.locale = 'zh';
-      window.localStorage.setItem('lang', 'zh');
-      this.lang = 'zh';
+  @Component
+  export default class Footerssd extends Vue {
+    @State('rocketbot') private rocketbotGlobal: any;
+    @Action('SET_DURATION') private SET_DURATION: any;
+    @Action('SET_UTC') private SET_UTC: any;
+    private lang: any = '';
+    private utc: any =
+      window.localStorage.getItem('utc') ||
+      -(new Date().getTimezoneOffset() / 60);
+    @Watch('utc')
+    private onUtcUpdate() {
+      if (this.utc < -12) {
+        this.utc = -12;
+      }
+      if (this.utc > 14) {
+        this.utc = 14;
+      }
+      if (this.utc === '') {
+        this.utc = 0;
+      }
+      this.SET_UTC(this.utc);
+      window.localStorage.setItem('utc', this.utc.toString());
+    }
+    private setLang() {
+      if (this.lang === 'zh') {
+        this.$i18n.locale = 'en';
+        window.localStorage.setItem('lang', 'en');
+        this.lang = 'en';
+      } else {
+        this.$i18n.locale = 'zh';
+        window.localStorage.setItem('lang', 'zh');
+        this.lang = 'zh';
+      }
+    }
+    private beforeMount() {
+      this.lang = window.localStorage.getItem('lang');
     }
   }
-  private beforeMount() {
-    this.lang = window.localStorage.getItem('lang');
-  }
-}
 </script>
 
 <style scoped>
-.rk-footer {
-  color: #515a6e;
-  flex-shrink: 0;
-  padding-right: 15px;
-  padding-left: 15px;
-  padding-bottom: 1px;
-  box-shadow: 0 -1px 0px rgba(0, 0, 0, 0.08);
-}
-.rk-footer-dark {
-  color: #ddd;
-  background:#252a2f;
-  border-top: 1px solid #252a2f;
-}
-.rk-footer-edit {
-  color: #eee;
-  background:#448dfe;
-  border-top: 1px solid #448dfe;
-}
-.rk-footer-utc{
-  color:inherit;background: 0;border: 0;outline: none; width:27px;padding-bottom: 0;
-}
-.rk-footer-inner{
-  justify-content: space-between;
-  display: flex;
-}
+  .rk-footer {
+    color: #515a6e;
+    flex-shrink: 0;
+    padding-right: 15px;
+    padding-left: 15px;
+    padding-bottom: 1px;
+    box-shadow: 0 -1px 0px rgba(0, 0, 0, 0.08);
+  }
+  .rk-footer-dark {
+    color: #ddd;
+    background: #252a2f;
+    border-top: 1px solid #252a2f;
+  }
+  .rk-footer-edit {
+    color: #eee;
+    background: #448dfe;
+    border-top: 1px solid #448dfe;
+  }
+  .rk-footer-utc {
+    color: inherit;
+    background: 0;
+    border: 0;
+    outline: none;
+    width: 27px;
+    padding-bottom: 0;
+  }
+  .rk-footer-inner {
+    justify-content: space-between;
+    display: flex;
+  }
 </style>
diff --git a/src/components/rk-header.vue b/src/components/rk-header.vue
index c493e35..36a7a9c 100644
--- a/src/components/rk-header.vue
+++ b/src/components/rk-header.vue
@@ -1,19 +1,13 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
 
 <template>
   <header class="rk-header flex-h">
@@ -26,164 +20,173 @@
         <svg class="icon sm vm">
           <use xlink:href="#chart"></use>
         </svg>
-        <span class="vm hide-xs ml-5">{{this.$t('dashboard')}}</span>
+        <span class="vm hide-xs ml-5">{{ this.$t('dashboard') }}</span>
       </router-link>
       <router-link class="nav-link mr-20" to="/topology">
         <svg class="icon sm vm">
           <use xlink:href="#issues"></use>
         </svg>
-        <span class="vm hide-xs ml-5">{{this.$t('topology')}}</span>
+        <span class="vm hide-xs ml-5">{{ this.$t('topology') }}</span>
       </router-link>
       <router-link class="nav-link mr-20" to="/trace">
         <svg class="icon sm vm">
           <use xlink:href="#merge"></use>
         </svg>
-        <span class="vm hide-xs ml-5">{{this.$t('trace')}}</span>
+        <span class="vm hide-xs ml-5">{{ this.$t('trace') }}</span>
       </router-link>
       <router-link class="nav-link mr-20" to="/alarm">
         <svg class="icon sm vm">
           <use xlink:href="#spam"></use>
         </svg>
-        <span class="vm hide-xs ml-5">{{this.$t('alarm')}}</span>
+        <span class="vm hide-xs ml-5">{{ this.$t('alarm') }}</span>
       </router-link>
       <router-link class="nav-link mr-20" to="/comparison">
         <svg class="icon sm vm">
           <use xlink:href="#chart"></use>
         </svg>
-        <span class="vm hide-xs ml-5">{{this.$t('comparison')}}</span>
+        <span class="vm hide-xs ml-5">{{ this.$t('comparison') }}</span>
       </router-link>
     </div>
     <div class="flex-h">
-      <a class="rk-btn mr-5 sm" :class="auto?'blue':'ghost'" @click="handleAuto">
-        <span class="vm">{{this.$t('auto')}}</span>
+      <a
+        class="rk-btn mr-5 sm"
+        :class="auto ? 'blue' : 'ghost'"
+        @click="handleAuto"
+      >
+        <span class="vm">{{ this.$t('auto') }}</span>
       </a>
       <div class="auto-time">
         <span class="rk-auto-select">
-          <input v-model="autoTime" type="number" @change="changeAutoTime" min="1">
+          <input
+            v-model="autoTime"
+            type="number"
+            @change="changeAutoTime"
+            min="1"
+          />
         </span>
-        {{this.$t('second')}}
+        {{ this.$t('second') }}
       </div>
       <a class="rk-btn sm ghost" @click="handleReload">
-        <svg class="icon mr-5 vm" :class="{'loading': auto}">
+        <svg class="icon mr-5 vm" :class="{ loading: auto }">
           <use xlink:href="#retry"></use>
         </svg>
-        <span class="vm">{{this.$t('reload')}}</span>
+        <span class="vm">{{ this.$t('reload') }}</span>
       </a>
-  </div>
+    </div>
   </header>
 </template>
 
 <script lang="ts">
-import { Vue, Component } from 'vue-property-decorator';
-import { Action, State, Getter } from 'vuex-class';
-import timeFormat from '@/utils/timeFormat';
+  import { Vue, Component } from 'vue-property-decorator';
+  import { Action, State, Getter } from 'vuex-class';
+  import timeFormat from '@/utils/timeFormat';
 
-@Component
-export default class Header extends Vue {
-  @Getter('duration') private duration: any;
-  @Action('SET_DURATION') private SET_DURATION: any;
-  private show: boolean = false;
-  private auto: boolean = false;
-  private autoTime: number = 6;
-  private timer: any = null;
-  private handleReload() {
-    const gap = this.duration.end.getTime() - this.duration.start.getTime();
-    const utcCopy: any = -(new Date().getTimezoneOffset() / 60);
-    const time: Date[] = [new Date(new Date().getTime() - gap), new Date()];
-    this.SET_DURATION(timeFormat(time));
-  }
-  private handleAuto() {
-    this.auto = !this.auto;
-    if (this.auto) {
-      this.handleReload();
-      this.timer = setInterval(this.handleReload, this.autoTime * 1000);
-    } else {
-      clearInterval(this.timer);
+  @Component
+  export default class Header extends Vue {
+    @Getter('duration') private duration: any;
+    @Action('SET_DURATION') private SET_DURATION: any;
+    private show: boolean = false;
+    private auto: boolean = false;
+    private autoTime: number = 6;
+    private timer: any = null;
+    private handleReload() {
+      const gap = this.duration.end.getTime() - this.duration.start.getTime();
+      const utcCopy: any = -(new Date().getTimezoneOffset() / 60);
+      const time: Date[] = [new Date(new Date().getTime() - gap), new Date()];
+      this.SET_DURATION(timeFormat(time));
     }
-  }
-  private handleHide() {
-    this.show = false;
-  }
-  private handleShow() {
-    this.show = !this.show;
-  }
-  private handleSignout() {
-    localStorage.removeItem('skywalking-authority');
-    this.$router.push('/login');
-  }
-  private changeAutoTime() {
-    clearInterval(this.timer);
-    if (this.auto) {
-      this.handleReload();
-      this.timer = setInterval(this.handleReload, this.autoTime * 1000);
+    private handleAuto() {
+      this.auto = !this.auto;
+      if (this.auto) {
+        this.handleReload();
+        this.timer = setInterval(this.handleReload, this.autoTime * 1000);
+      } else {
+        clearInterval(this.timer);
+      }
+    }
+    private handleHide() {
+      this.show = false;
+    }
+    private handleShow() {
+      this.show = !this.show;
+    }
+    private handleSignout() {
+      localStorage.removeItem('skywalking-authority');
+      this.$router.push('/login');
+    }
+    private changeAutoTime() {
+      clearInterval(this.timer);
+      if (this.auto) {
+        this.handleReload();
+        this.timer = setInterval(this.handleReload, this.autoTime * 1000);
+      }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
-.rk-header {
-  flex-shrink: 0;
-  justify-content: space-between;
-  height: 48px;
-  padding-right: 15px;
-  padding-left: 15px;
-  font-size: 13px;
-  color: #efefef;
-  z-index: 9;
-  background-color: #252a2f;
-  box-shadow: 0 1px 2px 0 rgba(26, 24, 29, 0.24);
-  .svg-logo {
-    width: 90px;
-    height: 22px;
-  }
-  .rocketbot{
-    padding-top: 27px;
-    position: absolute;
-    font-size: 11px;
+  .rk-header {
+    flex-shrink: 0;
+    justify-content: space-between;
+    height: 48px;
+    padding-right: 15px;
+    padding-left: 15px;
+    font-size: 13px;
+    color: #efefef;
+    z-index: 9;
+    background-color: #252a2f;
+    box-shadow: 0 1px 2px 0 rgba(26, 24, 29, 0.24);
+    .svg-logo {
+      width: 90px;
+      height: 22px;
+    }
+    .rocketbot {
+      padding-top: 27px;
+      position: absolute;
+      font-size: 11px;
+    }
+    .logo {
+      font-family: 'Avenir', Helvetica, Arial, sans-serif;
+      font-size: 18px;
+      padding-top: 2px;
+      margin-right: 50px;
+    }
+    .nav-link {
+      padding: 4px 10px;
+      border-radius: 4px;
+      opacity: 0.8;
+      color: #efeff1;
+      will-change: opacity, background-color;
+      transition: opacity 0.3s, background-color 0.3s;
+    }
+    .nav-link:hover,
+    .nav-link.active {
+      opacity: 1;
+      background-color: #333844;
+    }
   }
-  .logo {
-    font-family: "Avenir", Helvetica, Arial, sans-serif;
-    font-size: 18px;
-    padding-top: 2px;
-    margin-right: 50px;
+  .rk-header-user {
+    display: none;
+    position: relative;
   }
-  .nav-link {
-    padding: 4px 10px;
+  .rk-header-user-menu {
+    position: absolute;
+    top: 35px;
+    right: 0;
+    background-color: #fff;
+    overflow: hidden;
     border-radius: 4px;
-    opacity: 0.8;
-    color: #efeff1;
-    will-change: opacity, background-color;
-    transition: opacity 0.3s, background-color 0.3s;
+    padding: 3px 0;
+    color: #333844;
+    width: 100px;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.15);
   }
-  .nav-link:hover,
-  .nav-link.active {
-    opacity: 1;
-    background-color: #333844;
-  }
-}
-.rk-header-user{
-  display: none;
-  position: relative;
-}
-.rk-header-user-menu{
-  position: absolute;
-  top: 35px;
-  right: 0;
-  background-color: #fff;
-  overflow: hidden;
-  border-radius: 4px;
-  padding: 3px 0;
-  color: #333844;
-  width: 100px;
-  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 0 1px rgba(0,0,0,0.15);
-}
-.rk-header-user-menu-i{
-  padding: 6px 10px;
-  will-change: background-color;
-  transition: background-color .3s;
-  &:hover{
-    background-color:#dededf;
+  .rk-header-user-menu-i {
+    padding: 6px 10px;
+    will-change: background-color;
+    transition: background-color 0.3s;
+    &:hover {
+      background-color: #dededf;
+    }
   }
-}
 </style>
diff --git a/src/components/rk-icon.vue b/src/components/rk-icon.vue
index 27b6a01..be6c57c 100644
--- a/src/components/rk-icon.vue
+++ b/src/components/rk-icon.vue
@@ -1,63 +1,60 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
 
 <template>
-  <svg class="icon" :class="{
-    'sm':size === 'sm',
-    'lg':size=== 'lg',
-    'offset':offset,
-    'loading':loading,
-    }">
+  <svg
+    class="icon"
+    :class="{
+      sm: size === 'sm',
+      lg: size === 'lg',
+      offset: offset,
+      loading: loading,
+    }"
+  >
     <use :xlink:href="icon"></use>
   </svg>
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
-import '../assets/icons/index';
+  import { Vue, Component, Prop } from 'vue-property-decorator';
+  import '../assets/icons/index';
 
-@Component
-export default class RkIcon extends Vue {
-  @Prop({default: ''}) private icon!: string;
-  @Prop({default: ''}) private size!: string;
-  @Prop({default: false}) private loading!: boolean;
-  @Prop({default: false}) private offset!: boolean;
-}
+  @Component
+  export default class RkIcon extends Vue {
+    @Prop({ default: '' }) private icon!: string;
+    @Prop({ default: '' }) private size!: string;
+    @Prop({ default: false }) private loading!: boolean;
+    @Prop({ default: false }) private offset!: boolean;
+  }
 </script>
 
 <style lang="scss">
-.icon{
-  width: 16px;
-  height: 16px;
-  vertical-align: middle;
-  fill: currentColor;
-  &.sm{
-    width: 13px;
-    height: 13px;
-  }
-  &.lg{
-    width: 18px;
-    height: 18px;
-  }
-  &.offset{
-    margin-top: -2px;
-  }
-  &.loading {
-    animation: loading 1.5s linear infinite;
+  .icon {
+    width: 16px;
+    height: 16px;
+    vertical-align: middle;
+    fill: currentColor;
+    &.sm {
+      width: 13px;
+      height: 13px;
+    }
+    &.lg {
+      width: 18px;
+      height: 18px;
+    }
+    &.offset {
+      margin-top: -2px;
+    }
+    &.loading {
+      animation: loading 1.5s linear infinite;
+    }
   }
-}
 </style>
diff --git a/src/components/rk-page.vue b/src/components/rk-page.vue
index 2746148..956d5f6 100644
--- a/src/components/rk-page.vue
+++ b/src/components/rk-page.vue
@@ -1,115 +1,115 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
 
 <template>
   <span class="rk-page flex-h">
     <svg class="icon cp mr-5" @click="pre">
       <use xlink:href="#chevron-left"></use>
     </svg>
-    <input class="rk-page-input tc mr-5" type="text" v-model="currentPage" @keyup.enter="goToCertainPage">
+    <input
+      class="rk-page-input tc mr-5"
+      type="text"
+      v-model="currentPage"
+      @keyup.enter="goToCertainPage"
+    />
     <span class="mr-5">/</span>
-    <span class="mr-5">{{Math.ceil(this.total / this.currentSize)}}</span>
+    <span class="mr-5">{{ Math.ceil(this.total / this.currentSize) }}</span>
     <svg class="icon cp" @click="next">
       <use xlink:href="#chevron-right"></use>
     </svg>
   </span>
 </template>
-<script lang="js">      // tslint:disable
-export default {
-  name: 'RkPage',
-  props: {
-    name: {
-      type: String,
-      default: '',
+<script lang="js">
+        // tslint:disable
+  export default {
+    name: 'RkPage',
+    props: {
+      name: {
+        type: String,
+        default: '',
+      },
+      currentPage: {
+        type: Number,
+        default: 1,
+      },
+      currentSize: {
+        type: Number,
+        default: 10,
+      },
+      total: {
+        type: Number,
+        default: 10,
+      },
     },
-    currentPage: {
-      type: Number,
-      default: 1,
-    },
-    currentSize: {
-      type: Number,
-      default: 10,
+    computed: {
+      last() {
+        if (this.currentPage * this.currentSize > this.total) {
+          return this.total;
+        }
+        return this.currentPage * this.currentSize;
+      },
+      totalPages() {
+        return Math.ceil(this.total / this.currentSize)
+      }
     },
-    total: {
-      type: Number,
-      default: 10,
+    data() {
+      return {
+        current: '',
+      };
     },
-  },
-  computed: {
-    last() {
-      if (this.currentPage * this.currentSize > this.total) {
-        return this.total;
-      }
-      return this.currentPage * this.currentSize;
+    watch: {
+      currentPage() { this.current = parseInt(this.currentPage); },
     },
-    totalPages() {
-      return Math.ceil(this.total / this.currentSize)
-    }
-  },
-  data() {
-    return {
-      current: '',
-    };
-  },
-  watch: {
-    currentPage() { this.current = parseInt(this.currentPage); },
-  },
-  beforeMount() {
-    this.current = this.currentPage;
-  },
-  methods: {
-    next() {
-      if (this.current !== this.totalPages) {
-        this.current = this.current + 1;
-        this.$emit('changePage', this.current);
-      }
+    beforeMount() {
+      this.current = this.currentPage;
     },
-    pre() {
-      if (this.current !== 1) {
-        this.current = this.current - 1;
-        this.$emit('changePage', this.current);
+    methods: {
+      next() {
+        if (this.current !== this.totalPages) {
+          this.current = this.current + 1;
+          this.$emit('changePage', this.current);
+        }
+      },
+      pre() {
+        if (this.current !== 1) {
+          this.current = this.current - 1;
+          this.$emit('changePage', this.current);
+        }
+      },
+      goToCertainPage() {
+        var regInt = /^0*[1-9]\d*$/
+        if (regInt.test(this.current) && this.current <= this.totalPages) {
+          this.$emit('changePage', this.current);
+        }
       }
     },
-    goToCertainPage() {
-      var regInt = /^0*[1-9]\d*$/
-      if (regInt.test(this.current) && this.current <= this.totalPages) {
-        this.$emit('changePage', this.current);
-      } 
-    }
-  },
-};
+  };
 </script>
 <style lang="scss" scoped>
-.rk-page{
-  display: inline-flex;
-  .icon{
-    padding: 3px;
-    opacity: 0.5;
-    &:hover{
-      opacity: 1;
-      color: #448dfe;
+  .rk-page {
+    display: inline-flex;
+    .icon {
+      padding: 3px;
+      opacity: 0.5;
+      &:hover {
+        opacity: 1;
+        color: #448dfe;
+      }
     }
   }
-}
-.rk-page-input{
-  width: 40px;
-  outline: 0;
-  border-style: unset;
-  border-radius: 4px;
-  border: 1px solid #c1c5ca55;
-}
+  .rk-page-input {
+    width: 40px;
+    outline: 0;
+    border-style: unset;
+    border-radius: 4px;
+    border: 1px solid #c1c5ca55;
+  }
 </style>
diff --git a/src/components/rk-panel.vue b/src/components/rk-panel.vue
index 190fcc8..8dd3a44 100644
--- a/src/components/rk-panel.vue
+++ b/src/components/rk-panel.vue
@@ -1,51 +1,45 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+/** * Licensed to the Apache Software Foundation (ASF) under one or more *
+contributor license agreements. See the NOTICE file distributed with * this work
+for additional information regarding copyright ownership. * The ASF licenses
+this file to You under the Apache License, Version 2.0 * (the "License"); you
+may not use this file except in compliance with * the License. You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under
+the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. * See the License for the
+specific language governing permissions and * limitations under the License. */
 
 <template>
-  <div class="rk-box" :style="width?`width: ${width};`:''">
-    <div class="rk-box-title ell">{{title}}</div>
+  <div class="rk-box" :style="width ? `width: ${width};` : ''">
+    <div class="rk-box-title ell">{{ title }}</div>
     <div class="rk-box-container"><slot></slot></div>
... 16140 lines suppressed ...


Mime
View raw message