diff --git a/apps/web/src/lib/constant.ts b/apps/web/src/lib/constant.ts
index d68a7f4..9ae592f 100644
--- a/apps/web/src/lib/constant.ts
+++ b/apps/web/src/lib/constant.ts
@@ -1,5 +1,7 @@
import type { TechCategory } from "./types";
+export const ICON_BASE_URL = "https://r2.better-t-stack.dev/icons";
+
export const TECH_OPTIONS: Record<
TechCategory,
{
@@ -17,7 +19,7 @@ export const TECH_OPTIONS: Record<
id: "trpc",
name: "tRPC",
description: "End-to-end typesafe APIs",
- icon: "/icon/trpc.svg",
+ icon: `${ICON_BASE_URL}/trpc.svg`,
color: "from-blue-500 to-blue-700",
default: true,
},
@@ -25,7 +27,7 @@ export const TECH_OPTIONS: Record<
id: "orpc",
name: "oRPC",
description: "Typesafe APIs Made Simple",
- icon: "/icon/orpc.svg",
+ icon: `${ICON_BASE_URL}/orpc.svg`,
color: "from-indigo-400 to-indigo-600",
},
{
@@ -41,7 +43,7 @@ export const TECH_OPTIONS: Record<
id: "tanstack-router",
name: "TanStack Router",
description: "Modern type-safe router for React",
- icon: "/icon/tanstack.svg",
+ icon: `${ICON_BASE_URL}/tanstack.svg`,
color: "from-blue-400 to-blue-600",
default: true,
},
@@ -49,7 +51,7 @@ export const TECH_OPTIONS: Record<
id: "react-router",
name: "React Router",
description: "Declarative routing for React",
- icon: "/icon/react-router.svg",
+ icon: `${ICON_BASE_URL}/react-router.svg`,
color: "from-cyan-400 to-cyan-600",
default: false,
},
@@ -58,7 +60,7 @@ export const TECH_OPTIONS: Record<
name: "TanStack Start (vite)",
description:
"Full-stack React and Solid framework powered by TanStack Router",
- icon: "/icon/tanstack.svg",
+ icon: `${ICON_BASE_URL}/tanstack.svg`,
color: "from-purple-400 to-purple-600",
default: false,
},
@@ -66,7 +68,7 @@ export const TECH_OPTIONS: Record<
id: "next",
name: "Next.js",
description: "React framework with hybrid rendering",
- icon: "/icon/nextjs.svg",
+ icon: `${ICON_BASE_URL}/nextjs.svg`,
color: "from-gray-700 to-black",
default: false,
},
@@ -74,7 +76,7 @@ export const TECH_OPTIONS: Record<
id: "nuxt",
name: "Nuxt",
description: "Vue full-stack framework (SSR, SSG, hybrid)",
- icon: "/icon/nuxt.svg",
+ icon: `${ICON_BASE_URL}/nuxt.svg`,
color: "from-green-400 to-green-700",
default: false,
},
@@ -82,7 +84,7 @@ export const TECH_OPTIONS: Record<
id: "svelte",
name: "Svelte",
description: "Cybernetically enhanced web apps",
- icon: "/icon/svelte.svg",
+ icon: `${ICON_BASE_URL}/svelte.svg`,
color: "from-orange-500 to-orange-700",
default: false,
},
@@ -90,7 +92,7 @@ export const TECH_OPTIONS: Record<
id: "solid",
name: "Solid",
description: "Simple and performant reactivity for building UIs",
- icon: "/icon/solid.svg",
+ icon: `${ICON_BASE_URL}/solid.svg`,
color: "from-blue-600 to-blue-800",
default: false,
},
@@ -108,7 +110,7 @@ export const TECH_OPTIONS: Record<
id: "native-nativewind",
name: "React Native + NativeWind",
description: "Expo with NativeWind (Tailwind)",
- icon: "/icon/expo.svg",
+ icon: `${ICON_BASE_URL}/expo.svg`,
color: "from-purple-400 to-purple-600",
className: "invert-0 dark:invert",
default: false,
@@ -117,7 +119,7 @@ export const TECH_OPTIONS: Record<
id: "native-unistyles",
name: "React Native + Unistyles",
description: "Expo with Unistyles",
- icon: "/icon/expo.svg",
+ icon: `${ICON_BASE_URL}/expo.svg`,
color: "from-pink-400 to-pink-600",
className: "invert-0 dark:invert",
default: false,
@@ -136,7 +138,7 @@ export const TECH_OPTIONS: Record<
id: "bun",
name: "Bun",
description: "Fast JavaScript runtime & toolkit",
- icon: "/icon/bun.svg",
+ icon: `${ICON_BASE_URL}/bun.svg`,
color: "from-amber-400 to-amber-600",
default: true,
},
@@ -144,14 +146,14 @@ export const TECH_OPTIONS: Record<
id: "node",
name: "Node.js",
description: "JavaScript runtime environment",
- icon: "/icon/node.svg",
+ icon: `${ICON_BASE_URL}/node.svg`,
color: "from-green-400 to-green-600",
},
{
id: "workers",
name: "Cloudflare Workers",
description: "Serverless runtime for the edge",
- icon: "/icon/workers.svg",
+ icon: `${ICON_BASE_URL}/workers.svg`,
color: "from-orange-400 to-orange-600",
},
{
@@ -167,7 +169,7 @@ export const TECH_OPTIONS: Record<
id: "hono",
name: "Hono",
description: "Ultrafast web framework",
- icon: "/icon/hono.svg",
+ icon: `${ICON_BASE_URL}/hono.svg`,
color: "from-blue-500 to-blue-700",
default: true,
},
@@ -175,35 +177,35 @@ export const TECH_OPTIONS: Record<
id: "next",
name: "Next.js",
description: "App Router and API Routes",
- icon: "/icon/nextjs.svg",
+ icon: `${ICON_BASE_URL}/nextjs.svg`,
color: "from-gray-700 to-black",
},
{
id: "elysia",
name: "Elysia",
description: "TypeScript web framework",
- icon: "/icon/elysia.svg",
+ icon: `${ICON_BASE_URL}/elysia.svg`,
color: "from-purple-500 to-purple-700",
},
{
id: "express",
name: "Express",
description: "Popular Node.js framework",
- icon: "/icon/express.svg",
+ icon: `${ICON_BASE_URL}/express.svg`,
color: "from-gray-500 to-gray-700",
},
{
id: "fastify",
name: "Fastify",
description: "Fast, low-overhead web framework for Node.js",
- icon: "/icon/fastify.svg",
+ icon: `${ICON_BASE_URL}/fastify.svg`,
color: "from-gray-500 to-gray-700",
},
{
id: "convex",
name: "Convex",
description: "Reactive backend-as-a-service",
- icon: "/icon/convex.svg",
+ icon: `${ICON_BASE_URL}/convex.svg`,
color: "from-pink-500 to-pink-700",
},
{
@@ -219,7 +221,7 @@ export const TECH_OPTIONS: Record<
id: "sqlite",
name: "SQLite",
description: "File-based SQL database",
- icon: "/icon/sqlite.svg",
+ icon: `${ICON_BASE_URL}/sqlite.svg`,
color: "from-blue-400 to-cyan-500",
default: true,
},
@@ -227,21 +229,21 @@ export const TECH_OPTIONS: Record<
id: "postgres",
name: "PostgreSQL",
description: "Advanced SQL database",
- icon: "/icon/postgres.svg",
+ icon: `${ICON_BASE_URL}/postgres.svg`,
color: "from-indigo-400 to-indigo-600",
},
{
id: "mysql",
name: "MySQL",
description: "Popular relational database",
- icon: "/icon/mysql.svg",
+ icon: `${ICON_BASE_URL}/mysql.svg`,
color: "from-blue-500 to-blue-700",
},
{
id: "mongodb",
name: "MongoDB",
description: "NoSQL document database",
- icon: "/icon/mongodb.svg",
+ icon: `${ICON_BASE_URL}/mongodb.svg`,
color: "from-green-400 to-green-600",
},
{
@@ -257,7 +259,7 @@ export const TECH_OPTIONS: Record<
id: "drizzle",
name: "Drizzle",
description: "TypeScript ORM",
- icon: "/icon/drizzle.svg",
+ icon: `${ICON_BASE_URL}/drizzle.svg`,
color: "from-cyan-400 to-cyan-600",
default: true,
},
@@ -265,14 +267,14 @@ export const TECH_OPTIONS: Record<
id: "prisma",
name: "Prisma",
description: "Next-gen ORM",
- icon: "/icon/prisma.svg",
+ icon: `${ICON_BASE_URL}/prisma.svg`,
color: "from-purple-400 to-purple-600",
},
{
id: "mongoose",
name: "Mongoose",
description: "Elegant object modeling tool",
- icon: "/icon/mongoose.svg",
+ icon: `${ICON_BASE_URL}/mongoose.svg`,
color: "from-blue-400 to-blue-600",
},
{
@@ -288,49 +290,49 @@ export const TECH_OPTIONS: Record<
id: "turso",
name: "Turso",
description: "SQLite cloud database powered by libSQL",
- icon: "/icon/turso.svg",
+ icon: `${ICON_BASE_URL}/turso.svg`,
color: "from-pink-400 to-pink-600",
},
{
id: "d1",
name: "Cloudflare D1",
description: "Serverless SQLite database on Cloudflare Workers",
- icon: "/icon/workers.svg",
+ icon: `${ICON_BASE_URL}/workers.svg`,
color: "from-orange-400 to-orange-600",
},
{
id: "neon",
name: "Neon Postgres",
description: "Serverless PostgreSQL with Neon",
- icon: "/icon/neon.svg",
+ icon: `${ICON_BASE_URL}/neon.svg`,
color: "from-blue-400 to-blue-600",
},
{
id: "prisma-postgres",
name: "Prisma PostgreSQL",
description: "Set up PostgreSQL with Prisma",
- icon: "/icon/prisma.svg",
+ icon: `${ICON_BASE_URL}/prisma.svg`,
color: "from-indigo-400 to-indigo-600",
},
{
id: "mongodb-atlas",
name: "MongoDB Atlas",
description: "Cloud MongoDB setup with Atlas",
- icon: "/icon/mongodb.svg",
+ icon: `${ICON_BASE_URL}/mongodb.svg`,
color: "from-green-400 to-green-600",
},
{
id: "supabase",
name: "Supabase",
description: "Local Supabase stack (requires Docker)",
- icon: "/icon/supabase.svg",
+ icon: `${ICON_BASE_URL}/supabase.svg`,
color: "from-emerald-400 to-emerald-600",
},
{
id: "docker",
name: "Docker",
description: "Local database with Docker Compose",
- icon: "/icon/docker.svg",
+ icon: `${ICON_BASE_URL}/docker.svg`,
color: "from-blue-500 to-blue-700",
},
{
@@ -347,7 +349,7 @@ export const TECH_OPTIONS: Record<
id: "workers",
name: "Cloudflare Workers",
description: "Deploy to Cloudflare Workers",
- icon: "/icon/workers.svg",
+ icon: `${ICON_BASE_URL}/workers.svg`,
color: "from-orange-400 to-orange-600",
},
{
@@ -364,7 +366,7 @@ export const TECH_OPTIONS: Record<
id: "true",
name: "Better Auth",
description: "Simple authentication",
- icon: "/icon/better-auth.svg",
+ icon: `${ICON_BASE_URL}/better-auth.svg`,
color: "from-green-400 to-green-600",
default: true,
},
@@ -381,7 +383,7 @@ export const TECH_OPTIONS: Record<
id: "npm",
name: "npm",
description: "Default package manager",
- icon: "/icon/npm.svg",
+ icon: `${ICON_BASE_URL}/npm.svg`,
color: "from-red-500 to-red-700",
className: "invert-0 dark:invert",
},
@@ -389,14 +391,14 @@ export const TECH_OPTIONS: Record<
id: "pnpm",
name: "pnpm",
description: "Fast, disk space efficient",
- icon: "/icon/pnpm.svg",
+ icon: `${ICON_BASE_URL}/pnpm.svg`,
color: "from-orange-500 to-orange-700",
},
{
id: "bun",
name: "bun",
description: "All-in-one toolkit",
- icon: "/icon/bun.svg",
+ icon: `${ICON_BASE_URL}/bun.svg`,
color: "from-amber-500 to-amber-700",
default: true,
},
@@ -414,7 +416,7 @@ export const TECH_OPTIONS: Record<
id: "tauri",
name: "Tauri",
description: "Build native desktop apps",
- icon: "/icon/tauri.svg",
+ icon: `${ICON_BASE_URL}/tauri.svg`,
color: "from-amber-500 to-amber-700",
default: false,
},
@@ -422,7 +424,7 @@ export const TECH_OPTIONS: Record<
id: "starlight",
name: "Starlight",
description: "Build stellar docs with astro",
- icon: "/icon/starlight.svg",
+ icon: `${ICON_BASE_URL}/starlight.svg`,
color: "from-teal-500 to-teal-700",
default: false,
},
@@ -430,7 +432,7 @@ export const TECH_OPTIONS: Record<
id: "biome",
name: "Biome",
description: "Format, lint, and more",
- icon: "/icon/biome.svg",
+ icon: `${ICON_BASE_URL}/biome.svg`,
color: "from-green-500 to-green-700",
default: false,
},
@@ -446,7 +448,7 @@ export const TECH_OPTIONS: Record<
id: "ultracite",
name: "Ultracite",
description: "Biome preset with AI integration",
- icon: "/icon/ultracite.svg",
+ icon: `${ICON_BASE_URL}/ultracite.svg`,
color: "from-blue-500 to-blue-700",
className: "invert-0 dark:invert",
default: false,
@@ -471,7 +473,7 @@ export const TECH_OPTIONS: Record<
id: "turborepo",
name: "Turborepo",
description: "High-performance build system",
- icon: "/icon/turborepo.svg",
+ icon: `${ICON_BASE_URL}/turborepo.svg`,
color: "from-gray-400 to-gray-700",
default: true,
},
@@ -499,7 +501,7 @@ export const TECH_OPTIONS: Record<
id: "true",
name: "Git",
description: "Initialize Git repository",
- icon: "/icon/git.svg",
+ icon: `${ICON_BASE_URL}/git.svg`,
color: "from-gray-500 to-gray-700",
default: true,
},