revert

app/components/chat/StarterTemplates.tsx

@@ -14,7 +14,7 @@ const FrameworkLink: React.FC<FrameworkLinkProps> = ({ template }) => (
     className="items-center justify-center"
   >
     <div
-      className={`inline-flex items-center justify-center ${template.icon} w-8 h-8 text-4xl transition-theme opacity-25 hover:opacity-100 hover:text-purple-500 dark:text-white dark:opacity-50 dark:hover:opacity-100 dark:hover:text-purple-400 transition-all`}
+      className={`inline-block ${template.icon} w-8 h-8 text-4xl transition-theme opacity-25 hover:opacity-100 hover:text-purple-500 dark:text-white dark:opacity-50 dark:hover:opacity-100 dark:hover:text-purple-400 transition-all`}
       title={template.label}
     />
   </a>

app/utils/constants.ts

@@ -31,7 +31,7 @@ export const STARTER_TEMPLATES: Template[] = [
     description: 'Lightweight Astro starter template for building fast static websites',
     githubRepo: 'thecodacus/bolt-astro-basic-template',
     tags: ['astro', 'blog', 'performance'],
-    icon: 'i-bolt-astro',
+    icon: 'i-bolt:astro',
   },
   {
     name: 'bolt-nextjs-shadcn',
@@ -39,7 +39,7 @@ export const STARTER_TEMPLATES: Template[] = [
     description: 'Next.js starter fullstack template integrated with shadcn/ui components and styling system',
     githubRepo: 'thecodacus/bolt-nextjs-shadcn-template',
     tags: ['nextjs', 'react', 'typescript', 'shadcn', 'tailwind'],
-    icon: 'i-bolt-nextjs',
+    icon: 'i-bolt:nextjs',
   },
   {
     name: 'bolt-qwik-ts',
@@ -47,7 +47,7 @@ export const STARTER_TEMPLATES: Template[] = [
     description: 'Qwik framework starter with TypeScript for building resumable applications',
     githubRepo: 'thecodacus/bolt-qwik-ts-template',
     tags: ['qwik', 'typescript', 'performance', 'resumable'],
-    icon: 'i-bolt-qwik',
+    icon: 'i-bolt:qwik',
   },
   {
     name: 'bolt-remix-ts',
@@ -55,7 +55,7 @@ export const STARTER_TEMPLATES: Template[] = [
     description: 'Remix framework starter with TypeScript for full-stack web applications',
     githubRepo: 'thecodacus/bolt-remix-ts-template',
     tags: ['remix', 'typescript', 'fullstack', 'react'],
-    icon: 'i-bolt-remix',
+    icon: 'i-bolt:remix',
   },
   {
     name: 'bolt-slidev',
@@ -71,7 +71,7 @@ export const STARTER_TEMPLATES: Template[] = [
     description: 'SvelteKit starter template for building fast, efficient web applications',
     githubRepo: 'bolt-sveltekit-template',
     tags: ['svelte', 'sveltekit', 'typescript'],
-    icon: 'i-bolt-svelte',
+    icon: 'i-bolt:svelte',
   },
   {
     name: 'vanilla-vite',
@@ -79,7 +79,7 @@ export const STARTER_TEMPLATES: Template[] = [
     description: 'Minimal Vite starter template for vanilla JavaScript projects',
     githubRepo: 'thecodacus/vanilla-vite-template',
     tags: ['vite', 'vanilla-js', 'minimal'],
-    icon: 'i-bolt-vite',
+    icon: 'i-bolt:vite',
   },
   {
     name: 'bolt-vite-react',
@@ -87,7 +87,7 @@ export const STARTER_TEMPLATES: Template[] = [
     description: 'React starter template powered by Vite for fast development experience',
     githubRepo: 'thecodacus/bolt-vite-react-ts-template',
     tags: ['react', 'vite', 'frontend'],
-    icon: 'i-bolt-react',
+    icon: 'i-bolt:react',
   },
   {
     name: 'bolt-vite-ts',
@@ -95,7 +95,7 @@ export const STARTER_TEMPLATES: Template[] = [
     description: 'Vite starter template with TypeScript configuration for type-safe development',
     githubRepo: 'thecodacus/bolt-vite-ts-template',
     tags: ['vite', 'typescript', 'minimal'],
-    icon: 'i-bolt-typescript',
+    icon: 'i-bolt:typescript',
   },
   {
     name: 'bolt-vue',
@@ -103,7 +103,7 @@ export const STARTER_TEMPLATES: Template[] = [
     description: 'Vue.js starter template with modern tooling and best practices',
     githubRepo: 'thecodacus/bolt-vue-template',
     tags: ['vue', 'typescript', 'frontend'],
-    icon: 'i-bolt-vue',
+    icon: 'i-bolt:vue',
   },
   {
     name: 'bolt-angular',
@@ -111,6 +111,6 @@ export const STARTER_TEMPLATES: Template[] = [
     description: 'A modern Angular starter template with TypeScript support and best practices configuration',
     githubRepo: 'thecodacus/bolt-angular-template',
     tags: ['angular', 'typescript', 'frontend', 'spa'],
-    icon: 'i-bolt-angular',
+    icon: 'i-bolt:angular',
   },
 ];

uno.config.ts

@@ -2,6 +2,7 @@ import { globSync } from 'fast-glob';
 import fs from 'node:fs/promises';
 import { basename, join } 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());
@@ -15,11 +16,13 @@ const customIconCollection = {
   [collectionName]: iconPaths.reduce(
     (acc, iconPath) => {
       const [iconName] = basename(iconPath).split('.');
-      console.log(`Loading icon: ${iconName} from ${iconPath}`);
+      console.log(`Loading icon: ${iconName} from ${iconPath}`); // Debug log
 
       acc[iconName] = async () => {
         try {
           const content = await fs.readFile(iconPath, 'utf8');
+
+          // Simplified SVG processing
           return content
             .replace(/fill="[^"]*"/g, 'fill="currentColor"')
             .replace(/fill='[^']*'/g, "fill='currentColor'")
@@ -120,7 +123,7 @@ 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.toLowerCase()}`),
+    ...Object.keys(customIconCollection[collectionName] || {}).map((x) => `i-${collectionName}:${x}`),
   ],
   shortcuts: {
     'bolt-ease-cubic-bezier': 'ease-[cubic-bezier(0.4,0,0.2,1)]',
@@ -263,7 +266,11 @@ export default defineConfig({
     presetIcons({
       warn: true,
       collections: {
-        [collectionName]: customIconCollection[collectionName],
+        bolt: customIconCollection.bolt,
+        ph: async () => {
+          const icons = await import('@iconify-json/ph/icons.json');
+          return icons.default as IconifyJSON;
+        },
       },
       extraProperties: {
         display: 'inline-block',
@@ -271,9 +278,15 @@ export default defineConfig({
         width: '24px',
         height: '24px',
       },
-      scale: 1,
-      unit: 'px',
-      cdn: '',
+      customizations: {
+        customize(props) {
+          return {
+            ...props,
+            width: '24px',
+            height: '24px',
+          };
+        },
+      },
     }),
   ],
 });