Switch to unplugin-icons for icons

The following icons are used: Material Design Light - Chevron Left (Hide Sidebar) - Chevron Right (Show Sidebar) - Chevron Double Down (Page Down) - Magnify (Search) - Cog (Settings) Octicon - Trash 24 (Clear Logs) - Download 24 (Download Logs) - Container 24 (Container Listing) CoreUI Free - Columns (Pin as Column)
2025-12-24 06:28:42 +01:00 · 2021-11-06 22:11:09 -04:00
parent b01020dc0e
commit 07d3176178
13 changed files with 245 additions and 150 deletions
--- a/assets/App.vue
+++ b/assets/App.vue
@@ -27,13 +27,16 @@
    </splitpanes>
    <button
      @click="collapseNav = !collapseNav"
-      class="button is-small is-rounded is-settings-control"
+      class="button is-small is-rounded is-settings-control pl-1 pr-1"
      :class="{ collapsed: collapseNav }"
      id="hide-nav"
      v-if="!isMobile && !authorizationNeeded"
    >
-      <span class="icon">
-        <icon :name="collapseNav ? 'chevron-right' : 'chevron-left'"></icon>
+      <span class="pl-6 pr-2" v-if="collapseNav">
+        <chevron-right-icon />
+      </span>
+      <span v-else>
+        <chevron-left-icon />
      </span>
    </button>
  </main>
@@ -50,19 +53,22 @@ import SideMenu from "./components/SideMenu";
 import MobileMenu from "./components/MobileMenu";

 import PastTime from "./components/PastTime";
-import Icon from "./components/Icon";
 import FuzzySearchModal from "./components/FuzzySearchModal";

