Skip to content

Commit 9fe0a4b

Browse files
Austin1serbAustin1serb
committed
fix hero overflow
1 parent 3d0e3a1 commit 9fe0a4b

2 files changed

Lines changed: 108 additions & 106 deletions

File tree

‎examples/demo/app/(home)/icon-sprite/hero-icon-backdrop.tsx‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import type { ComponentType, CSSProperties } from "react";
2+
import {
3+
Activity,
4+
Airplay,
5+
AlarmClock,
6+
Archive,
7+
BadgeCheck,
8+
Bell,
9+
Calendar,
10+
CheckCircle,
11+
Code,
12+
Download,
13+
GitBranch,
14+
GitMerge,
15+
GitPullRequest,
16+
Heart,
17+
IconBrandGithub,
18+
IconBrandTabler,
19+
IconHeart,
20+
Mail,
21+
Package,
22+
Rocket,
23+
Search,
24+
Settings,
25+
Sparkles,
26+
Zap,
27+
} from "@react-zero-ui/icon-sprite";
28+
29+
export type IconComponent = ComponentType<{ size?: number; className?: string; width?: number; height?: number; strokeWidth?: number }>;
30+
31+
export const sampleIcons: IconComponent[] = [
32+
Activity,
33+
Airplay,
34+
AlarmClock,
35+
Archive,
36+
BadgeCheck,
37+
Bell,
38+
Calendar,
39+
CheckCircle,
40+
Code,
41+
Download,
42+
GitBranch,
43+
GitMerge,
44+
GitPullRequest,
45+
Heart,
46+
IconBrandGithub,
47+
IconBrandTabler,
48+
IconHeart,
49+
Mail,
50+
Package,
51+
Rocket,
52+
Search,
53+
Settings,
54+
Sparkles,
55+
Zap,
56+
];
57+
58+
const heroIcons: IconComponent[] = Array.from({ length: 140 }, (_, index) => sampleIcons[index % sampleIcons.length]);
59+
60+
const iconSpotlight: CSSProperties = {
61+
WebkitMaskImage: "radial-gradient(circle 180px at var(--x, 50%) var(--y, 50%), #000 0%, transparent 70%)",
62+
maskImage: "radial-gradient(circle 180px at var(--x, 50%) var(--y, 50%), #000 0%, transparent 70%)",
63+
};
64+
65+
export function HeroIconBackdrop() {
66+
return (
67+
<div
68+
aria-hidden
69+
className="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
70+
<div className="absolute inset-y-0 left-[42%] right-[-18%] hidden md:block">
71+
<IconGrid className="absolute inset-0 dark:text-fd-foreground/5 text-fd-foreground/8" />
72+
<IconGrid
73+
className="icon-spotlight-drift absolute inset-0 text-fd-primary/35"
74+
style={iconSpotlight}
75+
/>
76+
</div>
77+
<div className="absolute inset-x-[-18%] bottom-[-24%] top-[34%] md:hidden">
78+
<IconGrid className="absolute inset-0 text-fd-foreground/3" />
79+
<IconGrid
80+
className="icon-spotlight-drift absolute inset-0 text-fd-primary/25"
81+
style={iconSpotlight}
82+
/>
83+
</div>
84+
</div>
85+
);
86+
}
87+
88+
function IconGrid({ className, style }: { className?: string; style?: CSSProperties }) {
89+
return (
90+
<div
91+
className={`grid h-full w-full grid-cols-[repeat(auto-fill,minmax(76px,1fr))] content-start ${className ?? ""}`}
92+
style={style}>
93+
{heroIcons.map((Icon, index) => (
94+
<span
95+
key={index}
96+
className="flex aspect-square items-center justify-center border-[0.5px] border-fd-border/10">
97+
<Icon
98+
size={34}
99+
strokeWidth={1}
100+
/>
101+
</span>
102+
))}
103+
</div>
104+
);
105+
}

‎examples/demo/app/(home)/icon-sprite/page.tsx‎

Lines changed: 3 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -33,83 +33,22 @@
3333
- Search Console already shows zero-ui.dev receiving impressions for "icon sprite", so keep this as a real page instead of redirecting the legacy route.
3434
*/
3535

