fix: starter template icons fix and auto resize of custon icons are reverted (#1298)

* fix: starter template icons fix and auto resize of custon icons are reverted

* fix: slidev icon revert

uno.config.ts

@@ -1,52 +1,23 @@
 import { globSync } from 'fast-glob';
 import fs from 'node:fs/promises';
-import { basename, resolve } from 'node:path';
+import { basename } from 'node:path';
 import { defineConfig, presetIcons, presetUno, transformerDirectives } from 'unocss';
-import type { IconifyJSON } from '@iconify/types';
 
-// Debug: Log the current working directory and icon paths
-console.log('CWD:', process.cwd());
-
-// Use resolve to get absolute path and normalize slashes
-const iconsDir = resolve(process.cwd(), 'icons');
-const iconPaths = globSync('*.svg', {
-  cwd: iconsDir,
-  absolute: true,
-  onlyFiles: true,
-});
-
-console.log('Found icons:', iconPaths);
+const iconPaths = globSync('./icons/*.svg');
 
 const collectionName = 'bolt';
 
-const customIconCollection = {
-  [collectionName]: iconPaths.reduce(
-    (acc, iconPath) => {
-      const [iconName] = basename(iconPath).split('.');
-      console.log(`Loading icon: ${iconName} from ${iconPath}`); // Debug log
+const customIconCollection = iconPaths.reduce(
+  (acc, iconPath) => {
+    const [iconName] = basename(iconPath).split('.');
 
-      acc[iconName] = async () => {
-        try {
-          const content = await fs.readFile(iconPath, 'utf8');
+    acc[collectionName] ??= {};
+    acc[collectionName][iconName] = async () => fs.readFile(iconPath, 'utf8');
 
-          // Simplified SVG processing
-          return content
-            .replace(/fill="[^"]*"/g, 'fill="currentColor"')
-            .replace(/fill='[^']*'/g, "fill='currentColor'")
-            .replace(/width="[^"]*"/g, 'width="24"')
-            .replace(/height="[^"]*"/g, 'height="24"')
-            .replace(/viewBox="[^"]*"/g, 'viewBox="0 0 24 24"');
-        } catch (error) {
-          console.error(`Error loading icon ${iconName}:`, error);
-          return '';
-        }
-      };
-
-      return acc;
-    },
-    {} as Record<string, () => Promise<string>>,
-  ),
-};
+    return acc;
+  },
+  {} as Record<string, Record<string, () => Promise<string>>>,
+);
 
 const BASE_COLORS = {
   white: '#FFFFFF',
@@ -128,9 +99,7 @@ const COLOR_PRIMITIVES = {
 
 export default defineConfig({
   safelist: [
-    // Explicitly safelist all icon combinations
-    ...Object.keys(customIconCollection[collectionName] || {}).map((x) => `i-${collectionName}-${x}`),
-    ...Object.keys(customIconCollection[collectionName] || {}).map((x) => `i-${collectionName}:${x}`),
+    ...Object.keys(customIconCollection[collectionName] || {}).map(x => `i-bolt:${x}`)
   ],
   shortcuts: {
     'bolt-ease-cubic-bezier': 'ease-[cubic-bezier(0.4,0,0.2,1)]',
@@ -273,27 +242,9 @@ export default defineConfig({
     presetIcons({
       warn: true,
       collections: {
-        bolt: customIconCollection.bolt,
-        ph: async () => {
-          const icons = await import('@iconify-json/ph/icons.json');
-          return icons.default as IconifyJSON;
-        },
-      },
-      extraProperties: {
-        display: 'inline-block',
-        'vertical-align': 'middle',
-        width: '24px',
-        height: '24px',
-      },
-      customizations: {
-        customize(props) {
-          return {
-            ...props,
-            width: '24px',
-            height: '24px',
-          };
-        },
+        ...customIconCollection,
       },
+      unit: 'em',
     }),
   ],
 });