Skip to content

Commit 3f8fd87

Browse files
Austin1serbAustin1serb
committed
add icon sprite demo
1 parent 47156f9 commit 3f8fd87

File tree

22 files changed

+1627
-281
lines changed

22 files changed

+1627
-281
lines changed

‎examples/demo/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"type": "module",
66
"scripts": {
77
"dev": "next dev",
8+
"prebuild": "zero-icons",
89
"build": "next build",
910
"start": "next start",
1011
"lint": "next lint",
@@ -17,7 +18,7 @@
1718
"dependencies": {
1819
"@codesandbox/sandpack-react": "^2.20.0",
1920
"@react-zero-ui/core": "^0.3.3",
20-
"@react-zero-ui/svg-sprite": "^0.1.0",
21+
"@react-zero-ui/icon-sprite": "^0.1.4",
2122
"@vercel/analytics": "^1.5.0",
2223
"clsx": "^2.1.1",
2324
"motion": "12.18.1",
@@ -35,4 +36,4 @@
3536
"tailwindcss": "^4.1.10",
3637
"typescript": "^5"
3738
}
38-
}
39+
}

‎examples/demo/public/icons-old.svg‎

Lines changed: 263 additions & 0 deletions
Loading

‎examples/demo/public/icons.svg‎

Lines changed: 641 additions & 263 deletions
Loading

‎examples/demo/src/app/(sprite-demo)/layout.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
3+
const layout = ({ children }: { children: React.ReactNode }) => {
4+
return (
5+
<main className="sm:p-10 pt-20 md:pt-28 w-full bg-gradient-to-b from-slate-50 to-white dark:from-slate-900 dark:to-slate-950 text-slate-900 dark:text-slate-50">
6+
{children}
7+
</main>
8+
);
9+
};
10+
11+
export default layout;

‎examples/demo/src/app/(sprite-demo)/lucide-react/page.tsx‎