36-
import type { ComponentType, CSSProperties } from "react";
3736
import type { Metadata } from "next";
3837
import Link from "next/link";
39-
import {
40-
Activity,
41-
Airplay,
42-
AlarmClock,
43-
Archive,
44-
ArrowRight,
45-
BadgeCheck,
46-
Bell,
47-
Calendar,
48-
CheckCircle,
49-
Code,
50-
Download,
51-
GitBranch,
52-
GitMerge,
53-
GitPullRequest,
54-
Heart,
55-
IconBrandGithub,
56-
IconBrandTabler,
57-
IconHeart,
58-
Mail,
59-
Package,
60-
Rocket,
61-
Search,
62-
Settings,
63-
Sparkles,
64-
Zap,
65-
} from "@react-zero-ui/icon-sprite";
38+
6639
import { DynamicCodeBlock } from "fumadocs-ui/components/dynamic-codeblock";
6740
import { SITE_SLUGS } from "@/app/config/site-config";
6841
import { CopyCommand } from "../_components/CopyCommand";
6942
import { Footer, iconSpriteFooterCta } from "../_components/Footer";
43+
import { HeroIconBackdrop, sampleIcons } from "./hero-icon-backdrop";
44+
import { ArrowRight } from "@react-zero-ui/icon-sprite";
7045

7146
export const metadata: Metadata = {
7247
title: "React Icon Sprite for Lucide & Tabler | React Zero-UI",
7348
description: "Use Lucide and Tabler React icons as components, then compile only the SVG icons you use into one cached sprite sheet at build time.",
7449
alternates: { canonical: SITE_SLUGS.iconSprite },
7550
};
7651

77-
type IconComponent = ComponentType<{ size?: number; className?: string; width?: number; height?: number; strokeWidth?: number }>;
78-
79-
const sampleIcons: IconComponent[] = [
80-
Activity,
81-
Airplay,
82-
AlarmClock,
83-
Archive,
84-
BadgeCheck,
85-
Bell,
86-
Calendar,
87-
CheckCircle,
88-
Code,
89-
Download,
90-
GitBranch,
91-
GitMerge,
92-
GitPullRequest,
93-
Heart,
94-
IconBrandGithub,
95-
IconBrandTabler,
96-
IconHeart,
97-
Mail,
98-
Package,
99-
Rocket,
100-
Search,
101-
Settings,
102-
Sparkles,
103-
Zap,
104-
];
105-
106-
const heroIcons: IconComponent[] = Array.from({ length: 80 }, (_, index) => sampleIcons[index % sampleIcons.length]);
107-
108-
const iconSpotlight: CSSProperties = {
109-
WebkitMaskImage: "radial-gradient(circle 180px at var(--x, 50%) var(--y, 50%), #000 0%, transparent 70%)",
110-
maskImage: "radial-gradient(circle 180px at var(--x, 50%) var(--y, 50%), #000 0%, transparent 70%)",
111-
};
112-
11352
export default function IconSpritePage() {
11453
return (
11554
<>
@@ -178,48 +117,6 @@ function Hero() {
178117
);
179118
}
180119

181-
function HeroIconBackdrop() {
182-
return (
183-
<div
184-
aria-hidden
185-
className="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
186-
<div className="absolute inset-y-0 left-[42%] right-[-18%] hidden md:block">
187-
<IconGrid className="absolute inset-0 text-fd-foreground/5" />
188-
<IconGrid
189-
className="icon-spotlight-drift absolute inset-0 text-fd-primary/35"
190-
style={iconSpotlight}
191-
/>
192-
</div>
193-
<div className="absolute inset-x-[-18%] bottom-[-24%] top-[34%] md:hidden">
194-
<IconGrid className="absolute inset-0 text-fd-foreground/3" />
195-
<IconGrid
196-
className="icon-spotlight-drift absolute inset-0 text-fd-primary/25"
197-
style={iconSpotlight}
198-
/>
199-
</div>
200-
</div>
201-
);
202-
}
203-
204-
function IconGrid({ className, style }: { className?: string; style?: CSSProperties }) {
205-
return (
206-
<div
207-
className={`grid h-full w-full grid-cols-[repeat(auto-fill,minmax(76px,1fr))] content-start ${className ?? ""}`}
208-
style={style}>
209-
{heroIcons.map((Icon, index) => (
210-
<span
211-
key={index}
212-
className="flex aspect-square items-center justify-center border-[0.5px] border-fd-border/10">
213-
<Icon
214-
size={34}
215-
strokeWidth={1}
216-
/>
217-
</span>
218-
))}
219-
</div>
220-
);
221-
}
222-
223120
function Benchmark() {
224121
const lucideSizeKb = 19.5;
225122
const spriteSizeKb = 7.5;

0 commit comments

Comments
 (0)