Cleans up icons

assets/components.d.ts

@@ -9,12 +9,10 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    CarbonCaretDown: typeof import('~icons/carbon/caret-down')['default']
+    'Carbon:caretDown': typeof import('~icons/carbon/caret-down')['default']
-    'Cil:checkAlt': typeof import('~icons/cil/check-alt')['default']
     'Cil:checkCircle': typeof import('~icons/cil/check-circle')['default']
     'Cil:columns': typeof import('~icons/cil/columns')['default']
-    CilCheckAlt: typeof import('~icons/cil/check-alt')['default']
+    'Cil:findInPage': typeof import('~icons/cil/find-in-page')['default']
-    CilColumns: typeof import('~icons/cil/columns')['default']
     CilFindInPage: typeof import('~icons/cil/find-in-page')['default']
     ComplexLogItem: typeof import('./components/LogViewer/ComplexLogItem.vue')['default']
     ContainerStat: typeof import('./components/LogViewer/ContainerStat.vue')['default']
@@ -31,14 +29,19 @@ declare module '@vue/runtime-core' {
     LogLevel: typeof import('./components/LogViewer/LogLevel.vue')['default']
     LogViewer: typeof import('./components/LogViewer/LogViewer.vue')['default']
     LogViewerWithSource: typeof import('./components/LogViewer/LogViewerWithSource.vue')['default']
-    MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
+    'Mdi:dotsVertical': typeof import('~icons/mdi/dots-vertical')['default']
-    MdiLightChevronDoubleDown: typeof import('~icons/mdi-light/chevron-double-down')['default']
+    'Mdi:lightChevronDoubleDown': typeof import('~icons/mdi-light/chevron-double-down')['default']
-    MdiLightChevronLeft: typeof import('~icons/mdi-light/chevron-left')['default']
+    'Mdi:lightChevronLeft': typeof import('~icons/mdi-light/chevron-left')['default']
-    MdiLightChevronRight: typeof import('~icons/mdi-light/chevron-right')['default']
+    'Mdi:lightChevronRight': typeof import('~icons/mdi-light/chevron-right')['default']
-    MdiLightCog: typeof import('~icons/mdi-light/cog')['default']
+    'Mdi:lightCog': typeof import('~icons/mdi-light/cog')['default']
-    MdiLightLogout: typeof import('~icons/mdi-light/logout')['default']
+    'Mdi:lightLogout': typeof import('~icons/mdi-light/logout')['default']
+    'Mdi:lightMagndify': typeof import('~icons/mdi-light/magndify')['default']
+    'Mdi:lightMagnify': typeof import('~icons/mdi-light/magnify')['default']
     MdiLightMagnify: typeof import('~icons/mdi-light/magnify')['default']
     MobileMenu: typeof import('./components/MobileMenu.vue')['default']
+    'Octicon:container24': typeof import('~icons/octicon/container24')['default']
+    'Octicon:download24': typeof import('~icons/octicon/download24')['default']
+    'Octicon:trash24': typeof import('~icons/octicon/trash24')['default']
     OcticonContainer24: typeof import('~icons/octicon/container24')['default']
     OcticonDownload24: typeof import('~icons/octicon/download24')['default']
     OcticonTrash24: typeof import('~icons/octicon/trash24')['default']

assets/components/DropdownMenu.vue

@@ -3,7 +3,7 @@
     <div class="dropdown-trigger">
       <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
         <span class="icon">
-          <mdi-dots-vertical />
+          <mdi:dots-vertical />
         </span>
       </button>
     </div>
@@ -26,12 +26,14 @@
 
   & > .icon {
     height: 100%;
+
     & > svg {
       align-self: flex-start;
       height: 0.85em;
     }
   }
 }