+import ChevronLeftIcon from "~icons/mdi-light/chevron-left";
+import ChevronRightIcon from "~icons/mdi-light/chevron-right";
+
 export default {
  name: "App",
  components: {
-    Icon,
    SideMenu,
    LogContainer,
    MobileMenu,
    Splitpanes,
    PastTime,
    Pane,
+    ChevronLeftIcon,
+    ChevronRightIcon,
  },
  data() {
    return {
@@ -168,6 +174,9 @@ export default {
  position: fixed;
  left: 10px;
  bottom: 10px;
+  & svg {
+    vertical-align: middle;
+  }
  &.collapsed {
    left: -40px;
    width: 60px;
--- a/assets/components/FuzzySearchModal.vue
+++ b/assets/components/FuzzySearchModal.vue
@@ -14,14 +14,16 @@
      <template slot-scope="props">
        <div class="media">
          <div class="media-left">
-            <span class="icon is-small" :class="props.option.state"><icon name="crate"></icon></span>
+            <span class="icon is-small" :class="props.option.state">
+              <container-icon />
+            </span>
          </div>
          <div class="media-content">
            {{ props.option.name }}
          </div>
          <div class="media-right">
            <span class="icon is-small column-icon" @click.stop.prevent="addColumn(props.option)" title="Pin as column">
-              <icon name="column"></icon>
+              <columns-icon />
            </span>
          </div>
        </div>
@@ -35,7 +37,8 @@ import { mapState, mapActions } from "vuex";
 import fuzzysort from "fuzzysort";

 import PastTime from "./PastTime";
-import Icon from "./Icon";
+import ContainerIcon from "~icons/octicon/container-24";
+import ColumnsIcon from "~icons/cil/columns";

 export default {
  props: {
@@ -51,8 +54,9 @@ export default {
  },
  name: "FuzzySearchModal",
  components: {
-    Icon,
    PastTime,
+    ContainerIcon,
+    ColumnsIcon,
  },
  mounted() {
    this.$nextTick(() => this.$refs.autocomplete.focus());
@@ -131,4 +135,8 @@ export default {
    visibility: visible;
  }
 }
+
+.icon {
+  vertical-align: middle;
+}
 </style>
--- a/assets/components/Icon.vue
+++ b/assets/components/Icon.vue
@@ -1,32 +0,0 @@
-<template functional>
-  <svg class="icomoon" :class="['icon-' + props.name]">
-    <use :href="'#icon-' + props.name"></use>
-  </svg>
-</template>
-
-<script>
-export default {
-  props: {
-    name: {
-      required: true,
-      type: String,
-    },
-  },
-  name: "Icon",
-};
-</script>
-<style lang="scss" scoped>
-.icomoon {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  stroke-width: 0;
-  stroke: currentColor;
-  fill: currentColor;
-
-  .icon:not(.keep-size) & {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>
--- a/assets/components/LogActionsToolbar.vue
+++ b/assets/components/LogActionsToolbar.vue
@@ -2,23 +2,19 @@
  <div class="toolbar mr-0 is-vcentered is-hidden-mobile">
    <div class="is-flex">
      <b-tooltip type="is-dark" label="Clear">
-        <a @click="onClearClicked" class="button is-small is-light is-inverted" id="clear">
-          <span class="icon">
-            <icon name="bin"></icon>
-          </span>
+        <a @click="onClearClicked" class="button is-small is-light is-inverted pl-1 pr-1" id="clear">
+          <clear-icon />
        </a>
      </b-tooltip>
      <div class="is-flex-grow-1"></div>
      <b-tooltip type="is-dark" label="Download">
        <a
-          class="button is-small is-light is-inverted"
+          class="button is-small is-light is-inverted pl-1 pr-1"
          id="download"
          :href="`${base}/api/logs/download?id=${container.id}`"
          download
        >
-          <span class="icon">
-            <icon name="save"></icon>
-          </span>
+          <download-icon />
        </a>
      </b-tooltip>
    </div>
@@ -28,7 +24,8 @@
 <script>
 import config from "../store/config";
 import hotkeys from "hotkeys-js";
-import Icon from "./Icon";
+import DownloadIcon from "~icons/octicon/download-24";
+import ClearIcon from "~icons/octicon/trash-24";

 export default {
  props: {
@@ -42,7 +39,8 @@ export default {
  },
  name: "LogActionsToolbar",
  components: {
-    Icon,
+    DownloadIcon,
+    ClearIcon,
  },
  computed: {
    base() {
@@ -87,6 +85,10 @@ export default {

  .button {
    background-color: rgba(0, 0, 0, 0) !important;
+
+    &.is-small {
+      font-size: 0.65rem;
+    }
  }
 }
 </style>
--- a/assets/components/ScrollableView.vue
+++ b/assets/components/ScrollableView.vue
@@ -13,8 +13,13 @@

    <div class="is-scrollbar-notification">
      <transition name="fade">
-        <button class="button" :class="hasMore ? 'has-more' : ''" @click="scrollToBottom('instant')" v-show="paused">
-          <icon name="chevrons-down"></icon>
+        <button
+          class="button pl-1 pr-1"
+          :class="hasMore ? 'has-more' : ''"
+          @click="scrollToBottom('instant')"
+          v-show="paused"
+        >
+          <chevron-double-down-icon />
        </button>
      </transition>
    </div>
@@ -22,8 +27,8 @@
 </template>

 <script>
-import Icon from "./Icon";
 import ScrollProgress from "./ScrollProgress";
+import ChevronDoubleDownIcon from "~icons/mdi-light/chevron-double-down";

 export default {
  props: {
@@ -33,8 +38,8 @@ export default {
    },
  },
  components: {
-    Icon,
    ScrollProgress,
+    ChevronDoubleDownIcon,
  },
  name: "ScrollableView",
  data() {
--- a/assets/components/Search.vue
+++ b/assets/components/Search.vue
@@ -11,7 +11,7 @@
          @keyup.esc="resetSearch()"
        />
        <span class="icon is-left">
-          <icon name="search"></icon>
+          <search-icon />
        </span>
      </p>
    </div>
@@ -24,13 +24,13 @@
 <script>
 import { mapActions, mapState } from "vuex";
 import hotkeys from "hotkeys-js";
-import Icon from "./Icon";
+import SearchIcon from "~icons/mdi-light/magnify";

 export default {
  props: [],
  name: "Search",
  components: {
-    Icon,
+    SearchIcon,
  },
  data() {
    return {
--- a/assets/components/SideMenu.vue
+++ b/assets/components/SideMenu.vue
@@ -10,24 +10,20 @@
      </div>
      <div class="column is-narrow has-text-right px-1">
        <button
-          class="button is-small is-rounded is-settings-control"
+          class="button is-small is-rounded is-settings-control pl-1 pr-1"
          @click="$emit('search')"
          title="Search containers (⌘ + k, ⌃k)"
        >
-          <span class="icon">
-            <icon name="search"></icon>
-          </span>
+          <search-icon />
        </button>
      </div>
      <div class="column is-narrow has-text-right px-0">
        <router-link
          :to="{ name: 'settings' }"
          active-class="is-active"
-          class="button is-small is-rounded is-settings-control"
+          class="button is-small is-rounded is-settings-control pl-1 pr-1"
        >
-          <span class="icon">
-            <icon name="cog"></icon>
-          </span>
+          <settings-icon />
        </router-link>
      </div>
    </div>
@@ -50,7 +46,7 @@
                v-show="!activeContainersById[item.id]"
                title="Pin as column"
              >
-                <icon name="column"></icon>
+                <columns-icon />
              </span>
            </div>
          </div>
@@ -63,13 +59,17 @@
 <script>
 import { mapActions, mapGetters, mapState } from "vuex";

-import Icon from "./Icon";
+import SearchIcon from "~icons/mdi-light/magnify";
+import SettingsIcon from "~icons/mdi-light/cog";
+import ColumnsIcon from "~icons/cil/columns";

 export default {
  props: [],
  name: "SideMenu",
  components: {
-    Icon,
+    SearchIcon,
+    SettingsIcon,
+    ColumnsIcon,
  },
  data() {
    return {};
@@ -116,6 +116,10 @@ li.exited a {
 .menu-list li {
  .column-icon {
    visibility: hidden;
+
+    & > span {
+      vertical-align: middle;
+    }
  }

  &:hover .column-icon {
--- a/assets/index.ejs
+++ b/assets/index.ejs
--- a/assets/pages/Index.vue
+++ b/assets/pages/Index.vue
@@ -50,7 +50,7 @@
                @keyup.enter="onEnter()"
              />
              <span class="icon is-left">
-                <icon name="search"></icon>
+                <search-icon />
              </span>
            </p>
          </div>
@@ -78,14 +78,14 @@

 <script>
 import { mapState } from "vuex";
-import Icon from "../components/Icon";
+import SearchIcon from "~icons/mdi-light/magnify";
 import PastTime from "../components/PastTime";
 import config from "../store/config";
 import fuzzysort from "fuzzysort";

 export default {
  name: "Index",
-  components: { Icon, PastTime },
+  components: { SearchIcon, PastTime },
  data() {
    return {
      version: config.version,
--- a/assets/pages/Settings.vue
+++ b/assets/pages/Settings.vue
@@ -92,15 +92,11 @@
 <script>
 import gt from "semver/functions/gt";
 import { mapActions, mapState } from "vuex";
-import Icon from "../components/Icon";
 import config from "../store/config";

 export default {
  props: [],
  name: "Settings",
-  components: {
-    Icon,
-  },
  data() {
    return {
      currentVersion: config.version,
--- a/package.json
+++ b/package.json
@@ -2,6 +2,16 @@
  "name": "dozzle",
  "version": "3.8.5",
  "description": "Realtime log viewer for docker containers. ",
+  "homepage": "https://github.com/amir20/dozzle#readme",
+  "bugs": {
+    "url": "https://github.com/amir20/dozzle/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/amir20/dozzle.git"
+  },
+  "license": "ISC",
+  "author": "",
  "scripts": {
    "watch": "npm-run-all -p watch:*",
    "watch:assets": "webpack --mode=development --watch",
@@ -14,19 +24,12 @@
    "test": "TZ=UTC jest",
    "postinstall": "husky install"
  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/amir20/dozzle.git"
-  },
-  "author": "",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/amir20/dozzle/issues"
-  },
-  "homepage": "https://github.com/amir20/dozzle#readme",
  "dependencies": {
    "@babel/core": "^7.15.8",
    "@babel/plugin-transform-runtime": "^7.15.8",
+    "@iconify-json/cil": "^1.0.1",
+    "@iconify-json/mdi-light": "^1.0.1",
+    "@iconify-json/octicon": "^1.0.5",
    "@vue/component-compiler-utils": "^3.3.0",
    "@vue/test-utils": "^1.2.2",
    "ansi-to-html": "^0.7.2",
@@ -54,6 +57,7 @@
    "semver": "^7.3.5",
    "splitpanes": "^2.3.8",
    "store": "^2.0.12",
+    "unplugin-icons": "^0.12.18",
    "vue": "^2.6.14",
    "vue-loader": "^15.9.8",
    "vue-meta": "^2.4.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3,6 +3,9 @@ lockfileVersion: 5.3
 specifiers:
  '@babel/core': ^7.15.8
  '@babel/plugin-transform-runtime': ^7.15.8
+  '@iconify-json/cil': ^1.0.1
+  '@iconify-json/mdi-light': ^1.0.1
+  '@iconify-json/octicon': ^1.0.5
  '@vue/component-compiler-utils': ^3.3.0
  '@vue/test-utils': ^1.2.2
  ansi-to-html: ^0.7.2
@@ -37,6 +40,7 @@ specifiers:
  semver: ^7.3.5
  splitpanes: ^2.3.8
  store: ^2.0.12
+  unplugin-icons: ^0.12.18
  vue: ^2.6.14
  vue-hot-reload-api: ^2.3.4
  vue-jest: ^3.0.7
@@ -54,6 +58,9 @@ specifiers:
 dependencies:
  '@babel/core': 7.15.8
  '@babel/plugin-transform-runtime': 7.15.8_@babel+core@7.15.8
+  '@iconify-json/cil': 1.0.1
+  '@iconify-json/mdi-light': 1.0.1
+  '@iconify-json/octicon': 1.0.5
  '@vue/component-compiler-utils': 3.3.0
  '@vue/test-utils': 1.2.2_9065e7474e033a8e4b95615fc8e6c36c
  ansi-to-html: 0.7.2
@@ -81,6 +88,7 @@ dependencies:
  semver: 7.3.5
  splitpanes: 2.3.8
  store: 2.0.12
+  unplugin-icons: 0.12.18_8986e2f0d0e5bab383d14422bd902276
  vue: 2.6.14
  vue-loader: 15.9.8_b8abb2f94d6497e7a4f45f5ed040153c
  vue-meta: 2.4.0
@@ -106,6 +114,19 @@ devDependencies:

 packages:

+  /@antfu/install-pkg/0.1.0:
+    resolution: {integrity: sha512-VaIJd3d1o7irZfK1U0nvBsHMyjkuyMP3HKYVV53z8DKyulkHKmjhhtccXO51WSPeeSHIeoJEoNOKavYpS7jkZw==}
+    dependencies:
+      execa: 5.1.1
+      find-up: 5.0.0
+    dev: false
+
+  /@antfu/utils/0.3.0:
+    resolution: {integrity: sha512-UU8TLr/EoXdg7OjMp0h9oDoIAVr+Z/oW9cpOxQQyrsz6Qzd2ms/1CdWx8fl2OQdFpxGmq5Vc4TwfLHId6nAZjA==}
+    dependencies:
+      '@types/throttle-debounce': 2.1.0
+    dev: false
+
  /@babel/code-frame/7.15.8:
    resolution: {integrity: sha512-2IAnmn8zbvC/jKYhq5Ki9I+DwjlrtMPUCH/CpHvqI4dNnlwHwsxoIhlc8WcYY5LSYknXQtAlFYuHfqAFCvQ4Wg==}
    engines: {node: '>=6.9.0'}
@@ -462,6 +483,34 @@ packages:
    resolution: {integrity: sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==}
    dev: true

+  /@iconify-json/cil/1.0.1:
+    resolution: {integrity: sha512-gLk0c25zSBtKKJWrGXVfQITeIdmvlSOiO/cKTVTQPG3W4qKh8V/wL3Fltb4j4iMPJgRVXylPPwKSwXbIDBDgZA==}
+    dependencies:
+      '@iconify/types': 1.0.10
+    dev: false
+
+  /@iconify-json/mdi-light/1.0.1:
+    resolution: {integrity: sha512-lbucb1t36lRRxEHNnJcROt0SRRRQgI6gmzj1Pv2qadrw/5mjLN6+OzOOCAIwCLDu//hU7xMkXDCw47aWtbRHaA==}
+    dependencies:
+      '@iconify/types': 1.0.10
+    dev: false
+
+  /@iconify-json/octicon/1.0.5:
+    resolution: {integrity: sha512-+D4xVN2Xw4hHaRclgJytkUCp7IXZZLN0jt6WNTPcTpUkVoOrBLDego+vWDVfuYASBhWuGYNUQA+HLwdmtJCFGQ==}
+    dependencies:
+      '@iconify/types': 1.0.10
+    dev: false
+
+  /@iconify/types/1.0.10:
+    resolution: {integrity: sha512-SN3z6einVeUckDQiE8p4POF7X4hk4/y2+a7a4ogJOCxX5XT6z1zXNN8dwS5O1vloXpc6mkHizRZm2qPnhK6NnQ==}
+    dev: false
+
+  /@iconify/utils/1.0.18:
+    resolution: {integrity: sha512-uCfJ7FdTxDk1DLKsvynTsYX4LnkGIDw+LCpoY0mRdl+NrNPCjYZ8HHYs4xzmo7cryRe0ZT0yuF2f3oipPIHn8w==}
+    dependencies:
+      '@iconify/types': 1.0.10
+    dev: false
+
  /@istanbuljs/load-nyc-config/1.1.0:
    resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
    engines: {node: '>=8'}
@@ -1326,6 +1375,10 @@ packages:
    resolution: {integrity: sha512-7NQmHra/JILCd1QqpSzl8+mJRc8ZHz3uDm8YV1Ks9IhK0epEiTw8aIErbvH9PI+6XbqhyIQy3462nEsn7UVzjQ==}
    dev: true

+  /@types/throttle-debounce/2.1.0:
+    resolution: {integrity: sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==}
+    dev: false
+
  /@types/yargs-parser/20.2.1:
    resolution: {integrity: sha512-7tFImggNeNBVMsn0vLrpn1H1uPrUBdnARPTpZoitY37ZrdJREzf7I16tMrlK3hen349gr1NYh8CmZQa7CTG6Aw==}

@@ -2387,6 +2440,12 @@ packages:
      base64-js: 1.5.1
      ieee754: 1.2.1

+  /builtins/4.0.0:
+    resolution: {integrity: sha512-qC0E2Dxgou1IHhvJSLwGDSTvokbRovU5zZFuDY6oY8Y2lF3nGt5Ad8YZK7GMtqzY84Wu7pXTPeHQeHcXSXsRhw==}
+    dependencies:
+      semver: 7.3.5
+    dev: false
+
  /bulma/0.9.3:
    resolution: {integrity: sha512-0d7GNW1PY4ud8TWxdNcP6Cc8Bu7MxcntD/RRLGWuiw/s0a9P+XlH/6QoOIrmbj6o8WWJzJYhytiu9nFjTszk1g==}
    dev: false
@@ -3553,6 +3612,14 @@ packages:
      locate-path: 5.0.0
      path-exists: 4.0.0

+  /find-up/5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+    dev: false
+
  /flat/5.0.2:
    resolution: {integrity: sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==}
    hasBin: true
@@ -4081,6 +4148,12 @@ packages:
      pkg-dir: 4.2.0
      resolve-cwd: 3.0.0

+  /import-meta-resolve/1.1.1:
+    resolution: {integrity: sha512-JiTuIvVyPaUg11eTrNDx5bgQ/yMKMZffc7YSjvQeSMXy58DO2SQ8BtAf3xteZvmzvjYh14wnqNjL8XVeDy2o9A==}
+    dependencies:
+      builtins: 4.0.0
+    dev: false
+
  /imurmurhash/0.1.4:
    resolution: {integrity: sha1-khi5srkoojixPcT7a21XbyMUU+o=}
    engines: {node: '>=0.8.19'}
@@ -5133,6 +5206,10 @@ packages:
    engines: {node: '>= 8'}
    dev: false

+  /kolorist/1.5.0:
+    resolution: {integrity: sha512-pPobydIHK884YBtkS/tWSZXpSAEpcMbilyun3KL37ot935qL2HNKm/tI45i/Rd+MxdIWEhm7/LmUQzWZYK+Qhg==}
+    dev: false
+
  /latest-version/5.1.0:
    resolution: {integrity: sha512-weT+r0kTkRQdCdYCNtkMwWXQTMEswKrFBkm4ckQOMVhhqhIMI1UT2hMj+1iigIhgSZm5gTmrRXBNoGUgaTY1xA==}
    engines: {node: '>=8'}
@@ -5229,12 +5306,26 @@ packages:
      json5: 1.0.1
    dev: false

+  /local-pkg/0.4.0:
+    resolution: {integrity: sha512-2XBWjO/v63JeR1HPzLJxdTVRQDB84Av2p2KtBA5ahvpyLUPubcAU6iXlAJrONcY7aSqgJhXxElAnKtnYsRolPQ==}
+    engines: {node: '>=14'}
+    dependencies:
+      mlly: 0.2.10
+    dev: false
+
  /locate-path/5.0.0:
    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
    engines: {node: '>=8'}
    dependencies:
      p-locate: 4.1.0

+  /locate-path/6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-locate: 5.0.0
+    dev: false
+
  /lodash.debounce/4.0.8:
    resolution: {integrity: sha1-gteb/zCmfEAF/9XiUVMArZyk168=}
    dev: false
@@ -5443,6 +5534,12 @@ packages:
    dependencies:
      minimist: 1.2.5

+  /mlly/0.2.10:
+    resolution: {integrity: sha512-xfyW6c2QBGArtctzNnTV5leOKX8nOMz2simeubtXofdsdSJFSNw+Ncvrs8kxcN3pBrQLXuYBHNFV6NgZ5Ryf4A==}
+    dependencies:
+      import-meta-resolve: 1.1.1
+    dev: false
+
  /ms/2.0.0:
    resolution: {integrity: sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=}

@@ -5772,6 +5869,13 @@ packages:
    dependencies:
      p-limit: 2.3.0

+  /p-locate/5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-limit: 3.1.0
+    dev: false
+
  /p-map/4.0.0:
    resolution: {integrity: sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==}
    engines: {node: '>=10'}
@@ -7253,6 +7357,56 @@ packages:
    engines: {node: '>= 0.8'}
    dev: true

+  /unplugin-icons/0.12.18_8986e2f0d0e5bab383d14422bd902276:
+    resolution: {integrity: sha512-o2nc6AGGk4StTx5xMTndVBylszRg/hJvHMO1eEFfrfw9yh+eedre2S4F8EHltn3FjADL2a17GpXcvCAwmONgXA==}
+    peerDependencies:
+      '@svgr/core': ^5.5.0
+      '@vue/compiler-sfc': ^3.0.2
+      vue-template-compiler: ^2.6.12
+      vue-template-es2015-compiler: ^1.9.0
+    peerDependenciesMeta:
+      '@svgr/core':
+        optional: true
+      '@vue/compiler-sfc':
+        optional: true
+      vue-template-compiler:
+        optional: true
+      vue-template-es2015-compiler:
+        optional: true
+    dependencies:
+      '@antfu/install-pkg': 0.1.0
+      '@antfu/utils': 0.3.0
+      '@iconify/utils': 1.0.18
+      debug: 4.3.2
+      kolorist: 1.5.0
+      local-pkg: 0.4.0
+      unplugin: 0.2.20_webpack@5.61.0
+      vue-template-compiler: 2.6.14
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+      - vite
+      - webpack
+    dev: false
+
+  /unplugin/0.2.20_webpack@5.61.0:
+    resolution: {integrity: sha512-CGnCaTqNjqeixpIlNEkpysxfR2hb4xv21xa4IURXnhYTfCp73UWuG0KcdanuhFJbwO5w+EGK4XaAaqdb/1vWbg==}
+    peerDependencies:
+      rollup: ^2.50.0
+      vite: ^2.3.0
+      webpack: 4 || 5
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      webpack: 5.61.0_webpack-cli@4.9.1
+      webpack-virtual-modules: 0.4.3
+    dev: false
+
  /update-notifier/5.1.0:
    resolution: {integrity: sha512-ItnICHbeMh9GqUy31hFPrD1kcuZ3rpxDZbf4KUDavXwS0bW5m7SLbDQpGX3UYr072cbrF5hFUs3r5tUsPwjfHw==}
    engines: {node: '>=10'}
@@ -7608,6 +7762,10 @@ packages:
    engines: {node: '>=10.13.0'}
    dev: false

+  /webpack-virtual-modules/0.4.3:
+    resolution: {integrity: sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==}
+    dev: false
+
  /webpack/5.61.0_webpack-cli@4.9.1:
    resolution: {integrity: sha512-fPdTuaYZ/GMGFm4WrPi2KRCqS1vDp773kj9S0iI5Uc//5cszsFEDgHNaX4Rj1vobUiU1dFIV3mA9k1eHeluFpw==}
    engines: {node: '>=10.13.0'}
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,6 +3,7 @@ const { VueLoaderPlugin } = require("vue-loader");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const WebpackPwaManifest = require("webpack-pwa-manifest");
+const Icons = require("unplugin-icons/webpack");

 module.exports = (env, argv) => ({
  stats: { children: false, entrypoints: false, modules: false },
@@ -59,6 +60,10 @@ module.exports = (env, argv) => ({
      background_color: "#222",
      display: "standalone",
    }),
+    Icons({
+      compiler: "vue2",
+      scale: 2,
+    }),
  ],
  resolve: {
    alias: {