feat: support rendering iconify icon

Author: antfu

packages/core/playground/vite.config.ts

@@ -35,7 +35,7 @@ export default defineConfig({
         setup(ctx) {
           ctx.docks.register({
             title: 'Local',
-            icon: 'https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg',
+            icon: 'logos:vue',
             id: 'local',
             type: 'iframe',
             url: 'https://antfu.me',
@@ -50,7 +50,7 @@ export default defineConfig({
             }),
             id: 'local2',
             title: 'Local2',
-            icon: 'https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg',
+            icon: 'material-symbols-light:add-alert',
           })
         },
       },

packages/core/src/client/webcomponents/components/DockEntries.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
 import { toRefs } from 'vue'
+import DockIcon from './DockIcon.vue'
 
 const props = defineProps<{
   selected?: DevToolsDockEntry
@@ -40,12 +41,7 @@ function toggleDockEntry(dock: DevToolsDockEntry) {
         class="flex items-center justify-center p1.5 rounded-xl hover:bg-[#8881] hover:scale-120 transition-all duration-300 relative"
         @click="toggleDockEntry(dock)"
       >
-        <img
-          :src="dock.icon"
-          :alt="dock.title"
-          class="w-5 h-5 select-none"
-          draggable="false"
-        >
+        <DockIcon :icon="dock.icon" :title="dock.title" class="w-5 h-5 select-none" />
       </button>
       <div class="vite-devtools-dock-label text-xs group-hover:opacity-100 opacity-0 transition-opacity duration-300 w-max bg-glass border border-base z-10 rounded px2 absolute p1">
         {{ dock.title }}

packages/core/src/client/webcomponents/components/DockIcon.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+defineProps<{
+  icon: string
+  title?: string
+}>()
+
+function getIconUrl(str: string, color: 'dark' | 'light') {
+  if (str.includes('/'))
+    return str
+  const match = str.match(/^([\w-]+):([\w-]+)$/)
+  if (match) {
+    const [, collection, icon] = match
+    return `https://api.iconify.design/${collection}/${icon}.svg${color === 'dark' ? '?color=%23eee' : '?color=%23111'}`
+  }
+  return str
+}
+</script>
+
+<template>
+  <img
+    :src="getIconUrl(icon, 'dark')"
+    :alt="title"
+    draggable="false"
+  >
+</template>