refactor: update icons

Author: antfu

packages/devtools/client/pages/modules/components.vue

@@ -4,7 +4,7 @@ import ComponentsGraph from '~/components/ComponentsGraph.vue'
 import ComponentsList from '~/components/ComponentsList.vue'
 
 definePageMeta({
-  icon: 'carbon-nominal',
+  icon: 'i-carbon-assembly-cluster',
   title: 'Components',
   order: 2,
 })

packages/devtools/client/pages/modules/overview.vue

@@ -34,7 +34,7 @@ function goIntro() {
 
       <!-- Banner -->
       <div flex="~ col" items-center mt-20>
-        <div flex="~" justify-center items-center mt--10>
+        <div flex="~" items-center justify-center mt--10>
           <NuxtLogo h-18 />
           <button mr--16 mt--6 @click="goIntro">
             <Badge
@@ -63,7 +63,7 @@ function goIntro() {
             />
             <Badge
               v-else
-              bg-gray-400:10 text-gray-400 mt--1
+              mt--1 bg-gray-400:10 text-gray-400
               title="latest"
               v-text="'latest'"
             />
@@ -75,7 +75,7 @@ function goIntro() {
             <div>{{ routes.length }} pages</div>
           </NuxtLink>
           <NuxtLink v-if="config" p4 theme-card-lime min-w-40 flex="~ col auto" to="/modules/components">
-            <div text-3xl carbon-nominal />
+            <div text-3xl i-carbon-assembly-cluster />
             <div>{{ components.length }} components</div>
           </NuxtLink>
           <NuxtLink v-if="config && autoImports" p4 min-w-40 theme-card-yellow flex="~ col auto" to="/modules/imports">
@@ -118,7 +118,7 @@ function goIntro() {
           Bug Reports
         </a>
         <VDropdown>
-          <button flex="~ gap1" items-center mxa inline-block op50 hover:op80>
+          <button flex="~ gap1" items-center op50 mxa inline-block hover:op80>
             <div i-carbon-settings />
             Settings
           </button>

packages/devtools/client/pages/modules/virtual-files.vue

@@ -2,7 +2,7 @@
 import Fuse from 'fuse.js'
 
 definePageMeta({
-  icon: 'carbon-assembly-reference',
+  icon: 'i-carbon-border-none',
   title: 'Virtual Files',
 })
 
@@ -86,7 +86,7 @@ const filteredFiles = computed(() => {
         v-for="f of filteredFiles" :key="f.id"
       >
         <NuxtLink
-          px2 py1 text-sm font-mono block truncate select-none
+          px2 text-sm py1 font-mono block truncate select-none
           :to="`/modules/virtual-files?id=${encodeURIComponent(f.id)}`"
           :class="f.id === current?.id ? 'text-primary n-bg-active' : 'text-secondary hover:n-bg-hover'"
         >
@@ -98,7 +98,7 @@ const filteredFiles = computed(() => {
 
     <template #right>
       <div v-if="current?.content" h-full of-hidden flex="~ col">
-        <div border="b base" px4 py2 text-sm op75 flex-none>
+        <div border="b base" text-sm flex-none px4 py2 op75>
           <code>{{ current.id }}</code>
         </div>
         <NCodeBlock of-auto h-full text-sm :code="current.content" lang="typescript" />

packages/devtools/client/styles/global.css

@@ -1,6 +1,7 @@
 html {
   --at-apply: font-sans;
 }
+
 html.dark {
   background: #151515;
   color-scheme: dark;
@@ -10,6 +11,7 @@ html.dark {
   counter-reset: step;
   counter-increment: step calc(var(--start, 1) - 1);
 }
+
 .shiki code .line::before {
   content: counter(step);
   counter-increment: step;
@@ -27,15 +29,18 @@ html.dark {
   --at-apply: bg-base dark:text-white rounded border border-base shadow;
   box-shadow: 0 6px 30px #0000001a;
 }
+
 .v-popper--theme-tooltip .v-popper__arrow-inner,
 .v-popper--theme-dropdown .v-popper__arrow-inner {
   visibility: visible;
   --at-apply: border-white dark:border-hex-121212;
 }
+
 .v-popper--theme-tooltip .v-popper__arrow-outer,
 .v-popper--theme-dropdown .v-popper__arrow-outer {
   --at-apply: border-base;
 }
+
 .v-popper--theme-tooltip.v-popper--shown,
 .v-popper--theme-tooltip.v-popper--shown * {
   transition: none !important;
@@ -51,39 +56,54 @@ html.dark {
   position: relative;
 }
 .splitpanes__splitter:before {
-  --at-apply: absolute left-0 top-0 transition; 
+  position: absolute;
+  left: 0;
+  top: 0;
+  transition: .2s ease;
   content: '';
-  transition: opacity 0.4s; 
+  transition: opacity 0.4s;
   z-index: 1;
 }
 .splitpanes__splitter:hover:before {
   background: #8881;
   opacity: 1;
 }
-.splitpanes--vertical > .splitpanes__splitter {
+.splitpanes--vertical>.splitpanes__splitter {
   width: 0 !important;
 }
-.splitpanes--horizontal > .splitpanes__splitter {
+.splitpanes--horizontal>.splitpanes__splitter {
   height: 0 !important;
 }
-.splitpanes--vertical > .splitpanes__splitter:before {left: -5px;right: -4px;height: 100%;}
-.splitpanes--horizontal > .splitpanes__splitter:before {top: -5px;bottom: -4px;width: 100%;}
+.splitpanes--vertical>.splitpanes__splitter:before {
+  left: -5px;
+  right: -4px;
+  height: 100%;
+}
+.splitpanes--horizontal>.splitpanes__splitter:before {
+  top: -5px;
+  bottom: -4px;
+  width: 100%;
+}
 
 /* JSON Editor */
 textarea {
   background: #8881
 }
+
 .json-editor-vue {
   --jse-theme-color: #8886 !important;
   --jse-theme-color-highlight: #8889 !important;
   --jse-background-color: #8881 !important;
 }
+
 .json-editor-vue .no-main-menu {
   border: none !important;
 }
+
 .json-editor-vue .jse-main {
   min-height: 1em !important;
 }
+
 .json-editor-vue .jse-contents {
   border-width: 0 !important;
   border-radius: 5px !important;

packages/devtools/src/integrations/vite-inspect.ts

@@ -18,7 +18,7 @@ export async function setup(nuxt: Nuxt, _functions: ServerFunctions) {
   addCustomTab(() => ({
     name: 'builtin-vite-inspect',
     title: 'Inspect',
-    icon: 'carbon-search',
+    icon: 'carbon-ibm-watson-discovery',
     view: {
       type: 'iframe',
       src: `${nuxt.options.app.baseURL}/_nuxt/__inspect/`.replace(/\/\//g, '/'),