Lines changed: 341 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,341 @@
1+
import {
2+
AlarmSmoke,
3+
Album,
4+
AArrowDown,
5+
AArrowUp,
6+
Accessibility,
7+
Activity,
8+
Airplay,
9+
AirVent,
10+
ALargeSmall,
11+
AlarmClock,
12+
AlarmClockCheck,
13+
AlarmClockMinus,
14+
AlarmClockOff,
15+
AlarmClockPlus,
16+
AlignCenter,
17+
AlignCenterHorizontal,
18+
AlignCenterVertical,
19+
AlignEndHorizontal,
20+
AlignEndVertical,
21+
AlignHorizontalDistributeCenter,
22+
AlignHorizontalDistributeEnd,
23+
AlignHorizontalDistributeStart,
24+
AlignHorizontalJustifyCenter,
25+
AlignHorizontalJustifyEnd,
26+
AlignHorizontalJustifyStart,
27+
AlignHorizontalSpaceAround,
28+
AlignHorizontalSpaceBetween,
29+
AlignJustify,
30+
AlignLeft,
31+
AlignRight,
32+
AlignStartHorizontal,
33+
AlignStartVertical,
34+
AlignVerticalDistributeCenter,
35+
AlignVerticalDistributeEnd,
36+
AlignVerticalDistributeStart,
37+
AlignVerticalJustifyCenter,
38+
AlignVerticalJustifyEnd,
39+
AlignVerticalJustifyStart,
40+
AlignVerticalSpaceAround,
41+
AlignVerticalSpaceBetween,
42+
Ambulance,
43+
Ampersand,
44+
Ampersands,
45+
Amphora,
46+
Anchor,
47+
Angry,
48+
Annoyed,
49+
Antenna,
50+
Anvil,
51+
Aperture,
52+
Apple,
53+
AppWindow,
54+
AppWindowMac,
55+
Archive,
56+
ArchiveRestore,
57+
ArchiveX,
58+
Armchair,
59+
ArrowBigDown,
60+
ArrowBigDownDash,
61+
ArrowBigLeft,
62+
ArrowBigLeftDash,
63+
ArrowBigRight,
64+
ArrowBigRightDash,
65+
ArrowBigUp,
66+
ArrowBigUpDash,
67+
ArrowDown,
68+
ArrowDown01,
69+
ArrowDown10,
70+
ArrowDownAZ,
71+
ArrowDownFromLine,
72+
ArrowDownLeft,
73+
ArrowDownNarrowWide,
74+
ArrowDownRight,
75+
ArrowDownToDot,
76+
ArrowDownToLine,
77+
ArrowDownUp,
78+
ArrowDownWideNarrow,
79+
ArrowDownZA,
80+
ArrowLeft,
81+
ArrowLeftFromLine,
82+
ArrowLeftRight,
83+
ArrowLeftToLine,
84+
ArrowRight,
85+
ArrowRightFromLine,
86+
ArrowRightLeft,
87+
ArrowRightToLine,
88+
ArrowsUpFromLine,
89+
ArrowUp,
90+
ArrowUp01,
91+
ArrowUp10,
92+
ArrowUpAZ,
93+
ArrowUpDown,
94+
ArrowUpFromDot,
95+
ArrowUpFromLine,
96+
ArrowUpLeft,
97+
ArrowUpNarrowWide,
98+
ArrowUpRight,
99+
ArrowUpToLine,
100+
ArrowUpWideNarrow,
101+
ArrowUpZA,
102+
Asterisk,
103+
Atom,
104+
AtSign,
105+
AudioLines,
106+
AudioWaveform,
107+
Award,
108+
Axe,
109+
Axis3d,
110+
Baby,
111+
Backpack,
112+
Badge,
113+
BadgeAlert,
114+
BadgeCent,
115+
BadgeCheck,
116+
BadgeDollarSign,
117+
BadgeEuro,
118+
BadgeIndianRupee,
119+
BadgeInfo,
120+
BadgeJapaneseYen,
121+
BadgeMinus,
122+
BadgePercent,
123+
BadgePlus,
124+
BadgePoundSterling,
125+
BadgeRussianRuble,
126+
BadgeSwissFranc,
127+
BadgeX,
128+
BaggageClaim,
129+
Ban,
130+
Banana,
131+
Bandage,
132+
Banknote,
133+
Barcode,
134+
Baseline,
135+
Bath,
136+
Battery,
137+
BluetoothSearching,
138+
Facebook,
139+
Instagram,
140+
Linkedin,
141+
InspectionPanel,
142+
} from 'lucide-react';
143+
import Link from 'next/link';
144+
145+
const page = () => {
146+
return (
147+
<div className="min-h-screen bg-gradient-to-b from-slate-50 to-white dark:from-slate-900 dark:to-slate-950">
148+
<main className="mx-auto max-w-7xl px-4 py-8 space-y-6">
149+
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
150+
<div>
151+
<h1 className="text-3xl font-semibold tracking-tight">Lucide React</h1>
152+
<p className="mt-1 text-sm text-slate-600 dark:text-slate-300">Traditional component-based icons.</p>
153+
</div>
154+
<div className="inline-flex rounded-xl border border-slate-200/80 dark:border-slate-800 bg-white/70 dark:bg-slate-900/60 backdrop-blur supports-[backdrop-filter]:bg-white/50 shadow-sm overflow-hidden w-fit">
155+
<Link
156+
href="/zero-icon-sprite"
157+
className="px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 dark:text-slate-300 dark:hover:bg-slate-800">
158+
Zero UI Sprite
159+
</Link>
160+
<Link
161+
href="/lucide-react"
162+
className="px-3 py-2 text-sm font-medium bg-slate-900 text-white dark:bg-white dark:text-slate-900"
163+
aria-current="page">
164+
Lucide React
165+
</Link>
166+
</div>
167+
</div>
168+
169+
<section className="grid grid-cols-1 gap-3 sm:grid-cols-2">
170+
<div className="rounded-2xl border border-slate-200/80 dark:border-slate-800 bg-white/70 dark:bg-slate-900/60 backdrop-blur supports-[backdrop-filter]:bg-white/50 p-4 shadow-sm">
171+
<div className="text-xs uppercase tracking-wide text-slate-500">This page</div>
172+
<div className="mt-1 flex items-baseline gap-2">
173+
<div className="text-xl sm:text-2xl font-semibold">HTML size: 19.5kb</div>
174+
<span className="inline-flex items-center rounded-full bg-red-100 text-red-700 px-2 py-0.5 text-xs font-medium">+290%</span>
175+
</div>
176+
</div>
177+
<div className="rounded-2xl border border-slate-200/80 dark:border-slate-800 bg-white/70 dark:bg-slate-900/60 backdrop-blur supports-[backdrop-filter]:bg-white/50 p-4 shadow-sm">
178+
<div className="text-xs uppercase tracking-wide text-slate-500">Zero UI Icon Sprite</div>
179+
<div className="mt-1 flex items-baseline gap-2">
180+
<div className="text-xl sm:text-2xl font-semibold">HTML size: 6.9kb</div>
181+
<span className="inline-flex items-center rounded-full bg-green-100 text-green-700 px-2 py-0.5 text-xs font-medium">-290%</span>
182+
</div>
183+
</div>
184+
</section>
185+
186+
<p className="text-sm text-slate-600 dark:text-slate-300">Open DevTools → Elements to compare document size and structure.</p>
187+
188+
<div className="rounded-2xl border border-slate-200/80 dark:border-slate-800 bg-white/70 dark:bg-slate-900/60 backdrop-blur supports-[backdrop-filter]:bg-white/50 p-4 shadow-sm">
189+
<div className="mb-3 flex items-center justify-between">
190+
<h2 className="text-sm font-medium text-slate-700 dark:text-slate-200">150 Icons</h2>
191+
<div className="text-xs text-slate-500">Component-based rendering</div>
192+
</div>
193+
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 gap-2 md:gap-3 **:rounded-md **:bg-blue-600 **:text-white **:p-2 **:shadow-sm **:transition **:duration-150 **:hover:scale-105 **:w-9 **:h-9 justify-items-center">
194+
<AlarmSmoke />
195+
<Album />
196+
<AArrowDown />
197+
<AArrowUp />
198+
<Accessibility />
199+
<Activity />
200+
<Airplay />
201+
<AirVent />
202+
<ALargeSmall />
203+
<AlarmClock />
204+
<AlarmClockCheck />
205+
<AlarmClockMinus />
206+
<AlarmClockOff />
207+
<AlarmClockPlus />
208+
<AlignCenter />
209+
<AlignCenterHorizontal />
210+
<AlignCenterVertical />
211+
<AlignEndHorizontal />
212+
<AlignEndVertical />
213+
<AlignHorizontalDistributeCenter />
214+
<AlignHorizontalDistributeEnd />
215+
<AlignHorizontalDistributeStart />
216+
<AlignHorizontalJustifyCenter />
217+
<AlignHorizontalJustifyEnd />
218+
<AlignHorizontalJustifyStart />
219+
<AlignHorizontalSpaceAround />
220+
<AlignHorizontalSpaceBetween />
221+
<AlignJustify />
222+
<AlignLeft />
223+
<AlignRight />
224+
<AlignStartHorizontal />
225+
<AlignStartVertical />
226+
<AlignVerticalDistributeCenter />
227+
<AlignVerticalDistributeEnd />
228+
<AlignVerticalDistributeStart />
229+
<AlignVerticalJustifyCenter />
230+
<AlignVerticalJustifyEnd />
231+
<AlignVerticalJustifyStart />
232+
<AlignVerticalSpaceAround />
233+
<AlignVerticalSpaceBetween />
234+
<Ambulance />
235+
<Ampersand />
236+
<Ampersands />
237+
<Amphora />
238+
<Anchor />
239+
<Angry />
240+
<Annoyed />
241+
<Antenna />
242+
<Anvil />
243+
<Aperture />
244+
<Apple />
245+
<AppWindow />
246+
<AppWindowMac />
247+
<Archive />
248+
<ArchiveRestore />
249+
<ArchiveX />
250+
<Armchair />
251+
<ArrowBigDown />
252+
<ArrowBigDownDash />
253+
<ArrowBigLeft />
254+
<ArrowBigLeftDash />
255+
<ArrowBigRight />
256+
<ArrowBigRightDash />
257+
<ArrowBigUp />
258+
<ArrowBigUpDash />
259+
<ArrowDown />
260+
<ArrowDown01 />
261+
<ArrowDown10 />
262+
<ArrowDownAZ />
263+
<ArrowDownFromLine />
264+
<ArrowDownLeft />
265+
<ArrowDownNarrowWide />
266+
<ArrowDownRight />
267+
<ArrowDownToDot />
268+
<ArrowDownToLine />
269+
<ArrowDownUp />
270+
<ArrowDownWideNarrow />
271+
<ArrowDownZA />
272+
<ArrowLeft />
273+
<ArrowLeftFromLine />
274+
<ArrowLeftRight />
275+
<ArrowLeftToLine />
276+
<ArrowRight />
277+
<ArrowRightFromLine />
278+
<ArrowRightLeft />
279+
<ArrowRightToLine />
280+
<ArrowsUpFromLine />
281+
<ArrowUp />
282+
<ArrowUp01 />
283+
<ArrowUp10 />
284+
<ArrowUpAZ />
285+
<ArrowUpDown />
286+
<ArrowUpFromDot />
287+
<ArrowUpFromLine />
288+
<ArrowUpLeft />
289+
<ArrowUpNarrowWide />
290+
<ArrowUpRight />
291+
<ArrowUpToLine />
292+
<ArrowUpWideNarrow />
293+
<ArrowUpZA />
294+
<Asterisk />
295+
<Atom />
296+
<AtSign />
297+
<AudioLines />
298+
<AudioWaveform />
299+
<Award />
300+
<Axe />
301+
<Axis3d />
302+
<Baby />
303+
<Backpack />
304+
<Badge />
305+
<BadgeAlert />
306+
<BadgeCent />
307+
<BadgeCheck />
308+
<BadgeDollarSign />
309+
<BadgeEuro />
310+
<BadgeIndianRupee />
311+
<BadgeInfo />
312+
<BadgeJapaneseYen />
313+
<BadgeMinus />
314+
<BadgePercent />
315+
<BadgePlus />
316+
<BadgePoundSterling />
317+
<BadgeRussianRuble />
318+
<BadgeSwissFranc />
319+
<BadgeX />
320+
<BaggageClaim />
321+
<Ban />
322+
<Banana />
323+
<Bandage />
324+
<Banknote />
325+
<Barcode />
326+
<Baseline />
327+
<Bath />
328+
<Battery />
329+
<BluetoothSearching size={24} />
330+
<Facebook size={24} />
331+
<Instagram size={24} />
332+
<Linkedin size={24} />
333+
<InspectionPanel size={24} />
334+
</div>
335+
</div>
336+
</main>
337+
</div>
338+
);
339+
};
340+
341+
export default page;

0 commit comments

Comments
 (0)