+
 .is-top {
   & .dropdown-menu {
     top: 0;

assets/components/FuzzySearchModal.vue

@@ -14,7 +14,7 @@
         <div class="media">
           <div class="media-left">
             <span class="icon is-small" :class="item.state">
-              <octicon-container-24 />
+              <octicon:container-24 />
             </span>
           </div>
           <div class="media-content">
@@ -26,7 +26,7 @@
               @click.stop.prevent="addColumn(item)"
               :title="$t('tooltip.pin-column')"
             >
-              <cil-columns />
+              <cil:columns />
             </span>
           </div>
         </div>
@@ -130,9 +130,11 @@ function addColumn(container: Container) {
 
 :deep(a.dropdown-item) {
   padding-right: 1em;
+
   .media-right {
     visibility: hidden;
   }
+
   &:hover .media-right {
     visibility: visible;
   }

assets/components/LogViewer/LogActionsToolbar.vue

@@ -4,7 +4,7 @@
       <div class="level is-justify-content-start">
         <div class="level-left">
           <div class="level-item">
-            <octicon-trash-24 class="mr-4" />
+            <octicon:trash-24 class="mr-4" />
           </div>
         </div>
         <div class="level-right">
@@ -16,7 +16,7 @@
       <div class="level is-justify-content-start">
         <div class="level-left">
           <div class="level-item">
-            <octicon-download-24 class="mr-4" />
+            <octicon:download-24 class="mr-4" />
           </div>
         </div>
         <div class="level-right">
@@ -29,7 +29,7 @@
       <div class="level is-justify-content-start">
         <div class="level-left">
           <div class="level-item">
-            <mdi-light-magnify class="mr-4" />
+            <mdi:light-magnify class="mr-4" />
           </div>
         </div>
         <div class="level-right">

assets/components/LogViewer/LogViewer.vue

@@ -12,7 +12,7 @@
             <div class="level is-justify-content-start">
               <div class="level-left">
                 <div class="level-item">
-                  <cil-find-in-page class="mr-4" />
+                  <cil:find-in-page class="mr-4" />
                 </div>
               </div>
               <div class="level-right">
@@ -72,10 +72,12 @@ watch(
     display: flex;
     word-wrap: break-word;
     padding: 0.2em 1em;
+
     &:last-child {
       scroll-snap-align: end;
       scroll-margin-block-end: 5rem;
     }
+
     &:nth-child(odd) {
       background-color: rgba(125, 125, 125, 0.08);
     }

assets/components/MobileMenu.vue

@@ -29,7 +29,7 @@
         <div>
           <button class="button is-small is-rounded" @click="$emit('search')" :title="$t('tooltip.search')">
             <span class="icon">
-              <mdi-light-magnify />
+              <mdi:light-magnify />
             </span>
           </button>
         </div>
@@ -38,7 +38,7 @@
         <div>
           <router-link :to="{ name: 'settings' }" active-class="is-active" class="button is-small is-rounded">
             <span class="icon">
-              <mdi-light-cog />
+              <mdi:light-cog />
             </span>
           </router-link>
         </div>
@@ -47,7 +47,7 @@
         <div>
           <a class="button is-small is-rounded" :href="`${base}/logout`" :title="$t('button.logout')">
             <span class="icon">
-              <mdi-light-logout />
+              <mdi:light-logout />
             </span>
           </a>
         </div>

assets/components/ScrollableView.vue

@@ -22,7 +22,7 @@
           @click="scrollToBottom()"
           v-show="paused"
         >
-          <mdi-light-chevron-double-down />
+          <mdi:light-chevron-double-down />
         </button>
       </transition>
     </div>
@@ -97,6 +97,7 @@ section {
   .is-scrollbar-progress {
     text-align: right;
     margin-right: 110px;
+
     .scroll-progress {
       position: fixed;
       top: 60px;
@@ -111,6 +112,7 @@ section {
   .is-scrollbar-notification {
     text-align: right;
     margin-right: 65px;
+
     button {
       position: fixed;
       bottom: 30px;
@@ -138,9 +140,11 @@ section {
     100% {
       transform: translateY(0);
     }
+
     40% {
       transform: translateY(-30px);
     }
+
     60% {
       transform: translateY(-15px);
     }
@@ -150,6 +154,7 @@ section {
   .fade-leave-active {
     transition: opacity 0.15s ease-in;
   }
+
   .fade-enter,
   .fade-leave-to {
     opacity: 0;

assets/components/Search.vue

@@ -11,7 +11,7 @@
           @keyup.esc="resetSearch()"
         />
         <span class="icon is-left">
-          <mdi-light-magnify />
+          <mdi:light-magnify />
         </span>
       </p>
     </div>
@@ -52,6 +52,7 @@ onUnmounted(() => resetSearch());
     margin-left: 1em;
     background-color: var(--scheme-main-ter);
     opacity: 0.6;
+
     &:after,
     &:before {
       background-color: var(--text-color);
@@ -68,6 +69,7 @@ onUnmounted(() => resetSearch());
 
   .input {
     color: var(--body-color);
+
     &::placeholder {
       color: var(--border-color);
     }

assets/components/SideMenu.vue

@@ -19,7 +19,7 @@
               <o-button variant="primary" type="button" size="small">
                 <span>{{ sessionHost }}</span>
                 <span class="icon">
-                  <carbon-caret-down />
+                  <carbon:caret-down />
                 </span>
               </o-button>
             </template>
@@ -35,21 +35,21 @@
       <div class="column is-narrow py-0 pl-0 pr-1">
         <button class="button is-rounded is-small" @click="$emit('search')" :title="$t('tooltip.search')">
           <span class="icon">
-            <mdi-light-magnify />
+            <mdi:light-magnify />
           </span>
         </button>
       </div>
       <div class="column is-narrow py-0" :class="secured ? 'pl-0 pr-1' : 'px-0'">
         <router-link :to="{ name: 'settings' }" active-class="is-active" class="button is-rounded is-small">
           <span class="icon">
-            <mdi-light-cog />
+            <mdi:light-cog />
           </span>
         </router-link>
       </div>
       <div class="column is-narrow py-0 px-0" v-if="secured">
         <a class="button is-rounded is-small" :href="`${base}/logout`" :title="$t('button.logout')">
           <span class="icon">
-            <mdi-light-logout />
+            <mdi:light-logout />
           </span>
         </a>
       </div>

assets/layouts/default.vue

@@ -32,10 +32,10 @@
       v-if="!isMobile"
     >
       <span class="icon ml-2" v-if="collapseNav">
-        <mdi-light-chevron-right />
+        <mdi:light-chevron-right />
       </span>
       <span class="icon" v-else>
-        <mdi-light-chevron-left />
+        <mdi:light-chevron-left />
       </span>
     </button>
   </main>
@@ -87,6 +87,7 @@ function onResized(e: any) {
 :deep(.splitpanes--vertical > .splitpanes__splitter) {
   min-width: 3px;
   background: var(--border-color);
+
   &:hover {
     background: var(--border-hover-color);
   }
@@ -110,6 +111,7 @@ function onResized(e: any) {
   position: fixed;
   left: 10px;
   bottom: 10px;
+
   &.collapsed {
     left: -40px;
     width: 60px;

assets/pages/index.vue

@@ -48,7 +48,7 @@
                 @keyup.enter="onEnter()"
               />
               <span class="icon is-left">
-                <search-icon />
+                <mdi:light-magnify />
               </span>
             </p>
           </div>
@@ -75,7 +75,6 @@
 </template>
 
 <script lang="ts" setup>
-import SearchIcon from "~icons/mdi-light/magnify";
 import { useFuse } from "@vueuse/integrations/useFuse";
 
 const { version } = config;

assets/pages/settings.vue

@@ -39,7 +39,7 @@
                   <o-button variant="primary" type="button">
                     <span class="is-capitalized">{{ hourStyle }}</span>
                     <span class="icon">
-                      <carbon-caret-down />
+                      <carbon:caret-down />
                     </span>
                   </o-button>
                 </template>
@@ -64,7 +64,7 @@
                   <o-button variant="primary" type="button">
                     <span class="is-capitalized">{{ size }}</span>
                     <span class="icon">
-                      <carbon-caret-down />
+                      <carbon:caret-down />
                     </span>
                   </o-button>
                 </template>
@@ -92,7 +92,7 @@
                   <o-button variant="primary" type="button">
                     <span class="is-capitalized">{{ lightTheme }}</span>
                     <span class="icon">
-                      <carbon-caret-down />
+                      <carbon:caret-down />
                     </span>
                   </o-button>
                 </template>
@@ -177,6 +177,7 @@ fetchNextRelease();
 
 a.next-release {
   text-decoration: underline;
+
   &:hover {
     text-decoration: none;
   }