feat: update file-tree icons

Author: antfu

components/FileIcon.vue

@@ -8,40 +8,40 @@ const props = defineProps<{
 const FILE_ICONS = [
   {
     match: /\.vue$/,
-    icon: 'i-logos-vue',
+    icon: 'i-catppuccin-vue',
   },
   {
     match: /nuxt\.config\.\w+$/,
-    icon: 'i-logos-nuxt-icon scale-110',
+    icon: 'i-catppuccin-nuxt',
   },
   {
     match: /package\.json$/,
-    icon: 'i-file-icons-npm text-red scale-110',
+    icon: 'i-catppuccin-npm',
   },
   {
     match: /\.[mc]?tsx?$/,
-    icon: 'i-file-icons-typescript-alt text-blue3',
+    icon: 'i-catppuccin-typescript',
   },
   {
     match: /\.[mc]?jsx?$/,
-    icon: 'i-devicon-javascript',
+    icon: 'i-catppuccin-javascript',
   },
 ]
 
 const icon = computed(() => {
   if (props.isDirectory) {
     return props.isDirectoryOpen
-      ? 'i-ph:folder-open-duotone scale-120'
-      : 'i-ph:folder-simple-duotone scale-120'
+      ? 'i-catppuccin-folder-open'
+      : 'i-catppuccin-folder'
   }
   for (const { match, icon } of FILE_ICONS) {
     if (match.test(props.path))
       return icon
   }
-  return 'i-ph:file-duotone scale-120'
+  return 'i-catppuccin-file'
 })
 </script>
 
 <template>
-  <div :class="icon" />
+  <div :class="icon" light="brightness-60 hue-rotate-180 invert-100 saturate-200" scale-110 />
 </template>

components/PanelEditorFileSystemTree.vue

@@ -57,7 +57,7 @@ const folderCaret = computed(() => {
       :style="{
         paddingLeft: `${0.2 + 0.8 * (props.depth)}rem`,
       }"
-      :class="isFileSelected ? 'bg-active' : 'saturate-0 text-faded'"
+      :class="isFileSelected ? 'bg-active' : 'text-faded'"
       w-full flex items-center gap-1 px2 py1 text-left text-sm
       @click="handleClick"
     >

package.json

@@ -36,6 +36,7 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.26.0",
+    "@iconify-json/catppuccin": "^1.1.4",
     "@iconify-json/logos": "^1.1.44",
     "@iconify-json/ph": "^1.1.14",
     "@iconify-json/svg-spinners": "^1.1.3",