drop unplugin-icons dependency

... in favor of manually added extra needed icons using icones.js.org (Lucide is still the default iconset in the codebase).
Reason: unplugin-icons doesn't support turbopack atm.

Author: al3xnag

packages/jsrepl/next.config.mjs

@@ -1,7 +1,6 @@
 /* eslint-disable no-console */
 import createMDX from '@next/mdx'
 import { readFileSync } from 'fs'
-import Icons from 'unplugin-icons/webpack'
 
 envVars()
 
@@ -38,17 +37,6 @@ const nextConfig = {
       },
     ]
   },
-
-  webpack(config) {
-    config.plugins.push(
-      Icons({
-        compiler: 'jsx',
-        jsx: 'react',
-      })
-    )
-
-    return config
-  },
 }
 
 const withMDX = createMDX({

packages/jsrepl/package.json

@@ -67,8 +67,6 @@
     "@babel/parser": "^7.25.6",
     "@babel/types": "^7.26.3",
     "@chromatic-com/storybook": "^3.2.2",
-    "@iconify-json/mdi": "^1.2.0",
-    "@iconify-json/simple-icons": "^1.2.2",
     "@playwright/test": "^1.46.1",
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",
@@ -103,7 +101,6 @@
     "storybook": "^8.4.7",
     "string-dedent": "^3.0.1",
     "tailwindcss": "^3.4.1",
-    "unplugin-icons": "^0.19.3",
     "vitest": "^2.0.5"
   },
   "browserslist": [

packages/jsrepl/src/app/(default)/page.tsx

@@ -7,15 +7,15 @@ import {
   LucideArrowDown,
   LucideArrowRight,
   LucideHeart,
+  LucideMail,
   LucideMessageCircleQuestion,
   LucidePackage,
   LucidePiggyBank,
   LucideSquareFunction,
 } from 'lucide-react'
-import IconEmail from '~icons/mdi/email-outline.jsx'
-import IconGithub from '~icons/mdi/github.jsx'
-import IconEsbuild from '~icons/simple-icons/esbuild.jsx'
-import IconGithubSponsors from '~icons/simple-icons/githubsponsors.jsx'
+import { SimpleIconsEsbuild } from '@/components/icons/simple-icons/esbuild'
+import { SimpleIconsGithub } from '@/components/icons/simple-icons/github'
+import { SimpleIconsGithubsponsors } from '@/components/icons/simple-icons/githubsponsors'
 import ReplStarterDialog from '@/components/repl-starter-dialog'
 import { Button } from '@/components/ui/button'
 import { SystemRepls } from '@/lib/repl-stored-state/system-repls'
@@ -128,7 +128,7 @@ export default function Home() {
         />
 
         <FeatureBox
-          icon={<IconEsbuild width={24} height={24} className="text-primary" />}
+          icon={<SimpleIconsEsbuild width={24} height={24} className="text-primary" />}
           title={
             <>
               Powered by <span className="gradient-text">esbuild</span>
@@ -676,13 +676,13 @@ export default function Home() {
           <p className="flex">
             <Button asChild size="icon" variant="ghost">
               <Link href="https://github.com/nag5000" target="_blank">
-                <IconGithub width={24} height={24} className="opacity-80" />
+                <SimpleIconsGithub width={21} height={21} className="opacity-80" />
               </Link>
             </Button>
 
             <Button asChild size="icon" variant="ghost">
               <Link href="https://github.com/sponsors/nag5000" target="_blank">
-                <IconGithubSponsors
+                <SimpleIconsGithubsponsors
                   width={22}
                   height={22}
                   className="opacity-80 hover:text-[#bf3989]"
@@ -692,7 +692,7 @@ export default function Home() {
 
             <Button asChild size="icon" variant="ghost">
               <Link href="mailto:[email protected]" target="_blank">
-                <IconEmail width={24} height={24} className="opacity-80" />
+                <LucideMail width={24} height={24} className="opacity-80" />
               </Link>
             </Button>
           </p>

packages/jsrepl/src/app/dashboard/page.tsx

@@ -3,13 +3,13 @@
 import { useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { LucideLibrary, LucidePlus } from 'lucide-react'
-import IconLanguageCss from '~icons/mdi/language-css3.jsx'
-import IconLanguageHtml from '~icons/mdi/language-html5.jsx'
-import IconLanguageJavascript from '~icons/mdi/language-javascript.jsx'
-import IconLanguageTypescript from '~icons/mdi/language-typescript.jsx'
-import IconReact from '~icons/mdi/react.jsx'
-import IconTailwind from '~icons/mdi/tailwind.jsx'
-import IconGithub from '~icons/simple-icons/github.jsx'
+import { MdiLanguageCss3 } from '@/components/icons/mdi/language-css3'
+import { MdiLanguageHtml5 } from '@/components/icons/mdi/language-html5'
+import { MdiLanguageJavascript } from '@/components/icons/mdi/language-javascript'
+import { MdiLanguageTypescript } from '@/components/icons/mdi/language-typescript'
+import { MdiReact } from '@/components/icons/mdi/react'
+import { MdiTailwind } from '@/components/icons/mdi/tailwind'
+import { SimpleIconsGithub } from '@/components/icons/simple-icons/github'
 import ReplStarterDialog from '@/components/repl-starter-dialog'
 import { Button } from '@/components/ui/button'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
@@ -65,7 +65,7 @@ export default function DashboardPage() {
                   })
                 }
               >
-                <IconGithub width={18} height={18} className="mr-2" />
+                <SimpleIconsGithub width={18} height={18} className="mr-2" />
                 Log in with Github
               </Button>
               to store your REPLs on the Dashboard
@@ -92,12 +92,12 @@ export default function DashboardPage() {
           </div>
           <div className="pointer-events-none absolute bottom-0 right-0 top-0 flex w-20 items-center justify-center overflow-hidden opacity-20">
             <div className="grid grid-cols-2 gap-x-2 *:h-10 *:w-10">
-              <IconLanguageTypescript />
-              <IconLanguageHtml />
-              <IconLanguageCss />
-              <IconReact />
-              <IconLanguageJavascript />
-              <IconTailwind />
+              <MdiLanguageTypescript />
+              <MdiLanguageHtml5 />
+              <MdiLanguageCss3 />
+              <MdiReact />
+              <MdiLanguageJavascript />
+              <MdiTailwind />
             </div>
           </div>
         </Button>

packages/jsrepl/src/app/repl/[[...slug]]/components/activity-bar.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link'
 import { ReplPayload } from '@jsrepl/shared-types'
 import { LucideFiles, LucidePlay, LucideRewind, LucideRotateCw, LucideSettings } from 'lucide-react'
 import { LucideEye, LucideMoon, LucidePalette, LucideShare2, LucideSun } from 'lucide-react'
-import IconGithub from '~icons/simple-icons/github.jsx'
+import { SimpleIconsGithub } from '@/components/icons/simple-icons/github'
 import Logo from '@/components/logo'
 import ShareReplDropdownItem from '@/components/share-repl-dropdown-item'
 import { Button } from '@/components/ui/button'
@@ -246,7 +246,7 @@ export default function ActivityBar() {
 
         <Button size="icon-lg" variant="ghost" className="text-activityBar-foreground" asChild>
           <Link href="https://github.com/jsrepl/jsrepl.io" target="_blank">
-            <IconGithub width={19} height={19} />
+            <SimpleIconsGithub width={19} height={19} />
           </Link>
         </Button>
 

packages/jsrepl/src/app/repl/[[...slug]]/components/code-editor-header.tsx

@@ -2,7 +2,7 @@
 
 import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import { LucideEllipsisVertical, LucideLock, LucideX } from 'lucide-react'
-import IconPrettier from '~icons/simple-icons/prettier'
+import { SimpleIconsPrettier } from '@/components/icons/simple-icons/prettier'
 import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
@@ -202,7 +202,7 @@ export default function CodeEditorHeader() {
               disabled={isReadOnly}
               onClick={onFormatClick}
             >
-              <IconPrettier width={15} height={15} />
+              <SimpleIconsPrettier width={15} height={15} />
             </Button>
           </TooltipTrigger>
           <TooltipContent side="bottom" sideOffset={8} align="end">

packages/jsrepl/src/app/repl/[[...slug]]/components/file-icon.tsx

@@ -1,14 +1,15 @@
-import { LucideFolder } from 'lucide-react'
-import IconReadme from '~icons/mdi/book-open-variant-outline.jsx'
-import IconCodeJson from '~icons/mdi/code-json.jsx'
-import IconFile from '~icons/mdi/file-outline.jsx'
-import IconLanguageCss from '~icons/mdi/language-css3.jsx'
-import IconLanguageHtml from '~icons/mdi/language-html5.jsx'
-import IconLanguageJavascript from '~icons/mdi/language-javascript.jsx'
-import IconLanguageMarkdown from '~icons/mdi/language-markdown.jsx'
-import IconLanguageTypescript from '~icons/mdi/language-typescript.jsx'
-import IconReact from '~icons/mdi/react.jsx'
-import IconTailwind from '~icons/mdi/tailwind.jsx'
+import { BeardedIconsCss } from '@/components/icons/bearded-icons/css'
+import { BeardedIconsFile } from '@/components/icons/bearded-icons/file'
+import { BeardedIconsFolder } from '@/components/icons/bearded-icons/folder'
+import { BeardedIconsHtml } from '@/components/icons/bearded-icons/html'
+import { BeardedIconsJavascript } from '@/components/icons/bearded-icons/javascript'
+import { BeardedIconsJson } from '@/components/icons/bearded-icons/json'
+import { BeardedIconsMarkdown } from '@/components/icons/bearded-icons/markdown'
+import { BeardedIconsReactjs } from '@/components/icons/bearded-icons/reactjs'
+import { BeardedIconsReactts } from '@/components/icons/bearded-icons/reactts'
+import { BeardedIconsReadme } from '@/components/icons/bearded-icons/readme'
+import { BeardedIconsTailwind } from '@/components/icons/bearded-icons/tailwind'
+import { BeardedIconsTypescript } from '@/components/icons/bearded-icons/typescript'
 import { getFileExtension } from '@/lib/fs-utils'
 
 export function FileIcon({
@@ -21,37 +22,36 @@ export function FileIcon({
   className?: string
 }) {
   if (isFolder) {
-    return <LucideFolder className={`${className}`} />
+    return <BeardedIconsFolder className={className} />
   }
 
   switch (true) {
     case /tailwind\.config\.(ts|js)?$/i.test(name):
-      return <IconTailwind className={`${className} text-[#38BDF9]`} />
+      return <BeardedIconsTailwind className={className} />
 
     case /readme\.md$/i.test(name):
-      return <IconReadme className={`${className} text-[#38BDF9]`} />
+      return <BeardedIconsReadme className={className} />
   }
 
   const ext = getFileExtension(name)
   switch (ext) {
     case '.tsx':
+      return <BeardedIconsReactts className={className} />
     case '.jsx':
-      return <IconReact className={`${className} text-[#0A7EA4]`} />
+      return <BeardedIconsReactjs className={className} />
     case '.ts':
-      return <IconLanguageTypescript className={`${className} text-[#3078C6]`} />
+      return <BeardedIconsTypescript className={className} />
     case '.js':
-      return (
-        <IconLanguageJavascript className={`${className} text-[#c8a421] dark:text-[#E8D44E]`} />
-      )
+      return <BeardedIconsJavascript className={className} />
     case '.html':
-      return <IconLanguageHtml className={`${className} text-[#DC4A25]`} />
+      return <BeardedIconsHtml className={className} />
     case '.css':
-      return <IconLanguageCss className={`${className} text-[#3078C6]`} />
+      return <BeardedIconsCss className={className} />
     case '.json':
-      return <IconCodeJson className={`${className} text-[#CC8000]`} />
+      return <BeardedIconsJson className={className} />
     case '.md':
-      return <IconLanguageMarkdown className={`${className} text-[#3078C6]`} />
+      return <BeardedIconsMarkdown className={className} />
     default:
-      return <IconFile className={`${className} text-muted-foreground`} />
+      return <BeardedIconsFile className={className} />
   }
 }

packages/jsrepl/src/app/repl/[[...slug]]/components/files-panel-section/utils.tsx

@@ -1,4 +1,4 @@
-import { LucideFolderOpen } from 'lucide-react'
+import { BeardedIconsFolderOpen } from '@/components/icons/bearded-icons/folder-open'
 import { TreeDataItem } from '@/components/ui/tree-view'
 import * as ReplFS from '@/lib/repl-fs'
 import { ReplInfo } from '@/types/repl.types'
@@ -82,7 +82,7 @@ export function fsEntryToTreeDataItem(
     icon: ({ className }: { className?: string }) => (
       <FileIcon name={name} isFolder={entry.kind === ReplFS.Kind.Directory} className={className} />
     ),
-    openIcon: entry.kind === ReplFS.Kind.Directory ? LucideFolderOpen : undefined,
+    openIcon: entry.kind === ReplFS.Kind.Directory ? BeardedIconsFolderOpen : undefined,
     actions: <Actions path={path} entry={entry} />,
     children,
   }

packages/jsrepl/src/app/repl/[[...slug]]/components/status-bar/copilot-item.tsx

@@ -18,7 +18,7 @@ export default function CopilotItem() {
     <DropdownMenu modal={false}>
       <DropdownMenuTrigger asChild>
         <StatusBarButton aria-label="AI Autocomplete">
-          <CopilotIcon size={14} className={!isEnabled ? 'opacity-50' : undefined} />
+          <CopilotIcon width={14} height={14} className={!isEnabled ? 'opacity-50' : undefined} />
         </StatusBarButton>
       </DropdownMenuTrigger>
       <DropdownMenuContent>

packages/jsrepl/src/components/error.tsx

@@ -2,7 +2,7 @@
 
 import React, { useEffect } from 'react'
 import Link from 'next/link'
-import IconGithub from '~icons/simple-icons/github.jsx'
+import { SimpleIconsGithub } from '@/components/icons/simple-icons/github'
 import { Button } from '@/components/ui/button'
 import { ResponseError } from '@/lib/response-error'
 
@@ -37,7 +37,7 @@ export default function ErrorComponent({
       <div className="mt-12 flex flex-wrap items-center gap-4">
         <Button asChild size="lg">
           <Link href="https://github.com/jsrepl/jsrepl.io/issues" target="_blank">
-            <IconGithub width={20} height={20} className="mr-2" />
+            <SimpleIconsGithub width={20} height={20} className="mr-2" />
             Report an issue
           </Link>
         </Button>