Skip to content

Commit 781098b

Browse files
al3xnagal3xnag
committed
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.
1 parent 1afb727 commit 781098b

39 files changed

+410
-248
lines changed

‎packages/jsrepl/next.config.mjs

-12
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/* eslint-disable no-console */
22
import createMDX from '@next/mdx'
33
import { readFileSync } from 'fs'
4-
import Icons from 'unplugin-icons/webpack'
54

65
envVars()
76

@@ -38,17 +37,6 @@ const nextConfig = {
3837
},
3938
]
4039
},
41-
42-
webpack(config) {
43-
config.plugins.push(
44-
Icons({
45-
compiler: 'jsx',
46-
jsx: 'react',
47-
})
48-
)
49-
50-
return config
51-
},
5240
}
5341

5442
const withMDX = createMDX({

‎packages/jsrepl/package.json

-3
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,6 @@
6767
"@babel/parser": "^7.25.6",
6868
"@babel/types": "^7.26.3",
6969
"@chromatic-com/storybook": "^3.2.2",
70-
"@iconify-json/mdi": "^1.2.0",
71-
"@iconify-json/simple-icons": "^1.2.2",
7270
"@playwright/test": "^1.46.1",
7371
"@storybook/addon-essentials": "^8.4.7",
7472
"@storybook/addon-interactions": "^8.4.7",
@@ -103,7 +101,6 @@
103101
"storybook": "^8.4.7",
104102
"string-dedent": "^3.0.1",
105103
"tailwindcss": "^3.4.1",
106-
"unplugin-icons": "^0.19.3",
107104
"vitest": "^2.0.5"
108105
},
109106
"browserslist": [

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

+8-8
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@ import {
77
LucideArrowDown,
88
LucideArrowRight,
99
LucideHeart,
10+
LucideMail,
1011
LucideMessageCircleQuestion,
1112
LucidePackage,
1213
LucidePiggyBank,
1314
LucideSquareFunction,
1415
} from 'lucide-react'
15-
import IconEmail from '~icons/mdi/email-outline.jsx'
16-
import IconGithub from '~icons/mdi/github.jsx'
17-
import IconEsbuild from '~icons/simple-icons/esbuild.jsx'
18-
import IconGithubSponsors from '~icons/simple-icons/githubsponsors.jsx'
16+
import { SimpleIconsEsbuild } from '@/components/icons/simple-icons/esbuild'
17+
import { SimpleIconsGithub } from '@/components/icons/simple-icons/github'
18+
import { SimpleIconsGithubsponsors } from '@/components/icons/simple-icons/githubsponsors'
1919
import ReplStarterDialog from '@/components/repl-starter-dialog'
2020
import { Button } from '@/components/ui/button'
2121
import { SystemRepls } from '@/lib/repl-stored-state/system-repls'
@@ -128,7 +128,7 @@ export default function Home() {
128128
/>
129129

130130
<FeatureBox
131-
icon={<IconEsbuild width={24} height={24} className="text-primary" />}
131+
icon={<SimpleIconsEsbuild width={24} height={24} className="text-primary" />}
132132
title={
133133
<>
134134
Powered by <span className="gradient-text">esbuild</span>
@@ -676,13 +676,13 @@ export default function Home() {
676676
<p className="flex">
677677
<Button asChild size="icon" variant="ghost">
678678
<Link href="https://github.com/nag5000" target="_blank">
679-
<IconGithub width={24} height={24} className="opacity-80" />
679+
<SimpleIconsGithub width={21} height={21} className="opacity-80" />
680680
</Link>
681681
</Button>
682682

683683
<Button asChild size="icon" variant="ghost">
684684
<Link href="https://github.com/sponsors/nag5000" target="_blank">
685-
<IconGithubSponsors
685+
<SimpleIconsGithubsponsors
686686
width={22}
687687
height={22}
688688
className="opacity-80 hover:text-[#bf3989]"
@@ -692,7 +692,7 @@ export default function Home() {
692692

693693
<Button asChild size="icon" variant="ghost">
694694
<Link href="mailto:[email protected]" target="_blank">
695-
<IconEmail width={24} height={24} className="opacity-80" />
695+
<LucideMail width={24} height={24} className="opacity-80" />
696696
</Link>
697697
</Button>
698698
</p>

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

+14-14
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
import { useState } from 'react'
44
import { useRouter, useSearchParams } from 'next/navigation'
55
import { LucideLibrary, LucidePlus } from 'lucide-react'
6-
import IconLanguageCss from '~icons/mdi/language-css3.jsx'
7-
import IconLanguageHtml from '~icons/mdi/language-html5.jsx'
8-
import IconLanguageJavascript from '~icons/mdi/language-javascript.jsx'
9-
import IconLanguageTypescript from '~icons/mdi/language-typescript.jsx'
10-
import IconReact from '~icons/mdi/react.jsx'
11-
import IconTailwind from '~icons/mdi/tailwind.jsx'
12-
import IconGithub from '~icons/simple-icons/github.jsx'
6+
import { MdiLanguageCss3 } from '@/components/icons/mdi/language-css3'
7+
import { MdiLanguageHtml5 } from '@/components/icons/mdi/language-html5'
8+
import { MdiLanguageJavascript } from '@/components/icons/mdi/language-javascript'
9+
import { MdiLanguageTypescript } from '@/components/icons/mdi/language-typescript'
10+
import { MdiReact } from '@/components/icons/mdi/react'
11+
import { MdiTailwind } from '@/components/icons/mdi/tailwind'
12+
import { SimpleIconsGithub } from '@/components/icons/simple-icons/github'
1313
import ReplStarterDialog from '@/components/repl-starter-dialog'
1414
import { Button } from '@/components/ui/button'
1515
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
@@ -65,7 +65,7 @@ export default function DashboardPage() {
6565
})
6666
}
6767
>
68-
<IconGithub width={18} height={18} className="mr-2" />
68+
<SimpleIconsGithub width={18} height={18} className="mr-2" />
6969
Log in with Github
7070
</Button>
7171
to store your REPLs on the Dashboard
@@ -92,12 +92,12 @@ export default function DashboardPage() {
9292
</div>
9393
<div className="pointer-events-none absolute bottom-0 right-0 top-0 flex w-20 items-center justify-center overflow-hidden opacity-20">
9494
<div className="grid grid-cols-2 gap-x-2 *:h-10 *:w-10">
95-
<IconLanguageTypescript />
96-
<IconLanguageHtml />
97-
<IconLanguageCss />
98-
<IconReact />
99-
<IconLanguageJavascript />
100-
<IconTailwind />
95+
<MdiLanguageTypescript />
96+
<MdiLanguageHtml5 />
97+
<MdiLanguageCss3 />
98+
<MdiReact />
99+
<MdiLanguageJavascript />
100+
<MdiTailwind />
101101
</div>
102102
</div>
103103
</Button>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Link from 'next/link'
44
import { ReplPayload } from '@jsrepl/shared-types'
55
import { LucideFiles, LucidePlay, LucideRewind, LucideRotateCw, LucideSettings } from 'lucide-react'
66
import { LucideEye, LucideMoon, LucidePalette, LucideShare2, LucideSun } from 'lucide-react'
7-
import IconGithub from '~icons/simple-icons/github.jsx'
7+
import { SimpleIconsGithub } from '@/components/icons/simple-icons/github'
88
import Logo from '@/components/logo'
99
import ShareReplDropdownItem from '@/components/share-repl-dropdown-item'
1010
import { Button } from '@/components/ui/button'
@@ -246,7 +246,7 @@ export default function ActivityBar() {
246246

247247
<Button size="icon-lg" variant="ghost" className="text-activityBar-foreground" asChild>
248248
<Link href="https://github.com/jsrepl/jsrepl.io" target="_blank">
249-
<IconGithub width={19} height={19} />
249+
<SimpleIconsGithub width={19} height={19} />
250250
</Link>
251251
</Button>
252252

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

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

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

+24-24
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1-
import { LucideFolder } from 'lucide-react'
2-
import IconReadme from '~icons/mdi/book-open-variant-outline.jsx'
3-
import IconCodeJson from '~icons/mdi/code-json.jsx'
4-
import IconFile from '~icons/mdi/file-outline.jsx'
5-
import IconLanguageCss from '~icons/mdi/language-css3.jsx'
6-
import IconLanguageHtml from '~icons/mdi/language-html5.jsx'
7-
import IconLanguageJavascript from '~icons/mdi/language-javascript.jsx'
8-
import IconLanguageMarkdown from '~icons/mdi/language-markdown.jsx'
9-
import IconLanguageTypescript from '~icons/mdi/language-typescript.jsx'
10-
import IconReact from '~icons/mdi/react.jsx'
11-
import IconTailwind from '~icons/mdi/tailwind.jsx'
1+
import { BeardedIconsCss } from '@/components/icons/bearded-icons/css'
2+
import { BeardedIconsFile } from '@/components/icons/bearded-icons/file'
3+
import { BeardedIconsFolder } from '@/components/icons/bearded-icons/folder'
4+
import { BeardedIconsHtml } from '@/components/icons/bearded-icons/html'
5+
import { BeardedIconsJavascript } from '@/components/icons/bearded-icons/javascript'
6+
import { BeardedIconsJson } from '@/components/icons/bearded-icons/json'
7+
import { BeardedIconsMarkdown } from '@/components/icons/bearded-icons/markdown'
8+
import { BeardedIconsReactjs } from '@/components/icons/bearded-icons/reactjs'
9+
import { BeardedIconsReactts } from '@/components/icons/bearded-icons/reactts'
10+
import { BeardedIconsReadme } from '@/components/icons/bearded-icons/readme'
11+
import { BeardedIconsTailwind } from '@/components/icons/bearded-icons/tailwind'
12+
import { BeardedIconsTypescript } from '@/components/icons/bearded-icons/typescript'
1213
import { getFileExtension } from '@/lib/fs-utils'
1314

1415
export function FileIcon({
@@ -21,37 +22,36 @@ export function FileIcon({
2122
className?: string
2223
}) {
2324
if (isFolder) {
24-
return <LucideFolder className={`${className}`} />
25+
return <BeardedIconsFolder className={className} />
2526
}
2627

2728
switch (true) {
2829
case /tailwind\.config\.(ts|js)?$/i.test(name):
29-
return <IconTailwind className={`${className} text-[#38BDF9]`} />
30+
return <BeardedIconsTailwind className={className} />
3031

3132
case /readme\.md$/i.test(name):
32-
return <IconReadme className={`${className} text-[#38BDF9]`} />
33+
return <BeardedIconsReadme className={className} />
3334
}
3435

3536
const ext = getFileExtension(name)
3637
switch (ext) {
3738
case '.tsx':
39+
return <BeardedIconsReactts className={className} />
3840
case '.jsx':
39-
return <IconReact className={`${className} text-[#0A7EA4]`} />
41+
return <BeardedIconsReactjs className={className} />
4042
case '.ts':
41-
return <IconLanguageTypescript className={`${className} text-[#3078C6]`} />
43+
return <BeardedIconsTypescript className={className} />
4244
case '.js':
43-
return (
44-
<IconLanguageJavascript className={`${className} text-[#c8a421] dark:text-[#E8D44E]`} />
45-
)
45+
return <BeardedIconsJavascript className={className} />
4646
case '.html':
47-
return <IconLanguageHtml className={`${className} text-[#DC4A25]`} />
47+
return <BeardedIconsHtml className={className} />
4848
case '.css':
49-
return <IconLanguageCss className={`${className} text-[#3078C6]`} />
49+
return <BeardedIconsCss className={className} />
5050
case '.json':
51-
return <IconCodeJson className={`${className} text-[#CC8000]`} />
51+
return <BeardedIconsJson className={className} />
5252
case '.md':
53-
return <IconLanguageMarkdown className={`${className} text-[#3078C6]`} />
53+
return <BeardedIconsMarkdown className={className} />
5454
default:
55-
return <IconFile className={`${className} text-muted-foreground`} />
55+
return <BeardedIconsFile className={className} />
5656
}
5757
}

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { LucideFolderOpen } from 'lucide-react'
1+
import { BeardedIconsFolderOpen } from '@/components/icons/bearded-icons/folder-open'
22
import { TreeDataItem } from '@/components/ui/tree-view'
33
import * as ReplFS from '@/lib/repl-fs'
44
import { ReplInfo } from '@/types/repl.types'
@@ -82,7 +82,7 @@ export function fsEntryToTreeDataItem(
8282
icon: ({ className }: { className?: string }) => (
8383
<FileIcon name={name} isFolder={entry.kind === ReplFS.Kind.Directory} className={className} />
8484
),
85-
openIcon: entry.kind === ReplFS.Kind.Directory ? LucideFolderOpen : undefined,
85+
openIcon: entry.kind === ReplFS.Kind.Directory ? BeardedIconsFolderOpen : undefined,
8686
actions: <Actions path={path} entry={entry} />,
8787
children,
8888
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export default function CopilotItem() {
1818
<DropdownMenu modal={false}>
1919
<DropdownMenuTrigger asChild>
2020
<StatusBarButton aria-label="AI Autocomplete">
21-
<CopilotIcon size={14} className={!isEnabled ? 'opacity-50' : undefined} />
21+
<CopilotIcon width={14} height={14} className={!isEnabled ? 'opacity-50' : undefined} />
2222
</StatusBarButton>
2323
</DropdownMenuTrigger>
2424
<DropdownMenuContent>

‎packages/jsrepl/src/components/error.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import React, { useEffect } from 'react'
44
import Link from 'next/link'
5-
import IconGithub from '~icons/simple-icons/github.jsx'
5+
import { SimpleIconsGithub } from '@/components/icons/simple-icons/github'
66
import { Button } from '@/components/ui/button'
77
import { ResponseError } from '@/lib/response-error'
88

@@ -37,7 +37,7 @@ export default function ErrorComponent({
3737
<div className="mt-12 flex flex-wrap items-center gap-4">
3838
<Button asChild size="lg">
3939
<Link href="https://github.com/jsrepl/jsrepl.io/issues" target="_blank">
40-
<IconGithub width={20} height={20} className="mr-2" />
40+
<SimpleIconsGithub width={20} height={20} className="mr-2" />
4141
Report an issue
4242
</Link>
4343
</Button>

‎packages/jsrepl/src/components/error404.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import React from 'react'
44
import Link from 'next/link'
55
import { usePathname } from 'next/navigation'
6-
import IconGithub from '~icons/simple-icons/github.jsx'
6+
import { SimpleIconsGithub } from '@/components/icons/simple-icons/github'
77
import { Button } from '@/components/ui/button'
88

99
export default function Error404() {
@@ -28,7 +28,7 @@ export default function Error404() {
2828

2929
<Button asChild variant="link" size="lg">
3030
<Link href="https://github.com/jsrepl/jsrepl.io/issues" target="_blank">
31-
<IconGithub width={20} height={20} className="mr-2" />
31+
<SimpleIconsGithub width={20} height={20} className="mr-2" />
3232
Report an issue
3333
</Link>
3434
</Button>

‎packages/jsrepl/src/components/icons/bearded-icons/css.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { SVGProps } from 'react'
2+
3+
export function BeardedIconsCss(props: SVGProps<SVGSVGElement>) {
4+
return (
5+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" {...props}>
6+
<path
7+
d="M3.5 2.5v2h7V6h-7v2h7v2.5L8 12l-2.5-1.5v-1h-2v2L8 14l4.5-2.5v-9h-9z"
8+
fill="#0086f1"
9+
/>
10+
</svg>
11+
)
12+
}

‎packages/jsrepl/src/components/icons/bearded-icons/file.tsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { SVGProps } from 'react'
2+
3+
export function BeardedIconsFile(props: SVGProps<SVGSVGElement>) {
4+
return (
5+
<svg
6+
width="16"
7+
height="16"
8+
viewBox="0 0 16 16"
9+
fill="none"
10+
xmlns="http://www.w3.org/2000/svg"
11+
{...props}
12+
>
13+
<path
14+
d="M12.7 5.21C12 4.53 10.47 3 9.79 2.29C9.60374 2.10526 9.35234 2.0011 9.09 2H4C3.73478 2 3.48043 2.10536 3.29289 2.29289C3.10536 2.48043 3 2.73478 3 3V13C3 13.2652 3.10536 13.5196 3.29289 13.7071C3.48043 13.8946 3.73478 14 4 14H12C12.2652 14 12.5196 13.8946 12.7071 13.7071C12.8946 13.5196 13 13.2652 13 13V5.91C12.9962 5.64623 12.8884 5.39463 12.7 5.21ZM4 13V3H9.09L10.53 4.45L12 5.91V13H4Z"
15+
fill="#909090"
16+
fill-opacity="0.9"
17+
/>
18+
<path d="M8.5 4.5H5.5V5.5H8.5V4.5Z" fill="#909090" fill-opacity="0.9" />
19+
<path d="M10 7H5.5V8H10V7Z" fill="#909090" fill-opacity="0.9" />
20+
<path d="M10 9.5H5.5V10.5H10V9.5Z" fill="#909090" fill-opacity="0.9" />
21+
</svg>
22+
)
23+
}

‎packages/jsrepl/src/components/icons/bearded-icons/folder-open.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { SVGProps } from 'react'
2+
3+
export function BeardedIconsFolderOpen(props: SVGProps<SVGSVGElement>) {
4+
return (
5+
<svg
6+
width="16"
7+
height="16"
8+
viewBox="0 0 16 16"
9+
fill="none"
10+
xmlns="http://www.w3.org/2000/svg"
11+
{...props}
12+
>
13+
<path
14+
fillRule="evenodd"
15+
clipRule="evenodd"
16+
d="M12.5 6.5H8.71084C8.24474 6.53089 7.77858 6.43058 7.36562 6.2095C6.92436 5.97327 6.56417 5.61003 6.33167 5.1668L6.32489 5.15388L6.02295 4.55H3.5V11.5H12.5V6.5ZM14 6.05V12C14 12.2652 13.8946 12.5196 13.7071 12.7071C13.5196 12.8946 13.2652 13 13 13H3.05C2.91453 13.0068 2.7791 12.9859 2.65195 12.9387C2.52479 12.8915 2.40857 12.8189 2.31035 12.7254C2.21213 12.6318 2.13396 12.5193 2.08061 12.3946C2.02726 12.2699 1.99983 12.1356 2 12V4.05C2 3.78479 2.10536 3.53043 2.29289 3.3429C2.48043 3.15536 2.73479 3.05 3 3.05H6.3C6.49633 3.04367 6.69018 3.0953 6.85734 3.19845C7.02451 3.3016 7.1576 3.45169 7.24 3.63L7.66 4.47C7.753 4.6473 7.89708 4.79259 8.07358 4.88709C8.25009 4.98158 8.45089 5.02091 8.65 5H13C13.1356 4.99983 13.2699 5.02726 13.3946 5.08061C13.5193 5.13396 13.6318 5.21213 13.7254 5.31035C13.8189 5.40857 13.8915 5.52479 13.9387 5.65195C13.9859 5.7791 14.0068 5.91454 14 6.05Z"
17+
fill="#909090"
18+
fillOpacity="0.9"
19+
/>
20+
</svg>
21+
)
22+
}

‎packages/jsrepl/src/components/icons/bearded-icons/folder.tsx

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { SVGProps } from 'react'
2+
3+
export function BeardedIconsFolder(props: SVGProps<SVGSVGElement>) {
4+
return (
5+
<svg
6+
width="16"
7+
height="16"
8+
viewBox="0 0 16 16"
9+
fill="none"
10+
xmlns="http://www.w3.org/2000/svg"
11+
{...props}
12+
>
13+
<path
14+
d="M14 6.05V12C14 12.2652 13.8946 12.5196 13.7071 12.7071C13.5196 12.8946 13.2652 13 13 13H3.05C2.91453 13.0068 2.7791 12.9859 2.65195 12.9387C2.52479 12.8915 2.40857 12.8189 2.31034 12.7254C2.21212 12.6318 2.13396 12.5193 2.08061 12.3946C2.02726 12.2699 1.99983 12.1356 2 12V4.05C2 3.78479 2.10536 3.53043 2.29289 3.3429C2.48043 3.15536 2.73478 3.05 3 3.05H6.3C6.49633 3.04367 6.69017 3.0953 6.85734 3.19845C7.02451 3.3016 7.1576 3.45169 7.24 3.63L7.66 4.47C7.753 4.6473 7.89708 4.79259 8.07358 4.88709C8.25009 4.98158 8.45089 5.02091 8.65 5H13C13.1356 4.99983 13.2699 5.02726 13.3946 5.08061C13.5193 5.13396 13.6318 5.21213 13.7254 5.31035C13.8189 5.40857 13.8915 5.52479 13.9387 5.65195C13.9859 5.7791 14.0068 5.91454 14 6.05Z"
15+
fill="#909090"
16+
fill-opacity="0.9"
17+
/>
18+
</svg>
19+
)
20+
}

0 commit comments

Comments
 (0)