feat: use Ic icon on custom inspector/tab/command (#466)

Co-authored-by: Alex <[email protected]>
Co-authored-by: Alex <[email protected]>

Author: webfansplz

docs/plugins/api.md

@@ -31,6 +31,8 @@ $ bun add -D @vue/devtools-api
 
 ## `addCustomTab`
 
+You can choose any icon from [Material Design Icons](https://fonts.google.com/icons) or [Iconify Ic Baseline](https://icones.netlify.app/collection/ic?variant=Baseline), for example `star`.
+
 ```ts
 import { addCustomTab } from '@vue/devtools-api'
 
@@ -39,8 +41,8 @@ addCustomTab({
   name: 'vue-use',
   // title to display in the tab
   title: 'VueUse',
-  // any icon from Iconify, or a URL to an image
-  icon: 'i-logos-vueuse',
+  // any icon from material design icons or a URL to an image
+  icon: 'https://vueuse.org/favicon.svg',
   // iframe view
   view: {
     type: 'iframe',
@@ -52,6 +54,8 @@ addCustomTab({
 
 ## `addCustomCommand`
 
+You can choose any icon from [Material Design Icons](https://fonts.google.com/icons) or [Iconify Ic Baseline](https://icones.netlify.app/collection/ic?variant=Baseline), for example `star`.
+
 ```ts
 import { addCustomCommand } from '@vue/devtools-api'
 
@@ -61,8 +65,8 @@ addCustomCommand({
   id: 'vueuse',
   // title to display in the command
   title: 'VueUse',
-  // any icon from Iconify, or a URL to an image
-  icon: 'i-logos-vueuse',
+  // any icon from material design icons or a URL to an image
+  icon: 'https://vueuse.org/favicon.svg',
   action: {
     type: 'url',
     src: 'https://vueuse.org/'
@@ -75,14 +79,13 @@ addCustomCommand({
   id: 'vueuse',
   // title to display in the command
   title: 'VueUse',
-  // any icon from Iconify, or a URL to an image
-  icon: 'i-logos-vueuse',
+  // any icon from material design icons or a URL to an image
+  icon: 'https://vueuse.org/favicon.svg',
   // submenu, which is shown when the menu is clicked
   children: [
     {
       id: 'vueuse:github',
       title: 'Github',
-      icon: 'i-carbon-logo-github',
       action: {
         type: 'url',
         src: 'https://github.com/vueuse/vueuse'
@@ -91,7 +94,7 @@ addCustomCommand({
     {
       id: 'vueuse:website',
       title: 'Website',
-      icon: 'i-logos-vueuse',
+      icon: 'auto-awesome',
       action: {
         type: 'url',
         src: 'https://vueuse.org/'

packages/applet/src/modules/custom-inspector/components/state/Index.vue

@@ -4,7 +4,7 @@ import { Pane, Splitpanes } from 'splitpanes'
 import { DevToolsMessagingEvents, onRpcConnected, rpc } from '@vue/devtools-core'
 import { parse } from '@vue/devtools-kit'
 import type { CustomInspectorNode, CustomInspectorOptions, CustomInspectorState } from '@vue/devtools-kit'
-import { vTooltip } from '@vue/devtools-ui'
+import { VueIcIcon, vTooltip } from '@vue/devtools-ui'
 import { until } from '@vueuse/core'
 import Navbar from '~/components/basic/Navbar.vue'
 import DevToolsHeader from '~/components/basic/DevToolsHeader.vue'
@@ -186,7 +186,7 @@ onUnmounted(() => {
             <div v-if="actions?.length" class="mb-1 flex justify-end pb-1" border="b dashed base">
               <div class="flex items-center gap-2 px-1">
                 <div v-for="(action, index) in actions" :key="index" v-tooltip.bottom-end="{ content: action.tooltip }" class="flex items-center gap1" @click="callAction(index)">
-                  <i :class="`i-ic-baseline-${action.icon.replace(/\_/g, '-')}`" cursor-pointer op70 text-base hover:op100 />
+                  <VueIcIcon :name="`baseline-${action.icon.replace(/\_/g, '-')}`" cursor-pointer op70 text-base hover:op100 />
                 </div>
               </div>
             </div>
@@ -200,7 +200,7 @@ onUnmounted(() => {
             <div v-if="nodeActions?.length" class="mb-1 flex justify-end pb-1" border="b dashed base">
               <div class="flex items-center gap-2 px-1">
                 <div v-for="(action, index) in nodeActions" :key="index" v-tooltip.bottom-end="{ content: action.tooltip }" class="flex items-center gap1" @click="callNodeAction(index)">
-                  <i :class="`i-ic-baseline-${action.icon.replace(/\_/g, '-')}`" cursor-pointer op70 text-base hover:op100 />
+                  <VueIcIcon :name="`baseline-${action.icon.replace(/\_/g, '-')}`" cursor-pointer op70 text-base hover:op100 />
                 </div>
               </div>
             </div>

packages/applet/src/modules/custom-inspector/index.vue

@@ -35,7 +35,6 @@ const routes = computed(() => {
       path: '/about',
       name: 'About',
       component: About,
-      icon: 'https://raw.githubusercontent.com/TanStack/query/main/packages/vue-query/media/vue-query.svg',
     },
   ].filter(Boolean) as VirtualRoute[]
 })

packages/client/package.json

@@ -25,7 +25,6 @@
   },
   "dependencies": {
     "@unocss/preset-icons": "^0.61.0",
-    "@unocss/runtime": "^0.61.0",
     "@vue/devtools-applet": "workspace:^",
     "@vue/devtools-core": "workspace:^",
     "@vue/devtools-kit": "workspace:^",
@@ -34,6 +33,7 @@
     "@vueuse/core": "^10.11.0",
     "@vueuse/integrations": "^10.11.0",
     "colord": "^2.9.3",
+    "fast-deep-equal": "^3.1.3",
     "fuse.js": "^7.0.0",
     "minimatch": "^9.0.4",
     "shiki": "^1.9.0",

packages/client/src/App.vue

@@ -3,7 +3,6 @@ import { Pane, Splitpanes } from 'splitpanes'
 import { useDevToolsColorMode } from '@vue/devtools-ui'
 import { DevToolsMessagingEvents, onDevToolsConnected, onRpcConnected, refreshCurrentPageData, rpc, useDevToolsState } from '@vue/devtools-core'
 
-import('./setup/unocss-runtime')
 useDevToolsColorMode()
 const router = useRouter()
 const route = useRoute()

packages/client/src/components/common/SideNav.vue

@@ -22,9 +22,11 @@ const overflowTabs = computed(() => flattenedTabs.value.slice(containerCapacity.
 const categorizedInlineTabs = getCategorizedTabs(inlineTabs, enabledTabs)
 const categorizedOverflowTabs = getCategorizedTabs(overflowTabs, enabledTabs)
 
-const displayedTabs = computed(() => (sidebarScrollable.value || sidebarExpanded.value)
-  ? enabledTabs.value
-  : categorizedInlineTabs.value)
+const displayedTabs = computed(() =>
+  (sidebarScrollable.value || sidebarExpanded.value)
+    ? enabledTabs.value
+    : categorizedInlineTabs.value,
+)
 
 onClickOutside(
   panel,

packages/client/src/components/common/SideNavItem.vue

@@ -55,7 +55,7 @@ function onClick() {
           text-xl
           :icon="tab.icon"
           :fallback="tab.fallbackIcon"
-          title="Settings"
+          :title="tab.name"
           :show-title="false"
         />
         <span v-if="!minimized" text-md overflow-hidden text-ellipsis ws-nowrap>

packages/client/src/components/common/TabIcon.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { isUrlString } from '@vue/devtools-shared'
+import { VueIcIcon } from '@vue/devtools-ui'
+
 const props = withDefaults(defineProps<{
   icon?: string
   title?: string
@@ -13,11 +16,14 @@ const _icon = ref<string | undefined>(props.icon)
 function onLoadError() {
   _icon.value = props.fallback
 }
+
+// For custom-inspector icons, the prefix is 'custom-ic-'
+const CUSTOM_IC_ICON_PREFIX = 'custom-ic-'
 </script>
 
 <template>
   <img
-    v-if="_icon && (_icon.startsWith('/') || _icon.match(/^https?:/))"
+    v-if="_icon && isUrlString(_icon)"
     :style="{
       width: '1em',
       height: '1em',
@@ -27,6 +33,10 @@ function onLoadError() {
     :alt="title"
     @error="onLoadError"
   >
+  <VueIcIcon
+    v-else-if="_icon?.startsWith(CUSTOM_IC_ICON_PREFIX)" :name="_icon.slice(CUSTOM_IC_ICON_PREFIX.length)"
+    v-bind="$attrs" :title="showTitle ? title : undefined"
+  />
   <div
     v-else
     :style="{

packages/client/src/composables/custom-inspector-tabs.ts

@@ -1,5 +1,4 @@
 import { useCustomInspector } from '@vue/devtools-applet'
-// @ts-expect-error skip type check
 import type { CustomInspectorType } from '@vue/devtools-applet'
 
 import type { ModuleBuiltinTab } from '~/types/tab'

packages/client/src/composables/state-commands.ts

@@ -2,6 +2,7 @@ import { randomStr } from '@vue/devtools-shared'
 import { CustomCommand } from '@vue/devtools-kit'
 import { MaybeRefOrGetter } from 'vue'
 import { useDevToolsState } from '@vue/devtools-core'
+import equal from 'fast-deep-equal'
 
 export interface CommandItem {
   id: string
@@ -26,17 +27,21 @@ export function useCommands() {
   const router = useRouter()
   const state = useDevToolsState()
 
-  const customCommands = ref<CustomCommand[]>(state.commands.value || [])
+  let cachedCustomCommands: CustomCommand[] = []
 
-  watchEffect(() => {
-    customCommands.value = state.commands.value || []
+  const customCommands = computed(() => {
+    if (equal(state.commands.value, cachedCustomCommands))
+      // Optimized computed value
+      return cachedCustomCommands
+    cachedCustomCommands = state.commands.value
+    return state.commands.value
   })
 
   const fixedCommands: CommandItem[] = [
     {
       id: 'fixed:settings',
       title: 'Settings',
-      icon: 'carbon-settings-adjust',
+      icon: 'i-carbon-settings-adjust',
       action: () => {
         router.push('/settings')
       },
@@ -129,10 +134,10 @@ export async function getVueDocsCommands() {
   if (!_vueDocsCommands) {
     const list = await import('../../data/vue-apis.json').then(i => i.default)
     _vueDocsCommands = list.map(i => ({
-      ...i,
-      icon: 'carbon-api-1',
+      ...i!,
+      icon: 'i-carbon-api-1',
       action: () => {
-        window.open(i.url, '_blank')
+        window.open(i!.url, '_blank')
       },
     }))
   }