Skip to content

Commit 54781c5

Browse files
Austin1serbAustin1serb
committed
update icon-sprite demo
1 parent 3f8fd87 commit 54781c5

File tree

10 files changed

+246
-87
lines changed

10 files changed

+246
-87
lines changed

‎examples/demo/public/icons.svg‎

Lines changed: 44 additions & 0 deletions
Loading

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import HeaderTabs from './HeaderTabs';
3+
4+
type HeaderBarProps = { title: string; subtitle: React.ReactNode; activeTab: 'lucide' | 'sprite'; className?: string };
5+
6+
export default function HeaderBar({ title, subtitle, activeTab, className }: HeaderBarProps) {
7+
return (
8+
<div className={'flex flex-col gap-4 md:flex-row md:items-center md:justify-between ' + (className ?? '')}>
9+
<div>
10+
<h1 className="text-3xl font-semibold tracking-tight">{title}</h1>
11+
<p className="mt-1 text-sm text-slate-600 dark:text-slate-300">{subtitle}</p>
12+
</div>
13+
<HeaderTabs active={activeTab} />
14+
</div>
15+
);
16+
}

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import Link from 'next/link';
2+
import React from 'react';
3+
4+
type HeaderTabsProps = { active: 'lucide' | 'sprite'; className?: string };
5+
6+
export default function HeaderTabs({ active, className }: HeaderTabsProps) {
7+
const baseLink = 'px-3 py-2 text-sm font-medium transition-colors duration-150';
8+
const inactive = 'text-slate-700 hover:bg-slate-50 dark:text-slate-300 dark:hover:bg-slate-800';
9+
const activeClasses = 'bg-slate-900 text-white dark:bg-white dark:text-slate-900';
10+
11+
return (
12+
<div
13+
className={
14+
'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 ' +
15+
(className ?? '')
16+
}>
17+
<Link
18+
href="/icon-sprite"
19+
className={baseLink + ' ' + (active === 'sprite' ? activeClasses : inactive)}
20+
aria-current={active === 'sprite' ? 'page' : undefined}>
21+
Zero UI Sprite
22+
</Link>
23+
<Link
24+
href="/lucide-react"
25+
className={baseLink + ' ' + (active === 'lucide' ? activeClasses : inactive)}
26+
aria-current={active === 'lucide' ? 'page' : undefined}>
27+
Lucide React
28+
</Link>
29+
</div>
30+
);
31+
}

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export const SectionGrid: React.FC<{ children: React.ReactNode }> = ({ children }) => {
2+
return (
3+
<section className="grid grid-cols-5 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 xl:grid-cols-15 gap-2 md:gap-3 *:rounded-md *:bg-blue-600 *:text-white *:p-2 *:shadow-md *:transition *:duration-150 *:w-9 *:h-9 justify-items-center *:hover:shadow-none *:hover:translate-y-[1px]">
4+
{children}
5+
</section>
6+
);
7+
};

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
3+
type StatsCardProps = { title: string; value: string; badgeText?: string; badgeTone?: 'positive' | 'negative' | 'neutral'; className?: string };
4+
5+
export default function StatsCard({ title, value, badgeText, badgeTone = 'neutral', className }: StatsCardProps) {
6+
const badgeClasses =
7+
badgeTone === 'positive' ? 'bg-green-100 text-green-700' : badgeTone === 'negative' ? 'bg-red-100 text-red-700' : 'bg-slate-100 text-slate-700';
8+
9+
return (
10+
<div
11+
className={
12+
'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-3 sm:p-4 shadow-sm ' +
13+
(className ?? '')
14+
}>
15+
<div className="text-[10px] sm:text-xs uppercase tracking-wide text-slate-500">
16+
{title} <span className="font-bold">HTML size:</span>
17+
</div>
18+
<div className="mt-1 flex items-baseline gap-2">
19+
<div className="text-base sm:text-lg font-semibold">{value}</div>
20+
{badgeText ? (
21+
<span className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] sm:text-xs font-medium ${badgeClasses}`}>{badgeText}</span>
22+
) : null}
23+
</div>
24+
</div>
25+
);
26+
}

examples/demo/src/app/(sprite-demo)/zero-icon-sprite/page.tsx renamed to examples/demo/src/app/(sprite-demo)/icon-sprite/page.tsx

Lines changed: 61 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -139,66 +139,89 @@ import {
139139
Instagram,
140140
Linkedin,
141141
InspectionPanel,
142+
GitMerge,
143+
GitPullRequest,
144+
GitBranch,
145+
PencilRuler,
146+
GitGraph,
147+
PencilLine,
148+
Pen,
149+
Pencil,
150+
Pin,
151+
GitCommitVertical,
142152
} from '@react-zero-ui/icon-sprite';
143153
import Link from 'next/link';
154+
import HeaderBar from '../components/HeaderBar';
155+
import StatsCard from '../components/StatsCard';
156+
import { SectionGrid } from '../components/SectionGrid';
157+
158+
export const metadata = {
159+
title: 'React Zero Icon Sprite - Lucide to SVG sprite solution',
160+
description:
161+
'Reduce HTML bundle by 300%. Use thousands of Lucide icons in React with a single SVG sprite. Zero client-side re-renders, tiny bundles, and instant performance.',
162+
alternates: { canonical: 'https://zero-ui.dev/icon-sprite' },
163+
};
144164

145165
const page = () => {
146166
return (
147167
<div className="min-h-screen bg-gradient-to-b from-slate-50 to-white dark:from-slate-900 dark:to-slate-950">
148168
<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">Zero UI Icon Sprite</h1>
152-
<p className="mt-1 text-sm text-slate-600 dark:text-slate-300">
169+
<HeaderBar
170+
title="Zero UI Icon Sprite"
171+
subtitle={
172+
<>
153173
Lucide to SVG sprite solution for React. w/custom icon support.{' '}
154174
<Link
155175
href="https://github.com/react-zero-ui/icon-sprite#readme"
156176
className="text-blue-500 hover:underline"
157177
target="_blank">
158178
See Github
159179
</Link>
160-
</p>
161-
</div>
162-
<div className="inline-flex rounded-xl border border-slate-200 dark:border-slate-700 bg-white/70 w-fit dark:bg-slate-900/60 backdrop-blur supports-[backdrop-filter]:bg-white/50 shadow-sm overflow-hidden">
163-
<Link
164-
href="/zero-icon-sprite"
165-
className="px-3 py-2 text-sm font-medium bg-slate-900 text-white dark:bg-white dark:text-slate-900 w-fit"
166-
aria-current="page">
167-
Zero UI Sprite
168-
</Link>
169-
<Link
170-
href="/lucide-react"
171-
className="px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 dark:text-slate-300 dark:hover:bg-slate-700 w-fit">
172-
Lucide React
173-
</Link>
174-
</div>
175-
</div>
180+
</>
181+
}
182+
activeTab="sprite"
183+
/>
176184

177185
<section className="grid grid-cols-1 gap-3 sm:grid-cols-2">
178-
<div className="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white/70 dark:bg-slate-900/60 backdrop-blur supports-[backdrop-filter]:bg-white/50 p-4 shadow-sm">
179-
<div className="text-xs uppercase tracking-wide text-slate-500">This page</div>
180-
<div className="mt-1 flex items-baseline gap-2">
181-
<div className="text-xl sm:text-2xl font-semibold">HTML size: 6.9kb</div>
182-
<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>
183-
</div>
184-
</div>
185-
<div className="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white/70 dark:bg-slate-900/60 backdrop-blur supports-[backdrop-filter]:bg-white/50 p-4 shadow-sm">
186-
<div className="text-xs uppercase tracking-wide text-slate-500">Lucide React page</div>
187-
<div className="mt-1 flex items-baseline gap-2">
188-
<div className="text-xl sm:text-2xl font-semibold">HTML size: 19.5kb</div>
189-
<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>
190-
</div>
191-
</div>
186+
<StatsCard
187+
title="This page"
188+
value="8.5kb"
189+
badgeText="-290%"
190+
badgeTone="positive"
191+
/>
192+
<StatsCard
193+
title="Lucide React page"
194+
value="23.0kb"
195+
badgeText="+270%"
196+
badgeTone="negative"
197+
/>
192198
</section>
193199

194200
<p className="text-sm text-slate-600 dark:text-slate-300">Open DevTools → Elements to compare document size and structure.</p>
195201

196-
<div className="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white/70 dark:bg-slate-900/60 backdrop-blur supports-[backdrop-filter]:bg-white/50 p-4 shadow-sm">
202+
<div className="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white/70 dark:bg-slate-900/60 p-4 shadow-sm">
197203
<div className="mb-3 flex items-center justify-between">
198-
<h2 className="text-sm font-medium text-slate-700 dark:text-slate-200">150 Icons</h2>
204+
<h2 className="text-sm font-medium text-slate-700 dark:text-slate-200">150 Icons - loaded with Zero Icon Sprite</h2>
199205
<div className="text-xs text-slate-500">Sprite-based rendering</div>
200206
</div>
201-
<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">
207+
<SectionGrid>
208+
<Facebook size={24} />
209+
<Instagram
210+
height={24}
211+
width={24}
212+
/>
213+
<Linkedin size={24} />
214+
<InspectionPanel size={24} />
215+
<Pin size={24} />
216+
<Pencil size={24} />
217+
<Pen size={24} />
218+
<PencilLine size={24} />
219+
<PencilRuler size={24} />
220+
<GitGraph size={24} />
221+
<GitBranch size={24} />
222+
<GitPullRequest size={24} />
223+
<GitMerge size={24} />
224+
<GitCommitVertical size={24} />
202225
<AlarmSmoke size={24} />
203226
<Album size={24} />
204227
<AArrowDown size={24} />
@@ -335,11 +358,7 @@ const page = () => {
335358
<Bath size={24} />
336359
<Battery size={24} />
337360
<BluetoothSearching size={24} />
338-
<Facebook size={24} />
339-
<Instagram size={24} />
340-
<Linkedin size={24} />
341-
<InspectionPanel size={24} />
342-
</div>
361+
</SectionGrid>
343362
</div>
344363
</main>
345364
</div>

0 commit comments

Comments
 (0)