fix: unified icons

Author: antfu

packages/vite/src/app/components/data/AssetDetails.vue

@@ -77,7 +77,7 @@ function openInEditor() {
       <div flex-auto />
       <div flex="~ gap-2">
         <button btn-action @click="openInEditor">
-          <div i-carbon-launch />
+          <div i-ph-arrow-square-out-duotone />
           Open in editor
         </button>
         <button btn-action @click="showSource = true">
@@ -96,7 +96,7 @@ function openInEditor() {
         <span flex-auto />
         <DisplayIconButton
           title="Line Wrapping"
-          class-icon="i-carbon-text-wrap"
+          class-icon="i-ph-arrow-u-down-left-duotone"
           :active="settings.codeviewerLineWrap"
           @click="settings.codeviewerLineWrap = !settings.codeviewerLineWrap"
         />

packages/vite/src/app/components/data/ChunkDetails.vue

@@ -26,7 +26,7 @@ withDefaults(defineProps<{
 
       <span op50 font-mono>#{{ chunk.chunk_id }}</span>
       <div flex="~ gap-1 items-center">
-        <div i-carbon-document-import />
+        <div i-ph-file-arrow-up-duotone />
         {{ chunk.imports.length }}
       </div>
       <div flex="~ gap-1 items-center">

packages/vite/src/app/components/data/PluginDetailsLoader.vue

@@ -94,7 +94,7 @@ const totalDuration = computed(() => state.value?.calls?.reduce((arc, item) => a
         />
         <span op40>|</span>
         <DisplayNumberBadge
-          :number="state?.calls?.length ?? 0" icon="i-ph:arrow-counter-clockwise"
+          :number="state?.calls?.length ?? 0" icon="i-ph-arrow-counter-clockwise"
           color="transparent color-scale-neutral"
           :title="`Total calls: ${state?.calls?.length ?? 0}`"
         />

packages/vite/src/app/components/data/PluginDetailsTable.vue

@@ -89,7 +89,7 @@ function toggleDurationSortType() {
           Module
           <VMenu>
             <span w-6 h-6 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center">
-              <i text-xs class="i-carbon-filter" :class="filterModuleTypes.length !== searchFilterTypes.length ? 'text-primary op100' : 'op50'" />
+              <i text-xs class="i-ph-funnel-duotone" :class="filterModuleTypes.length !== searchFilterTypes.length ? 'text-primary op100' : 'op50'" />
             </span>
             <template #popper>
               <div class="p2" flex="~ col gap2">
@@ -126,7 +126,7 @@ function toggleDurationSortType() {
         <button flex="~ row gap1 items-center justify-center" w-full @click="toggleDurationSortType">
           Duration
           <span w-6 h-6 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center">
-            <i text-xs :class="[durationSortType !== 'asc' ? 'i-carbon-arrow-down' : 'i-carbon-arrow-up', durationSortType ? 'op100 text-primary' : 'op50']" />
+            <i text-xs :class="[durationSortType !== 'asc' ? 'i-ph-arrow-down-duotone' : 'i-ph-arrow-up-duotone', durationSortType ? 'op100 text-primary' : 'op50']" />
           </span>
         </button>
       </div>

packages/vite/src/app/components/display/ChunkImports.vue

@@ -45,7 +45,7 @@ const { state: chunk } = useAsyncState(
     <div text-sm flex="~ items-center gap-2">
       <span op50 font-mono>#{{ chunk.chunk_id }}</span>
       <div flex="~ gap-1 items-center">
-        <div i-carbon-document-import />
+        <div i-ph-file-arrow-up-duotone />
         {{ chunk.imports.length }}
       </div>
       <div flex="~ gap-1 items-center">

packages/vite/src/app/components/display/ModuleGraph.vue

@@ -146,7 +146,7 @@ onMounted(() => {
           title="Expand All"
           @click="expandAll()"
         >
-          <div class="i-carbon:expand-categories" />
+          <div class="i-ph-arrows-out-simple-duotone" />
         </button>
         <button
           v-tooltip.left="'Collapse All'"
@@ -157,7 +157,7 @@ onMounted(() => {
           title="Collapse All"
           @click="collapseAll()"
         >
-          <div class="i-carbon:collapse-categories" />
+          <div class="i-ph-arrows-in-simple-duotone" />
         </button>
 
         <div border="t base" my1 />

packages/vite/src/app/components/display/TreeNode.vue

@@ -43,7 +43,7 @@ function select(node: ModuleDest) {
       px2 py1 rounded
       hover="bg-active "
     >
-      <div class="i-ph:caret-right-duotone transition op50" :class="open ? 'rotate-90' : ''" />
+      <div class="i-ph-caret-right-duotone transition op50" :class="open ? 'rotate-90' : ''" />
       <div :class="open ? iconOpen || icon : icon" inline-block vertical-text-bottom />
       <div font-mono>
         <DisplayHighlightedPath :path="node.name || ''" />

packages/vite/src/app/components/flowmap/ModuleFlowDetails.vue

@@ -74,7 +74,7 @@ function handleClose() {
         <div flex-auto />
         <DisplayIconButton
           title="Line Wrapping"
-          class-icon="i-carbon-text-wrap"
+          class-icon="i-ph-arrow-u-down-left-duotone"
           :active="settings.codeviewerLineWrap"
           @click="settings.codeviewerLineWrap = !settings.codeviewerLineWrap"
         />

packages/vite/src/app/components/flowmap/NodePluginInfo.vue

@@ -17,7 +17,7 @@ defineProps<{
     />
     <span op40>|</span>
     <DisplayNumberBadge
-      :number="calls" icon="i-ph:arrow-counter-clockwise"
+      :number="calls" icon="i-ph-arrow-counter-clockwise"
       color="transparent color-scale-neutral"
       :title="`Total calls: ${calls}`"
     />

packages/vite/src/app/components/flowmap/PluginFlow.vue

@@ -16,31 +16,31 @@ const tableFieldFilterRules = [
     match: /hookName/,
     name: 'hookName',
     description: 'Hook name',
-    icon: 'i-carbon:function',
+    icon: 'i-ph-function-duotone',
   },
   {
     match: /module/,
     name: 'module',
     description: 'Module',
-    icon: 'i-ph:package-duotone',
+    icon: 'i-ph-package-duotone',
   },
   {
     match: /startTime/,
     name: 'startTime',
     description: 'Start Time',
-    icon: 'i-carbon:time',
+    icon: 'i-ph-clock-duotone',
   },
   {
     match: /endTime/,
     name: 'endTime',
     description: 'End Time',
-    icon: 'i-carbon:time',
+    icon: 'i-ph-clock-duotone',
   },
   {
     match: /duration/,
     name: 'duration',
     description: 'Duration',
-    icon: 'i-ph:clock-duotone',
+    icon: 'i-ph-clock-countdown-duotone',
   },
 ]
 const searchValue = ref<{ selected: string[] | null, search: false }>({